Gerador de gradiente CSS
Crie gradientes CSS lineares, radiais e cônicos com paradas de cor arrastáveis, ângulos, modo repetido e interpolação OKLCH. Prévia ao vivo e código pronto para copiar.
Predefinições
Configurações do gradiente
Paradas de cor
Clique na barra para adicionar uma parada e arraste as alças para movê-las. As cores aceitam hex, rgb(), hsl() ou oklch().
Pré-visualização
background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);
Ferramentas Relacionadas
Ver TodasO que é Gerador de gradiente CSS?
Um editor completo de gradientes CSS com suporte a linear-gradient, radial-gradient e conic-gradient, suas variantes repetidas e interpolação de cor moderna (in oklab / in oklch). As paradas de cor podem ser arrastadas em uma barra ou digitadas com exatidão, e as cores aceitam hex, rgb(), hsl() ou oklch().
Como usar Gerador de gradiente CSS
- Escolha uma predefinição ou um tipo: Linear, Radial ou Cônico.
- Defina o ângulo (linear), o ângulo inicial (cônico) ou a forma, o tamanho e a posição do centro (radial/cônico).
- Edite as paradas de cor: clique na barra para adicionar uma parada, arraste as alças para movê-las ou digite a cor e a posição de cada parada.
- Opcionalmente, marque o gradiente repetido e escolha um espaço de cor de interpolação (OKLab ou OKLCH).
- Copie o código CSS.
Exemplo
Linear, angle 45°, stops #00c9ff at 0% and oklch(70% 0.2 150) at 80%, interpolation OKLCH
background: linear-gradient(45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%); background: linear-gradient(in oklch 45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%);
Quando usar Gerador de gradiente CSS
Use-o para fundos, botões, seções de destaque e listras ou rodas de cores feitas com gradientes. Para fundos suaves de vários pontos no estilo “mesh”, use o Gerador de gradiente mesh; para efeitos fotográficos em imagens, use filtros CSS.
Como funciona Gerador de gradiente CSS
As paradas são ordenadas pela posição e escritas como color position%. Gradientes lineares usam um ângulo em graus, radiais shape [size] at x% y% e cônicos from angle at x% y%. Clicar na barra insere uma parada cuja cor é interpolada a partir das vizinhas. Quando um espaço de interpolação é selecionado, a ferramenta gera duas declarações: primeiro um fallback sRGB simples, depois o mesmo gradiente com in oklch (ou in oklab), para que navegadores antigos mantenham um gradiente funcional e os modernos usem a mistura perceptual mais suave.
Casos de Uso Comuns
- Fundos de seções e de destaque
- Botões e selos com gradiente
- Rodas de cores e visuais tipo pizza com gradientes cônicos
- Fundos listrados com gradientes repetidos
- Gradientes OKLCH suaves que evitam o meio acinzentado das misturas sRGB
Perguntas Frequentes
Por que há duas linhas de background com interpolação OKLCH?
Navegadores que não entendem in oklch descartam essa declaração inteira. A primeira linha é um gradiente sRGB comum que eles conseguem usar; navegadores compatíveis aplicam a segunda.
O que a interpolação OKLCH muda?
As cores são misturadas em um espaço perceptualmente uniforme, então gradientes entre cores saturadas continuam vivos em vez de passar por um meio cinza ou lamacento.
Posso usar transparência?
Sim. Use rgba(), hsl() ou oklch() com um valor alfa (por exemplo rgba(0, 0, 0, 0.5)) como cor de uma parada.
Como faço listras com bordas duras?
Coloque duas paradas na mesma posição (por exemplo amarelo 5% e preto 5%) e ative o gradiente repetido, como na predefinição Listras.