Gerador de Gradientes CSS
Ferramenta gratuita de gerador de gradientes CSS online, visualização em tempo real
Tipos de gradiente CSS
Gradientes lineares transicionam cores ao longo de uma linha reta definida por um ângulo ou direção. Gradientes radiais transicionam a partir de um ponto central para fora em uma forma circular ou elíptica. Ambos suportam múltiplos pontos de parada de cor para transições complexas entre três ou mais cores.
Como criar um gradiente CSS
Selecione o tipo de gradiente (linear ou radial), escolha as cores inicial e final e ajuste o ângulo para gradientes lineares. A ferramenta gera o código CSS instantaneamente. Copie o CSS e cole em sua folha de estilos como uma propriedade background ou background-image.
▶Posso usar mais de duas cores em um gradiente?
Sim, gradientes CSS suportam pontos de parada de cor ilimitados. Adicione cores adicionais modificando o código CSS gerado com valores de cor extras separados por vírgulas.
▶Qual é o suporte de navegador para gradientes CSS?
Gradientes CSS são suportados em todos os navegadores modernos. Para navegadores mais antigos, você pode precisar de prefixos de fornecedor (-webkit-gradient) ou uma cor sólida de fallback.
▶Posso usar transparência em gradientes?
Sim. Use valores de cor rgba() ou hsla() para incluir transparência. Por exemplo, linear-gradient(135deg, rgba(255,0,0,0.5), transparent) cria um gradiente vermelho semitransparente.
Se este ferramenta foi útil para você, pense em me dar um café.
Compre um café para mim.