How do I make a CSS gradient border?

CSS has no native gradient-border property. The reliable trick is a double-background with background-clip: border: 2px solid transparent; background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #7c6fff, #ff6fb0) border-box.

Linear vs radial vs conic — which gradient should I use?

Use linear-gradient for backgrounds, buttons, headers — anything where colors flow in a direction. Use radial-gradient for spotlight, sun-like or vignette effects. Use conic-gradient for pie charts, color wheels, loading spinners, or any sweep around a center.

Why is there banding in my gradient?

Banding happens when the gradient spans a long distance with too few color stops, or on 8-bit displays with similar adjacent colors. Add intermediate color stops to smooth the transition, or add subtle film-grain noise as an overlay.

How do I animate a CSS gradient?

Gradients can't transition directly. Animate background-position on an oversized gradient (size 300% 300%) for a flowing effect, or use the modern @property API to animate registered custom properties for true color-stop animation.

How do I create gradient text in CSS?

Apply the gradient as background, then add background-clip: text and -webkit-text-fill-color: transparent. Works in every modern browser.

Are CSS gradients better than image backgrounds?

For solid color transitions, almost always yes. CSS gradients scale to any resolution without quality loss, load instantly with no extra HTTP request, and can be themed with custom properties.

Gerador de Gradientes CSS

CSSTools.io

Your Gradient

Adjust the controls to create your perfect gradient.

Live Preview

Guia Completo de Gradientes CSS

Um gradiente CSS é uma transição suave entre duas ou mais cores renderizada completamente pelo navegador — sem imagens, sem SVG, totalmente escalável. Os gradientes são aplicados como valores da propriedade background.

Use o gerador acima para construir seu gradiente visualmente: escolha o tipo, selecione as cores, ajuste o ângulo e copie o CSS pronto.

Tipos de Gradientes CSS

linear-gradient() — Transição ao longo de uma linha reta. O mais usado no design web.

radial-gradient() — Irradia de um ponto central para fora em forma circular.

conic-gradient() — Gira as cores ao redor de um ponto central.

Perguntas Frequentes

Como funciona um gradiente CSS?

Um gradiente CSS é uma transição suave entre cores gerada pelo navegador, sem imagens.

Os gradientes CSS funcionam em todos os navegadores?

Sim. Os gradientes CSS são compatíveis com todos os navegadores modernos.

Tool last updated: May 2026