Gerador de Gradiente CSS
Escolha as cores e o ângulo, acompanhe a prévia e copie o CSS do fundo.
CSS
Crie um gradiente CSS online
Fundos em degradê são usados em seções de destaque, botões, cards e sobreposições em fotos. Esta página abre o Gerador de CSS na aba de gradiente, para você testar ângulos e cores olhando o resultado e copiar a linha exata de CSS.
Exemplos
| CSS | Resultado |
|---|---|
linear-gradient(90deg, #6c5ce7 0%, #00b894 100%) | Roxo à esquerda passando para verde à direita |
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) | Escurecimento na parte de baixo, usado para manter o texto legível sobre uma foto |
radial-gradient(circle, #ffffff 0%, #dfe6e9 100%) | Ponto de luz suave no centro |
conic-gradient(from 0deg, #e17055 0% 25%, #0984e3 25% 100%) | Um gráfico de pizza com um quarto destacado |
Dicas
Cores próximas na roda de cores se misturam de forma suave; cores opostas tendem a ficar acinzentadas no meio, o que se resolve com uma cor extra entre elas. Pense no contraste do texto: confira a parte mais clara e a mais escura do gradiente contra a cor do texto.
Ferramentas relacionadas
Para sombras no mesmo elemento, veja o gerador de box-shadow. Para converter uma cor para HEX, RGB ou HSL, use o conversor de cores.