Como usar
- Escolha Linear ou Radial.
- Nos degradês lineares, ajuste o ângulo.
- Defina a cor e a posição de cada parada. Adicionar parada inclui cores, até cinco, e Remover tira.
- Clique em Copiar e cole a regra no seu CSS.
O que o resultado significa
O valor padrão é background: linear-gradient(90deg, #ff7a18 0%, #af002d 100%);: vai do laranja na borda esquerda ao vermelho-escuro na direita. Cada par é uma cor e o ponto em que ela é atingida por completo. Entre duas paradas, o navegador mistura as cores.
Exemplo
Três paradas, #ff7a18 em 0%, #ffffff em 50% e #af002d em 100%, dão um degradê que passa pelo branco no meio: linear-gradient(90deg, #ff7a18 0%, #ffffff 50%, #af002d 100%).
Dicas
- Coloque duas paradas na mesma posição para ter um corte seco em vez de uma transição.
- As cores são misturadas em sRGB, então entre cores complementares o meio pode ficar acinzentado; adicione uma parada intermediária para controlar isso.
- Confira o contraste do texto sobre um degradê nas duas extremidades.