Gerador de gradiente CSS
Cores
Predefinições
Como fazer um gradiente CSS
- Escolha um tipo: o linear segue em linha reta no ângulo definido, o radial se espalha em círculo a partir do centro e o cônico gira em volta do centro a partir do ângulo definido.
- Mude cada cor e arraste o controle para definir a posição, de 0% a 100%. Adicionar uma cor coloca uma nova no maior espaço, até seis; ✕ remove uma.
- Ou toque numa predefinição para começar dela. A prévia muda na hora; Copiar CSS copia as linhas para colar na sua folha de estilo.
Perguntas frequentes
Por que há duas linhas de background?
A primeira é uma cor sólida para o raro navegador que não desenha gradientes; a segunda a substitui em todos os outros.
O que significa o ângulo?
Num gradiente linear, 0deg vai de baixo para cima, 90deg da esquerda para a direita e 180deg de cima para baixo. Num cônico, é onde a primeira cor começa, girando no sentido horário a partir do topo.
Posso usar o gradiente em texto ou borda?
Sim. Para texto, use-o como fundo e acrescente background-clip: text e color: transparent. Para borda, use-o em border-image com border-image-slice: 1.