W3docs
es
Iniciar sesión

Gradientes CSS

Los gradientes CSS muestran transiciones progresivas entre dos o más colores. Aprende los tipos de gradientes, su uso y ve numerosos ejemplos.

Un gradiente CSS es una imagen generada por el navegador que muestra una transición suave y progresiva entre dos o más colores especificados. Como un gradiente es técnicamente una <image>, se puede usar en cualquier lugar donde CSS espere un valor de imagen — con mayor frecuencia en la propiedad background-image, pero también funciona para border-image, list-style-image y mask-image.

Los gradientes son independientes de la resolución (escalan a cualquier tamaño sin perder calidad) y no generan solicitudes HTTP adicionales, lo que los convierte en una alternativa ligera a los archivos de imagen para fondos, botones, superposiciones y formas decorativas.

Esta página cubre las tres funciones de gradiente definidas por CSS, con ejemplos ejecutables para cada una:

Cada función también tiene una variante repeating-* que repite el gradiente en mosaico en lugar de estirarlo una sola vez por el cuadro.

Gradientes Lineales

La función linear-gradient() crea una imagen cuyos colores hacen una transición a lo largo de una línea recta. Se controlan dos cosas: la dirección de esa línea y la lista de paradas de color colocadas a lo largo de ella. Sin dirección, la línea va desde la parte superior del cuadro hasta la inferior.

Un gradiente lineal CSS que transiciona de azul en la parte superior a morado en la parte inferior

Sintaxis del gradiente lineal

background-image: linear-gradient(direction, color1, color2, ...);

direction es opcional. Puede ser una palabra clave (to right, to bottom left) o un ángulo (90deg). Todo lo que sigue es la lista de colores separados por comas. Cualquier color CSS válido funciona, incluidos colores con nombre, hexadecimal, rgb() y hsl().

De arriba hacia abajo

Los gradientes lineales van de arriba hacia abajo de forma predeterminada, por lo que se puede omitir la dirección por completo.

Ejemplo de un gradiente lineal de arriba hacia abajo

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(#0052b0, #b340b3); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Pruébalo tú mismo »
Consejo

La declaración background-color es un valor de reserva: los navegadores muy antiguos que no entienden el gradiente ignoran la línea background-image y recurren al color sólido, para que el texto siga siendo legible.

De izquierda a derecha

Añade la palabra clave to right para rotar la línea de modo que el primer color esté en el borde izquierdo y el último en el derecho.

Ejemplo de un gradiente lineal de izquierda a derecha

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(to right, #0052b0 ,#b340b3); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Pruébalo tú mismo »

Gradientes Diagonales

Combina una palabra clave vertical y una horizontal (por ejemplo to bottom right) para que la línea vaya en diagonal por el cuadro, de esquina a esquina.

Ejemplo del gradiente diagonal

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(to bottom right, #0052b0, #b340b3); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Pruébalo tú mismo »

Uso de Ángulos

Para tener control total sobre la dirección, se puede indicar un ángulo en lugar de una palabra clave. El ángulo se mide en el sentido de las agujas del reloj desde la dirección "arriba": 0deg apunta la línea del gradiente hacia arriba (los colores fluyen de abajo hacia arriba), 90deg la apunta a la derecha (de izquierda a derecha), 180deg apunta hacia abajo. Los ángulos negativos rotan en sentido antihorario.

Ejemplo de un gradiente lineal con un ángulo especificado

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(70deg, #0052b0, #b340b3); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Pruébalo tú mismo »

Múltiples Colores

Un gradiente acepta cualquier número de colores. Se distribuyen de forma uniforme de manera predeterminada, con cada color mezclándose suavemente con el siguiente.

Ejemplo de un gradiente lineal con múltiples colores

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(#f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Pruébalo tú mismo »

Se puede combinar una dirección con múltiples colores, y se puede fijar cada color en una posición específica. Una posición es un porcentaje (0% es el inicio de la línea, 100% es el final) o una longitud absoluta. Dar dos posiciones a un color crea una franja sólida de ese color entre ellas.

Ejemplo de un gradiente lineal con múltiples colores de izquierda a derecha

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(to right, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de un gradiente lineal con múltiples colores de derecha a izquierda

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(to left, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Pruébalo tú mismo »

Transparencia

Las paradas de color pueden ser parcial o totalmente transparentes, lo cual es útil para difuminar un fondo con lo que haya detrás. Se usa rgba() (o cualquier color con canal alfa) y se establece el alfa entre 0 (completamente transparente) y 1 (completamente opaco). Esta es la forma estándar de colocar una superposición legible sobre una fotografía.

Ejemplo de un gradiente lineal de color sólido a transparente

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 200px;
        background-image: linear-gradient(to left, rgba(235, 117, 253, 0), rgba(235, 117, 253, 1));
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Pruébalo tú mismo »

Gradiente Lineal Repetido

repeating-linear-gradient() repite un patrón de gradiente en mosaico por el cuadro en lugar de estirarlo una sola vez. El tamaño de una repetición se define por la posición de la última parada de color — aquí 10%, por lo que el patrón de tres colores se repite cada 10% de la línea. Esto resulta muy útil para franjas y texturas de barras de progreso.

Ejemplo de un gradiente lineal repetido

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 200px;
        background-color: blue;
        background-image: repeating-linear-gradient(55deg, #d5b6de, #6c008a 7%, #036ffc 10%);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Pruébalo tú mismo »

Gradientes Radiales

Un gradiente radial irradia desde un punto central, con el primer color en el centro y el último en el borde. Se necesitan al menos dos paradas de color. El gradiente puede tener forma de circle (círculo) o de ellipse (elipse, que es la forma predeterminada).

Sintaxis del gradiente radial

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

La parte shape size at position es opcional. Si se omite, se obtiene una elipse farthest-corner centrada en el cuadro.

Ejemplo de un gradiente radial con tres colores

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background-image: radial-gradient( #ff0509, #fff700, #05ff33); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Pruébalo tú mismo »

Posicionamiento de las Paradas de Color Radiales

Al igual que con los gradientes lineales, se puede fijar cada color en un porcentaje o longitud absoluta para controlar qué porción del radio ocupa.

Ejemplo de paradas de color con espaciado diferente

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue;
        background-image: radial-gradient( #ff0509 10%, #fff700 20%, #05ff33 80%);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Pruébalo tú mismo »

Posicionamiento del Centro

Se usa la palabra clave at para mover el centro del gradiente fuera del centro del cuadro, usando porcentajes o longitudes absolutas.

Ejemplo de un gradiente radial con centro posicionado

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background-image: radial-gradient(at 0% 30%, #ff0509 10px, #fff700 30%, #05ff33 50%); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Pruébalo tú mismo »

Forma del Gradiente Radial

El parámetro de forma es circle o ellipse. Una elipse (la predeterminada) se estira para coincidir con la relación de aspecto del cuadro; un círculo se mantiene perfectamente redondo independientemente del ancho y alto del cuadro.

Ejemplo de la forma del gradiente radial

<!DOCTYPE html>
<html>
  <head>
    <title> Title of the document</title>
    <style>
      .gradient1 {
        height: 150px;
        width: 200px;
        background-color: blue; 
        background-image: radial-gradient(red, yellow, green);
      }
      .gradient2 {
        height: 150px;
        width: 200px;
        background-color: blue; 
        background-image: radial-gradient(circle, red, yellow, green); 
      }
    </style>
  </head>
  <body>
    <h2>Ellipse:</h2>
    <div class="gradient1"></div>
    <h2>Circle:</h2>
    <div class="gradient2"></div>
  </body>
</html>
Pruébalo tú mismo »

Tamaño del Gradiente Radial

La palabra clave de tamaño decide dónde termina la última parada de color — es decir, hasta dónde se extiende el gradiente antes de finalizar. Existen cuatro palabras clave, medidas desde el centro del gradiente:

  • closest-side — termina en el borde más cercano del cuadro.
  • closest-corner — termina en la esquina más cercana.
  • farthest-side — termina en el borde más lejano.
  • farthest-corner — termina en la esquina más lejana. Este es el valor predeterminado.

Ejemplo de gradientes radiales con tamaño especificado

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient1 {
        height: 150px;
        width: 150px;
        background-color: blue; 
        background-image: radial-gradient(closest-side at 60% 55%, #ff0509, #fff700, #103601); 
      }
      .gradient2 {
        height: 150px;
        width: 150px;
        background-color: blue; 
        background-image: radial-gradient(farthest-side at 60% 55%, #ff0509, #fff700, #103601); 
      }
      .gradient3 {
        height: 150px;
        width: 150px;
        background-color: blue;
        background-image: radial-gradient(closest-corner at 60% 55%, #ff0509, #fff700, #103601); 
      }
      .gradient4 {
        height: 150px;
        width: 150px;
        background-color: blue; 
        background-image: radial-gradient(farthest-corner at 60% 55%, #ff0509, #fff700, #103601); 
      }
    </style>
  </head>
  <body>
    <h2>closest-side:</h2>
    <div class="gradient1"></div>
    <h2>farthest-side:</h2>
    <div class="gradient2"></div>
    <h2>closest-corner:</h2>
    <div class="gradient3"></div>
    <h2>farthest-corner:</h2>
    <div class="gradient4"></div>
  </body>
</html>
Pruébalo tú mismo »

Gradiente Radial Repetido

repeating-radial-gradient() repite el patrón radial hacia afuera en anillos desde el centro. Al igual que la versión lineal, la posición de la última parada de color determina el tamaño de un anillo.

Ejemplo del gradiente radial repetido

<!DOCTYPE html>
<html>
  <head>
    <style>
      .gradient {
        height: 200px;
        width: 200px;
        background-color: blue; 
        background-image: repeating-radial-gradient(#f70000, #f7da00 10%, #005cfa 15%); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Pruébalo tú mismo »

Gradientes Cónicos

Un gradiente cónico rota sus colores alrededor de un punto central, como las manecillas de un reloj barriendo el espectro. Mientras que un gradiente radial cambia de color al moverse hacia afuera, un gradiente cónico cambia de color al moverse alrededor. Esto lo convierte en la herramienta natural para gráficos circulares, ruedas de color y acentos angulares.

Sintaxis del gradiente cónico

background-image: conic-gradient(color1, color2);

Las paradas de color se posicionan por ángulo (deg) en lugar de longitud. El gradiente comienza en la parte superior (0deg) y avanza en el sentido de las agujas del reloj.

Ejemplo de un gradiente cónico básico

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background: conic-gradient(#ff0000, #fff200);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Pruébalo tú mismo »

Posicionamiento del Centro Cónico

Al igual que con los gradientes radiales, la palabra clave at mueve el punto central del barrido usando porcentajes o longitudes absolutas.

Ejemplo de un gradiente cónico con centro posicionado

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background: conic-gradient(at 0% 50%, red 10%, yellow 30%, #1eff00 60%);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Pruébalo tú mismo »

Cambio del Ángulo

La palabra clave from rota todo el barrido, desplazando el punto de inicio en 0deg.

Ejemplo de gradiente cónico con ángulo rotado

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background: conic-gradient(from 35deg, #ff0000, #ffa600, #fcf000, #03ff0f, #be05fc, #ff0095);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Pruébalo tú mismo »

Gradiente Cónico Repetido

repeating-conic-gradient() repite el patrón angular alrededor del círculo, que es la forma clásica de crear efectos de ráfaga de estrellas y tableros de ajedrez.

Ejemplo del gradiente cónico repetido

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background: repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Pruébalo tú mismo »

Soporte de Navegadores y Consejos

Los gradientes lineales y radiales son compatibles con todos los navegadores modernos. Los gradientes cónicos son más recientes — funcionan en todas las versiones actuales de Chrome, Edge, Firefox y Safari, pero si es necesario dar soporte a navegadores muy antiguos, combina el gradiente con un valor de reserva de background-color sólido como se mostró anteriormente.

Algunos consejos prácticos:

  • Apila gradientes. La propiedad background-image acepta una lista separada por comas, por lo que se pueden superponer varios gradientes (el primero de la lista queda encima). Combina gradientes transparentes con una foto para crear superposiciones.
  • Usa hsl() para transiciones más suaves. Interpolar entre tonos muy diferentes en hexadecimal puede pasar por grises apagados; elegir tonos cercanos, o usar hsl(), mantiene las transiciones limpias.
  • Rendimiento. Los gradientes son económicos, pero animarlos vuelve a pintar todo el cuadro. Prefiere animar transform/opacity en lugar del gradiente en sí para lograr movimiento fluido.

Temas Relacionados

Práctica

Práctica
¿Qué tipos de gradientes CSS se mencionan en la página?
¿Qué tipos de gradientes CSS se mencionan en la página?
Was this page helpful?