Gerador de Gradientes CSS
Desenhe gradientes CSS lineares ou radiais visualmente: escolha o tipo, ajuste o ângulo ou forma, adicione quantas paradas de cor quiser e veja uma pré-visualização ao vivo. Copie o resultado como regra CSS ou como classe de valor arbitrário do Tailwind.
Paradas de cor
- 0%
- 100%
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
bg-[linear-gradient(135deg,_#3b82f6_0%,_#8b5cf6_100%)]
Como usar
- Escolha linear ou radial.
- Ajuste o ângulo (linear) ou a forma (radial).
- Edite as paradas de cor e mova os sliders de posição.
- Copie a regra CSS ou a classe do Tailwind.
Perguntas frequentes
- Por que valores arbitrários do Tailwind?
- A classe bg-[…] de valor arbitrário permite usar um gradiente personalizado direto em um projeto Tailwind sem escrever um CSS separado.
- Quantas paradas de cor posso adicionar?
- Quantas quiser — três a cinco costuma ficar melhor, mas a ferramenta aceita qualquer número.
- Posso salvar um gradiente?
- Seu último desenho é salvo automaticamente no armazenamento local do navegador e restaurado na próxima visita.
- Por que a classe Tailwind usa underscores?
- Tailwind trata espaços como separadores de classe, então valores arbitrários usam underscores no lugar de espaços.
Ferramentas relacionadas
Gerador de Conic Gradient
Construtor visual para CSS `conic-gradient()` — rotacionar ângulo, posição do centro, paradas de cor, pré-visualização de forma. Útil para gráficos de pizza, gráficos de anel, padrões xadrez, rodas de cor.
Exportador de Tokens de Cor
Defina uma paleta de cores uma vez, exporte para CSS custom properties, config Tailwind, SCSS, LESS, JSON de design tokens, SwiftUI Color ou `colors.xml` Android. Swatches de pré-visualização ao vivo.
Buscador de nome de cor
Encontre o nome de cor CSS, Tailwind ou XKCD mais próximo de qualquer hex/RGB — ordenado por distância perceptual em OKLab.
Simulador de modos de mesclagem CSS
Aplique os 16 modos de mesclagem do W3C (multiply, screen, overlay, soft-light, hue, color, luminosity…) a duas cores e obtenha o hex resultante e um snippet CSS mix-blend-mode pronto para copiar.
Misturador de Cores
Interpole entre duas cores em RGB, HSL ou CIELAB. Veja uma faixa de gradiente com passos intermediários.
Interpolação de Cor / Passos de Gradiente
Escolha duas cores hex, obtenha N passos intermediários discretos — em sRGB, linear RGB, OKLab ou HSL — com easing opcional.