Cor e Design
Gerador de Gradientes
Gerador de gradientes CSS gratuito. Construa visualmente gradientes lineares, radiais e cónicos. Copie CSS ou classes Tailwind instantaneamente. Pré-visualização ao vivo enquanto ajusta.
Runs in your browser
Gradient generator
CSS
background: linear-gradient(135deg, #3b82f6, #a855f7);css
Tailwind (approx)
bg-gradient-to-br from-[#3b82f6] to-[#a855f7]css
Nota do editor
Understanding · Two colours and a path between them.
Este capítulo aprofundado está disponível apenas em inglês no momento. A ferramenta de conversão acima funciona no seu idioma; o artigo explicativo longo ainda não foi traduzido.
Perguntas frequentes
Quick answers.
›What gradient types are supported?
Linear, radial and conic — all three CSS gradient types.
›Can I add color stops?
Yes — add as many color stops as you need with custom positions for fine-grained control.
›Does it output Tailwind?
Yes — toggle to get Tailwind utility classes (e.g. bg-gradient-to-r from-blue-500 to-purple-600).
›Is the generator free?
Yes — fully free, no signup, runs in your browser.
As pessoas também pesquisam por
Use with
What people reach for next.
Ferramentas relacionadas
More in this room.
- Gerador de Box ShadowEditor visual de box-shadow CSS.
- Gerador de Border RadiusEditor de border-radius CSS por canto.
- Editor de Cubic BezierCrie curvas de easing CSS visualmente.
- Gerador de Animação CSSCrie keyframes visualmente, copie CSS pronto a usar.
- Gerador de Filtro CSSPré-visualize ao vivo desfoque, brilho, rotação de matiz e mais.
- Gerador de GlassmorphismCartões de UI com efeito de vidro fosco com backdrop-filter.