CSS Gradient
Generator
Gere gradientes CSS lindos — lineares, radiais ou cónicos — e copie o código instantaneamente. Pré-visualização em tempo real ao ajustar cores e ângulo.
① Escolha tipo e ângulo do gradiente ② Escolha duas cores ③ Copie o CSS
background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%);Transição de cores ao longo de uma linha reta definida por um ângulo (0–360°). 0° vai de baixo para cima, 90° da esquerda para a direita.
As cores irradiam de um ponto central para o exterior em forma elíptica ou circular. Ideal para efeitos spotlight e glow.
As cores rodam em torno de um ponto central como uma roda de cores. Perfeito para gráficos circulares e designs angulares.
Como funcionam os gradientes CSS — linear, radial e cónico
Os gradientes CSS são gerados inteiramente pelo browser sem ficheiros de imagem. Um gradiente linear mistura color stops ao longo de um eixo: linear-gradient(). Um radial emana de um ponto focal: radial-gradient(). Um cónico varre cores angularmente: conic-gradient(). Os três aplicam-se via background ou background-image. As posições de stop (0%–100%) controlam onde cada cor começa e termina.