Gerador de gradiente CSS
Monte um gradiente visualmente e depois copie um CSS que funciona em todos os navegadores modernos.
Lacrado neste dispositivo
Funciona no seu navegador. Nada é enviado.
Lacrado
Prévia
Paradas de cor
Arraste as paradas, ou selecione uma e use as setas do teclado. Clique na barra para adicionar uma parada.
Configurações
O OKLCH e o OKLab evitam a zona cinza e apagada no meio de alguns gradientes. Uma versão padrão é incluída para navegadores mais antigos.
Código CSS
Como funciona
-
Escolha um tipo
Escolha um gradiente linear, radial ou cônico, ou comece por uma predefinição, e defina o ângulo ou o centro.
-
Edite as cores
Arraste as paradas de cor ao longo da barra, clique na barra para adicionar mais e altere a cor e a posição de cada parada.
-
Copie o CSS
Copie o código gerado e cole na sua folha de estilos como fundo.
Perguntas frequentes
Qual é a diferença entre gradientes lineares, radiais e cônicos?
Um gradiente linear muda de cor ao longo de uma linha reta, no ângulo que você escolher. Um gradiente radial se espalha a partir de um ponto central, em círculo ou elipse. Um gradiente cônico gira em torno de um ponto central, como os ponteiros de um relógio, o que é útil para círculos cromáticos e gráficos de pizza.
O CSS gerado funciona em todos os navegadores?
Gradientes lineares, radiais e cônicos funcionam em todos os navegadores atuais. Quando você escolhe a mistura OKLCH ou OKLab, o código também inclui antes uma linha padrão, para que navegadores mais antigos ainda mostrem um gradiente.
Por que meu gradiente fica cinza no meio?
Misturar duas cores muito diferentes no espaço sRGB padrão muitas vezes passa por um cinza sujo. Mude a mistura para OKLCH ou OKLab: as cores são misturadas do jeito que o olho as percebe, então o meio continua vivo.
Posso usar cores transparentes?
Sim. Digite uma cor com transparência, como rgb(52 66 217 / 0.4) ou #3442d966, no campo de cor de uma parada. É ótimo para sobreposições em cima de imagens.
Quantas paradas de cor posso adicionar?
Quantas precisar. Cada parada pode ser movida com o mouse, pelo toque ou com as setas do teclado, e removida desde que restem duas paradas.