Gerador de Gradientes CSS
Cor
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
Paleta de Cor a partir de Imagem
Solte uma imagem e a ferramenta extrai uma paleta de cores dominantes via Canvas — copie HEX ou pegue o conjunto inteiro.
Simulador de Daltonismo
Veja como sua imagem se parece para pessoas com cada um dos 8 tipos de deficiência visual cromática (CVD).
Gerador de CSS Box Shadow
Desenhe box-shadow CSS visualmente em várias camadas, com pré-visualização ao vivo e saída CSS / Tailwind pronta para copiar.
Conversor de Formatos de Cor
Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.
Gerador de Paleta de Cores
Crie paletas harmoniosas a partir de uma cor base em seis esquemas.
Verificador de Contraste de Cor
Verifique o contraste texto/fundo nos níveis WCAG AA e AAA.