Início / CSS e cores / Gerador de gradiente CSS
Gerador de gradiente CSS
Ajuste duas cores e um ângulo, veja a prévia mudar e copie uma linha de CSS pronta para colar na folha de estilos. Sem imagens e sem requisições extras: quem desenha é o navegador.
Como usar
- Escolha as duas cores.
- Selecione linear ou radial e arraste o controle de ângulo.
- Copie a propriedade background gerada.
Exemplos
- 135° de azul profundo para amarelo dá o clássico cabeçalho diagonal.
- Um gradiente radial de centro claro para borda escura cria um foco suave.
- Duas cores muito próximas geram uma textura sutil em vez de uma faixa evidente.
Perguntas frequentes
Para onde aponta o ângulo?
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. É a direção para onde o gradiente avança, não onde ele começa.
Por que meu gradiente fica sujo no meio?
Porque duas cores opostas na roda passam pelo cinza ao se misturar. Escolha cores mais próximas em matiz ou acrescente uma terceira parada para guiar o caminho por uma cor que você realmente queira.
Ferramentas relacionadas
Atualizado: 2026-08-07