Los degradados CSS son una de las herramientas visuales más poderosas. Crean transiciones suaves entre colores sin imágenes. Esta guía completa de degradados CSS cubre todo.
Crea degradados visualmente con nuestro Generador de degradados CSS →
Degradados lineales
Transicionan colores a lo largo de una línea recta.
Basic Syntax
/* Default: top to bottom */
background: linear-gradient(#3b82f6, #8b5cf6);
/* With direction */
background: linear-gradient(to right, #3b82f6, #8b5cf6);
/* With angle */
background: linear-gradient(45deg, #3b82f6, #8b5cf6);
/* Multiple color stops */
background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6);
/* Color stops with positions */
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);Direction Keywords
background: linear-gradient(to top, ...); /* 0deg */
background: linear-gradient(to right, ...); /* 90deg */
background: linear-gradient(to bottom, ...); /* 180deg - default */
background: linear-gradient(to left, ...); /* 270deg */
background: linear-gradient(to top right, ...); /* diagonal */
background: linear-gradient(to bottom left, ...); /* diagonal */Hard Color Stops (Sharp Transitions)
/* Sharp 50/50 split */
background: linear-gradient(90deg, #3b82f6 50%, #ef4444 50%);
/* Three equal sections */
background: linear-gradient(90deg,
#3b82f6 33.3%, #22c55e 33.3%,
#22c55e 66.6%, #ef4444 66.6%
);Degradados radiales
Irradian desde un punto central.
/* Default: ellipse at center */
background: radial-gradient(#3b82f6, #1e1b4b);
/* Circle shape */
background: radial-gradient(circle, #3b82f6, #1e1b4b);
/* Positioned center */
background: radial-gradient(circle at top left, #3b82f6, #1e1b4b);
background: radial-gradient(circle at 25% 75%, #3b82f6, #1e1b4b);
/* Sized circle */
background: radial-gradient(circle 200px at center, #3b82f6, transparent);
/* Size keywords */
background: radial-gradient(closest-side, #3b82f6, #1e1b4b);
background: radial-gradient(farthest-corner, #3b82f6, #1e1b4b);
/* Spotlight effect */
background: radial-gradient(circle 300px at 50% 30%,
rgba(59, 130, 246, 0.3), transparent
);Degradados cónicos
Transicionan alrededor de un punto central.
/* Basic color wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
/* Pie chart */
background: conic-gradient(
#3b82f6 0deg 120deg, /* 33% */
#22c55e 120deg 210deg, /* 25% */
#f59e0b 210deg 300deg, /* 25% */
#ef4444 300deg 360deg /* 17% */
);
/* Starting angle and position */
background: conic-gradient(from 45deg at 50% 50%, #3b82f6, #8b5cf6, #3b82f6);
/* Donut chart (combine with radial) */
background:
radial-gradient(circle 60px, var(--bg-primary) 99%, transparent),
conic-gradient(#3b82f6 0% 40%, #22c55e 40% 70%, #ef4444 70% 100%);
border-radius: 50%;Degradados repetitivos
Crean rayas y patrones.
/* Diagonal stripes */
background: repeating-linear-gradient(
45deg,
#3b82f6, #3b82f6 10px,
transparent 10px, transparent 20px
);
/* Horizontal stripes */
background: repeating-linear-gradient(
0deg,
#1e1b4b, #1e1b4b 2px,
transparent 2px, transparent 20px
);
/* Repeating radial */
background: repeating-radial-gradient(
circle, #3b82f6, #3b82f6 5px,
transparent 5px, transparent 15px
);
/* Repeating conic (sunburst) */
background: repeating-conic-gradient(
#3b82f6 0deg 10deg, transparent 10deg 20deg
);Degradados múltiples
Apila varios degradados en un solo elemento.
/* Spotlight overlay on gradient */
background:
radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1), transparent 50%),
linear-gradient(135deg, #0f172a, #1e1b4b);
/* Cross pattern */
background:
linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%),
linear-gradient(0deg, transparent 49.5%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%);
background-size: 40px 40px;Texto con degradado
Aplica degradados al texto con background-clip.
/* Gradient text effect */
.gradient-text {
background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; /* fallback */
}
/* Animated gradient text (using @property) */
@property --gradient-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.animated-gradient-text {
background: linear-gradient(var(--gradient-angle), #3b82f6, #ec4899, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: rotate-gradient 3s linear infinite;
}
@keyframes rotate-gradient {
to { --gradient-angle: 360deg; }
}Bordes con degradado
CSS no soporta bordes con degradado directamente.
/* Method 1: border-image (no border-radius support) */
.gradient-border-1 {
border: 3px solid;
border-image: linear-gradient(135deg, #3b82f6, #ec4899) 1;
}
/* Method 2: pseudo-element (supports border-radius) */
.gradient-border-2 {
position: relative;
border-radius: 12px;
padding: 3px; /* border width */
background: linear-gradient(135deg, #3b82f6, #ec4899);
}
.gradient-border-2::before {
content: '';
position: absolute;
inset: 3px; /* same as padding */
background: var(--bg-card); /* inner background */
border-radius: 9px; /* outer radius minus border width */
}
.gradient-border-2 > * { position: relative; }
/* Method 3: outline + mask (modern browsers) */
.gradient-border-3 {
background:
linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
linear-gradient(135deg, #3b82f6, #ec4899) border-box;
border: 3px solid transparent;
border-radius: 12px;
}Patrones creativos
Combina degradados para crear patrones complejos.
/* Checkerboard */
background:
conic-gradient(#1e293b 90deg, transparent 90deg 180deg,
#1e293b 180deg 270deg, transparent 270deg) 0 0 / 40px 40px;
/* Dots */
background:
radial-gradient(circle 3px, #3b82f6 99%, transparent) 0 0 / 20px 20px;
/* Carbon fiber */
background:
radial-gradient(#333 15%, transparent 16%),
radial-gradient(#333 15%, transparent 16%);
background-size: 8px 8px;
background-position: 0 0, 4px 4px;
background-color: #222;Rendimiento y compatibilidad
Los degradados son renderizados por la GPU.
- GPU-rendered: Gradients are composited by the GPU, making them faster than equivalent images.
- Zero HTTP requests: Unlike background images, gradients add no network overhead.
- Retina-ready: Gradients scale perfectly at any resolution without becoming pixelated.
- Browser support: Linear and radial gradients have 99%+ support. Conic gradients work in all modern browsers (Chrome, Firefox, Safari, Edge). Use
@supportsfor progressive enhancement if targeting older browsers. - Avoid: Extremely complex gradients with 20+ color stops on elements that reflow frequently.
Preguntas frecuentes
¿Se pueden animar los degradados CSS?
No directamente, pero sí con @property o background-position.
¿Diferencia entre linear-gradient y radial-gradient?
Lineal = línea recta. Radial = del centro hacia afuera.
¿Cómo crear un borde con degradado?
Con border-image o pseudo-elementos.
¿Afectan al rendimiento?
No, son renderizados por la GPU.
¿Cómo evitar el banding?
Añadir paradas intermedias y transiciones más largas.
Los degradados CSS son versátiles. Experimenta con nuestra herramienta.