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.

Generador de Gradientes CSS

Your Gradient

Adjust the controls to create your perfect gradient.

Live Preview

Guía Completa de Gradientes CSS

Un gradiente CSS es una transición suave entre dos o más colores renderizada completamente por el navegador — sin imágenes, sin SVG, totalmente escalable. Los gradientes se aplican como valores de la propiedad background o background-image.

Usa el generador de arriba para construir tu gradiente visualmente: elige el tipo, selecciona colores, ajusta el ángulo y copia el código CSS listo para tu proyecto.

Tipos de Gradientes CSS

linear-gradient() — Transición a lo largo de una línea recta. El más usado en diseño web.

radial-gradient() — Irradia desde un punto central hacia afuera en forma circular o elíptica.

conic-gradient() — Gira los colores alrededor de un punto central.

Ejemplos de Código

background: linear-gradient(to right, #7c6fff 0%, #ff6fb0 100%); background: radial-gradient(circle, #7c6fff, #0ff0fc); background: conic-gradient(#7c6fff, #ff6fb0, #7c6fff);

Preguntas Frecuentes

¿Cómo funciona un gradiente CSS?

Un gradiente CSS es una transición suave entre dos o más colores generada por el navegador, sin imágenes. Se aplica a través de la propiedad background.

¿Puedo usar múltiples paradas de color?

Sí. Puedes añadir tantas paradas de color como necesites, cada una con su posición porcentual.

¿Los gradientes CSS funcionan en todos los navegadores?

Sí. Los gradientes CSS son compatibles con todos los navegadores modernos incluyendo Chrome, Firefox, Safari y Edge.

¿Puedo animar un gradiente CSS?

No directamente. La solución habitual es animar background-position en un gradiente más grande.