Gerador de Gradiente CSS
Escolha um tipo de gradiente, ajuste o ângulo e os pontos de cor e copie um CSS pronto para produção ou um valor arbitrário do Tailwind. A prévia muda enquanto você edita.
Grátis Roda no navegador Sem cadastro
Modelos
Pontos de cor
0%
50%
100%
CSS
linear-gradient(135deg, #7F52FF 0%, #B9A3FF 50%, #0B0B10 100%)
Tailwind
bg-[linear-gradient(135deg,_#7F52FF_0%,_#B9A3FF_50%,_#0B0B10_100%)]
As cores são escritas em hexadecimal e a prévia muda enquanto você edita.
Como usar
1
Escolha o tipo
Alterne entre gradiente linear, radial e cônico e defina o ângulo.
2
Ajuste os pontos
Escolha as cores, mova as posições e adicione até cinco pontos.
3
Copie o código
Copie a regra CSS ou o valor arbitrário do Tailwind e cole no seu projeto.
Por que usar esta ferramenta
Três tipos de gradiente
Gradientes linear, radial e cônico usam o mesmo editor e a mesma prévia ao vivo.
Saída para Tailwind
Receba uma classe bg-[…] pronta para colar junto do valor CSS puro.
Modelos e aleatório
Comece de um modelo pronto ou sorteie uma paleta aleatória quando precisar de inspiração.
Perguntas frequentes
Quais navegadores suportam gradientes cônicos?
Todas as versões atuais de Chrome, Edge, Firefox e Safari suportam conic-gradient. Navegadores antigos ficam sem fundo, então mantenha uma cor sólida por baixo.
Como uso o valor do Tailwind?
Cole a classe bg-[…] gerada no seu HTML ou JSX. Os espaços viram sublinhados, que é como o Tailwind escapa valores arbitrários.
Posso usar cores transparentes?
Sim, o seletor de cor grava valores hexadecimais de oito dígitos com canal alfa, que o CSS e o Tailwind aceitam.
Por que o ângulo fica desativado no radial?
Um gradiente radial se espalha a partir de um ponto central, então não há direção para girar. O ângulo continua valendo para os gradientes linear e cônico.
Algo é enviado para a internet?
Não. O gradiente é gerado no seu navegador e nunca vai para um servidor.
Ferramentas relacionadas
Cor e design Conversor de Cores Converta cores entre HEX, RGB, HSL e HSV, escolha no seletor e copie valores prontos para usar em CSS e ferramentas de design. Cor e design Verificador de Contraste Confira a taxa de contraste entre texto e fundo e veja se o par passa nos níveis WCAG AA e AAA para texto normal e grande. Ferramentas de imagem Conversor de Formato de Imagem Converta imagens PNG, JPG e WebP no navegador. Escolha formato e qualidade, mantenha a transparência quando possível e baixe na hora. Ferramentas de desenvolvimento Codificador e Decodificador Base64 Codifique texto em Base64 ou decodifique Base64 de volta para texto, com suporte a UTF-8 e à variante URL-safe. Roda no navegador, sem upload. Ferramentas de texto Conversor de Caixa de Texto Converta texto entre MAIÚSCULAS, minúsculas, Title Case, caixa de frase, camelCase, PascalCase, snake_case e kebab-case na hora. Conversores Calculadora de Datas Calcule a diferença entre duas datas, some ou subtraia dias, meses e anos e descubra a idade exata. Tudo roda no seu navegador.
Última atualização: