Docs ejecutables de CSS: Degradados CSS

Q: ¿Cómo hago un degradado radial en CSS?

Usa background-image: radial-gradient(#93c5fd, #1e3a8a);. Agrega una forma y una posición delante de los colores, como radial-gradient(circle at top left, #93c5fd, #1e3a8a).

Q: ¿Qué diferencia hay entre circle y ellipse en radial-gradient?

ellipse (el valor por defecto) se estira según las proporciones de la caja, así que es ancha en una caja ancha. circle mantiene el degradado redondo sea cual sea la forma de la caja.

Q: ¿Cómo defino la dirección de un degradado lineal?

Pon primero una dirección o un ángulo: linear-gradient(to right, red, blue) o linear-gradient(45deg, red, blue). El valor por defecto es to bottom (180deg); 0deg apunta hacia arriba y los ángulos giran en el sentido de las agujas del reloj.

Q: ¿Cómo hago rayas nítidas en lugar de una mezcla suave?

Dale a dos colores la misma posición de parada: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) cambia de color en el medio sin mezcla. repeating-linear-gradient repite un patrón de esas paradas.

Q: ¿Puedo usar un degradado como background-color?

No. Un degradado es una imagen, así que va en background-image o en la abreviatura background. background-color: linear-gradient(...) es inválido y se ignora.

Degradados radiales

radial-gradient() mezcla colores hacia afuera desde un punto central. Como todos los degradados de CSS, es una imagen, así que va en background-image (o en la abreviatura background):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 220px; height: 120px; border-radius: 8px; margin-bottom: 4px; }
    .ellipse { background-image: radial-gradient(#93c5fd, #1e3a8a); }
    .circle { background-image: radial-gradient(circle, #93c5fd, #1e3a8a); }
    .corner { background-image: radial-gradient(circle at top left, #fde68a, #f59e0b 40%, #b45309); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box ellipse"></div>ellipse (default)</div>
    <div><div class="box circle"></div>circle</div>
    <div><div class="box corner"></div>circle at top left</div>
  </div>
</body>
</html>

La sintaxis completa es radial-gradient(shape size at position, color stops). Todo lo que va antes de los colores es opcional.

Parte	Valores	Por defecto
Forma	`circle`, `ellipse`	`ellipse`
Tamaño	`closest-side`, `closest-corner`, `farthest-side`, `farthest-corner` o longitudes	`farthest-corner`
Posición	`at center`, `at top left`, `at 30% 70%`, `at 20px 40px`	`at center`
Paradas de color	Dos o más colores, cada uno con una posición opcional

La palabra clave de tamaño decide dónde se alcanza el último color: en el lado más cercano de la caja, en la esquina más lejana, etc. Cambia los valores aquí y mira cómo se vuelve a dibujar el degradado:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box { height: 160px; margin-top: 10px; border: 1px solid #d1d5db; border-radius: 8px; }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>radial-gradient( <input id="val" value="circle closest-side at 30% 50%, #f59e0b, #2563eb" size="42"> )</label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      const value = 'radial-gradient(' + input.value + ')';
      const ok = CSS.supports('background-image', value);
      if (ok) box.style.backgroundImage = value;
      document.getElementById('out').textContent = ok ? value : 'invalid gradient';
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Prueba circle farthest-corner at 30% 50%, #f59e0b, #2563eb, ellipse at bottom, white, #16a34a y circle 40px, #f59e0b 99%, transparent (un punto de borde nítido).

Degradados lineales

linear-gradient() mezcla a lo largo de una línea recta. Pon primero una dirección o un ángulo y después los colores:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Linear gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 160px; height: 90px; border-radius: 8px; margin-bottom: 4px; }
    .down { background-image: linear-gradient(#2563eb, #16a34a); }
    .right { background-image: linear-gradient(to right, #2563eb, #16a34a); }
    .angle { background-image: linear-gradient(45deg, #2563eb, #16a34a); }
    .three { background-image: linear-gradient(to right, #dc2626, #f59e0b, #16a34a); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box down"></div>default (to bottom)</div>
    <div><div class="box right"></div>to right</div>
    <div><div class="box angle"></div>45deg</div>
    <div><div class="box three"></div>three colors</div>
  </div>
</body>
</html>

Los ángulos empiezan en 0deg apuntando hacia arriba y giran en el sentido de las agujas del reloj, así que 90deg es to right y 180deg es el to bottom por defecto. to right sigue siendo físico en páginas de derecha a izquierda; inviértelo tú si el degradado debe seguir la dirección de lectura.

Paradas de color y paradas nítidas

Cada color puede tener una posición. Sin posiciones, los colores se reparten de forma uniforme. Cuando dos colores comparten una posición, el cambio es instantáneo, y así se dibujan rayas, banderas y barras de progreso:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color stops</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .bar { height: 40px; border-radius: 6px; margin: 4px 0 12px; }
    .shifted { background: linear-gradient(to right, #2563eb 70%, #f59e0b); }
    .hard { background: linear-gradient(to right, #2563eb 60%, #e5e7eb 60%); }
    .stripes {
      background: repeating-linear-gradient(45deg,
        #f59e0b 0 12px, #111827 12px 24px);
    }
    .rings { height: 120px; background: repeating-radial-gradient(circle, #2563eb 0 8px, #bfdbfe 8px 16px); }
  </style>
</head>
<body>
  Solid until 70%, then blends
  <div class="bar shifted"></div>
  Hard stop at 60% (a progress bar)
  <div class="bar hard"></div>
  repeating-linear-gradient
  <div class="bar stripes"></div>
  repeating-radial-gradient
  <div class="bar rings"></div>
</body>
</html>

Una parada también puede llevar dos posiciones, #111827 12px 24px, que dibuja una franja sólida de 12px a 24px.

Degradados cónicos

conic-gradient() recorre los colores alrededor de un punto central, como las agujas de un reloj. Con paradas nítidas dibuja un gráfico circular sin imágenes ni JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Conic gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .pie {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(#2563eb 0 45%, #16a34a 45% 75%, #f59e0b 75%);
    }
    .wheel {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    }
  </style>
</head>
<body>
  <div><div class="pie"></div>45%, 30%, 25%</div>
  <div><div class="wheel"></div>A color wheel</div>
</body>
</html>

Un gráfico dibujado con CSS es invisible para los lectores de pantalla, así que pon también los números en texto.

Texto con degradado

Recorta un fondo degradado a la forma de las letras y haz transparente el propio texto:

.gradient-text {
  background: linear-gradient(90deg, #2563eb, #db2777);
  -webkit-background-clip: text; /* older browsers need the prefix */
  background-clip: text;
  color: transparent;
}

Ten en cuenta un color simple de respaldo: si el recorte falla, el texto desaparece. El texto con degradado también tiene un contraste irregular, así que úsalo solo en títulos grandes.

Los degradados se apilan con imágenes y con otros degradados en una misma lista de background-image; la página de imagen de fondo explica las capas, el tamaño y la posición.

Errores comunes

background-color: linear-gradient(...). Un degradado es una imagen: usa background-image o background.
Grados en la dirección equivocada. 0deg apunta hacia arriba, no a la derecha. 90deg va hacia la derecha.
Un degradado en un elemento sin altura. No se ve nada; dale contenido o un tamaño.
Colores intermedios apagados. Mezclar dos colores saturados opuestos, como rojo y verde, pasa por un gris marrón en sRGB. Agrega una parada intermedia, o mezcla en otro espacio de color: linear-gradient(in oklch, red, green).
Bandas en degradados grandes y sutiles. Colores muy parecidos en un área grande muestran escalones; un poco más de contraste entre las paradas ayuda.

Preguntas frecuentes

¿Cómo hago un degradado radial en CSS?

Usa background-image: radial-gradient(#93c5fd, #1e3a8a);. Agrega una forma y una posición delante de los colores, como radial-gradient(circle at top left, #93c5fd, #1e3a8a).

¿Qué diferencia hay entre circle y ellipse en radial-gradient?

ellipse (el valor por defecto) se estira según las proporciones de la caja, así que es ancha en una caja ancha. circle mantiene el degradado redondo sea cual sea la forma de la caja.

¿Cómo defino la dirección de un degradado lineal?

Pon primero una dirección o un ángulo: linear-gradient(to right, red, blue) o linear-gradient(45deg, red, blue). El valor por defecto es to bottom (180deg); 0deg apunta hacia arriba y los ángulos giran en el sentido de las agujas del reloj.

¿Cómo hago rayas nítidas en lugar de una mezcla suave?

Dale a dos colores la misma posición de parada: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) cambia de color en el medio sin mezcla. repeating-linear-gradient repite un patrón de esas paradas.

¿Puedo usar un degradado como background-color?

No. Un degradado es una imagen, así que va en background-image o en la abreviatura background. background-color: linear-gradient(...) es inválido y se ignora.

Conceptos relacionados