Categoria: Desenvolvimento
Gerador de gradiente CSS
Monte um gradiente linear ou radial e copie o CSS
Escolha duas ou três cores, ajuste o ângulo, veja a prévia ao vivo e copie uma declaração background-image pronta para colar. Tudo é renderizado no navegador.
background-image: linear-gradient(135deg, #0f7b63 0%, #1f4f7a 100%);
Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
Um gradiente é mais fácil de julgar no olho do que de escrever à mão, então esta ferramenta pinta o CSS real num painel de prévia enquanto você mexe nos controles. Escolha um gradiente linear com ângulo em graus ou um radial centralizado, adicione uma cor intermediária opcional para uma mistura de três paradas e copie a declaração direto para a sua folha de estilo.
Como usar
- Escolha um gradiente linear ou radial.
- Escolha as cores inicial e final e, se quiser, uma intermediária.
- Ajuste o ângulo e copie a declaração CSS.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- Alguma coisa é enviada?
- Não. A prévia é um fundo CSS pintado pelo seu navegador e a declaração é montada na página, então nada vai para um servidor.
- Preciso de prefixos de fabricante?
- Não para os navegadores atuais. linear-gradient e radial-gradient sem prefixo têm suporte há muitos anos.
- Para onde aponta o ângulo?
- No CSS, 0deg vai de baixo para cima e o ângulo cresce no sentido horário, então 90deg vai da esquerda para a direita e 180deg de cima para baixo.