Gerador de gradientes CSS
Desenhe um gradiente de fundo de forma visual e copie CSS pronto a usar. Arraste as paragens de cor ao longo da barra, clique na barra para acrescentar uma paragem, mude o ângulo ou o centro e torne as cores transparentes. O código inclui uma cor sólida de reserva para navegadores antigos.
Como utilizar
- Escolha linear, radial ou cónico, ou parta de uma predefinição ou de um gradiente aleatório.
- Clique numa paragem para editar a cor, a opacidade e a posição; arraste-a ou clique na barra para acrescentar outra.
- Copie o CSS e cole-o na regra do elemento.
Perguntas frequentes
Qual é a diferença entre gradientes lineares, radiais e cónicos?
Um gradiente linear muda de cor ao longo de uma linha reta, no ângulo que escolher. Um gradiente radial expande-se a partir de um centro, em círculo ou elipse. Um gradiente cónico roda em torno de um centro, como os ponteiros de um relógio, o que é útil para círculos cromáticos e gráficos circulares.
Os gradientes CSS funcionam em todos os navegadores?
Sim. Os gradientes lineares, radiais e cónicos funcionam em todas as versões atuais do Chrome, Edge, Firefox e Safari, sem prefixos. A primeira linha de background é uma cor simples, usada apenas por navegadores muito antigos.
Como faço riscas?
Ponha duas paragens da mesma cor no início e no fim de cada risca, para que a cor mude de repente em vez de se misturar, e ative Repetir. A última predefinição é um exemplo.
🏷️ Gerador de meta tags
🖼️ Gerador de Open Graph
🔗 Gerador de links UTM
🔲 Gerador de box-shadow CSS