Tool overview
O que é Gerador de gradiente CSS?
Gerador de gradiente CSS é uma ferramenta que ajuda você a desenhar gradientes CSS multiponto lineares, radiais e cônicos com OKLCH e exportação Tailwind.
Por que usar Gerador de gradiente CSS?
Melhora a legibilidade e acelera seu fluxo quando você precisa desenhar gradientes CSS multiponto lineares, radiais e cônicos com OKLCH e exportação Tailwind, sem enviar dados a um servidor.
Recursos principais
Privacidade no cliente, resultados instantâneos e cópia com um clique para gerador de gradiente CSS. desenhar gradientes CSS multiponto lineares, radiais e cônicos com OKLCH e exportação Tailwind
Como usar
Siga estes passos para obter resultados precisos com a ferramenta acima.
- Escolha linear, radial ou cônico e adicione paradas de cor na pré-visualização ao vivo.
- Ajuste o ângulo ou a posição do centro, active OKLCH para misturas mais suaves e compare com sRGB quando necessário.
- Copie CSS, classes arbitrárias Tailwind ou propriedades CSS — ou um link para restaurar o gradiente mais tarde.
- Cole uma declaração background: linear-gradient(...) em Importar CSS para reconstruir as paradas.
- Abra Conversor de cor ou Contraste WCAG em Ferramentas relacionadas para validar as cores.
Guia do gerador de gradiente CSS: linear-gradient, OKLCH, cônico e Tailwind
Use este gerador grátis para criar CSS linear-gradient, radial-gradient e conic-gradient multiponto com interpolação OKLCH (CSS Color 4), fallbacks @supports, classes Tailwind e URLs partilháveis.
Gradientes lineares
Ângulo em graus com paradas de cor ilimitadas, posições e opacidade. Interpolação opcional in oklch.
Gradientes radiais
Círculo ou elipse a partir de um centro percentual com rampas multi-parada.
Gradientes cônicos
Varre cores em torno de um centro com from-angle para pizza e efeitos arco-íris.
Cor e opacidade multiponto
Adicione, remova, inverta ou aleatorize paradas; importe CSS de background colado.
Interpolação de cor OKLCH
Misturas perceptuais por predefinição com fallback sRGB via @supports para navegadores antigos.
CSS, Tailwind e variáveis CSS
Exporte CSS de fundo, classes arbitrárias Tailwind ou propriedades :root.
URLs partilháveis e importação CSS
Sincronize a configuração em ?g= / #g= e restaure a partir de CSS de gradiente colado.
Transferência de acessibilidade
Deep-link de paradas para Contraste WCAG e Conversor de cor.
Texto com gradiente CSS
Exporte o gradiente e aplique com background-clip: text e cor transparente (-webkit-background-clip: text no Safari).
Borda com gradiente CSS
Use o gradiente num wrapper com padding e fundo sólido interior, ou border-image com o mesmo gradiente.
Animar gradientes CSS
Exporte CSS estático aqui e anime background-position ou propriedades personalizadas na folha de estilos.
CSS gradient border
Common patterns: (1) a padded wrapper with the exported gradient background and an inner element with a solid fill, or (2) `border-image` using the same gradient. Prefer the wrapper approach when you need rounded corners and consistent cross-browser results.
Animating CSS gradients
This generator exports static gradient CSS. Animate in your stylesheet by shifting `background-position` on a larger gradient, or by transitioning CSS custom properties that feed into `linear-gradient()` / `conic-gradient()`.
Perguntas frequentes
Respostas para problemas comuns e questões de privacidade de dados.
Documentação oficial e referências
Especificações e documentação da plataforma para esta utilidade.