Gerador de gradiente CSS
Monte um gradiente de fundo visualmente e copie o CSS pronto. Arraste as paradas de cor pela barra, clique na barra para adicionar uma parada, mude o ângulo ou o centro e deixe cores transparentes. O código inclui uma cor sólida de reserva para navegadores antigos.
Como usar
- Escolha linear, radial ou cônico, ou comece por um modelo ou um gradiente aleatório.
- Clique numa parada para editar cor, opacidade e posição; arraste-a, ou clique na barra para adicionar outra.
- Copie o CSS e cole na regra do elemento.
Perguntas frequentes
Qual a diferença entre gradiente linear, radial e cônico?
O linear muda de cor ao longo de uma reta, no ângulo escolhido. O radial se espalha a partir de um centro, em círculo ou elipse. O cônico gira em volta de um centro, como os ponteiros de um relógio, útil para rodas de cores e gráficos de pizza.
Gradientes CSS funcionam em todos os navegadores?
Sim. 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 só por navegadores muito antigos.
Como faço listras?
Coloque duas paradas da mesma cor no início e no fim de cada listra, para a cor mudar de repente em vez de se misturar, e ative Repetir. O último modelo é um exemplo.
🏷️ Gerador de meta tags
🖼️ Gerador de Open Graph
🔗 Gerador de UTM
🔲 Gerador de sombra CSS (box-shadow)