Gerador de Gradiente CSS
Escolha duas cores, linear ou radial e o ângulo. Veja a prévia do gradiente e copie o CSS.
Como funciona
- 1
Escolha duas cores
Códigos HEX de início e fim.
- 2
Escolha tipo e ângulo
Linear com qualquer ângulo, ou radial.
- 3
Copie o CSS
Cole no seu arquivo de estilos.
Ferramentas relacionadas
Outras ferramentas que as pessoas usam logo depois desta.
Feito para não atrapalhar
487
Ferramentas disponíveis
6
Idiomas
0
Marcas d'água adicionadas
2h
Até seus arquivos serem apagados
100%
Grátis para começar
∞
Dispositivos compatíveis
Perguntas frequentes
0deg vai de baixo para cima, 90deg da esquerda para a direita, 180deg de cima para baixo.
Gradientes sem adivinhação
Gradientes CSS trocam imagens de fundo por uma única linha de código: carregam rápido, ficam nítidos em qualquer tela e são fáceis de mudar. Gradientes lineares seguem um ângulo (90deg vai da esquerda para a direita); os radiais se espalham a partir do centro.
A ferramenta mostra uma prévia ao vivo e gera a declaração de background, para colar direto no seu CSS. Nada é enviado.