Crie gradientes CSS lindos com preview em tempo real. Copie o código pronto para usar.
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);Gradientes CSS são transições suaves entre duas ou mais cores, criando efeitos visuais elegantes sem a necessidade de imagens. Eles são amplamente usados em web design moderno para criar backgrounds atraentes, botões estilizados e elementos visuais impactantes.
Nosso gerador permite criar três tipos de gradientes: linear (transição em linha reta), radial (transição circular do centro para fora) e conic (transição em formato de cone, girando em torno de um ponto central).
Cria uma transição de cores em linha reta. Você pode controlar a direção (horizontal, vertical ou diagonal) e adicionar múltiplas cores com posições específicas.
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);Cria uma transição circular partindo do centro. Ideal para criar efeitos de spotlight, botões com brilho ou backgrounds com profundidade.
background: radial-gradient(circle, #f12711 0%, #f5af19 100%);Cria uma transição em formato de cone, girando em torno de um ponto. Perfeito para criar gráficos de pizza, efeitos de arco-íris ou designs circulares únicos.
background: conic-gradient(from 0deg, #667eea, #764ba2);