W3Docs

Apariencia

Español

Degradados CSS ​

Los degradados CSS muestran transiciones progresivas entre dos o más colores especificados. Los degradados se pueden usar en fondos.

Hay tres tipos de degradados:

Degradados lineales ​

El linear-gradient crea una imagen que consiste en una transición suave entre dos o más colores a lo largo de una línea recta. Puede tener un punto de inicio y una dirección junto con el efecto de degradado.

Gradients

Sintaxis ​

La sintaxis del degradado lineal

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

De arriba hacia abajo ​

Los degradados lineales pasan de arriba hacia abajo, de forma predeterminada.

Ejemplo de un degradado lineal de arriba hacia abajo: ​

degradado lineal de arriba hacia abajo

html
<!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>
Try it Yourself »

TIP

Añadimos background-color para los navegadores que no admiten degradados.

De izquierda a derecha ​

Cambiar la rotación de linear-gradient especificando la dirección desde la izquierda hacia la derecha.

Ejemplo de un degradado lineal de izquierda a derecha: ​

degradado lineal de izquierda a derecha

html
<!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>
Try it Yourself »

Degradados diagonales ​

Los degradados se pueden trazar en diagonal especificando tanto las posiciones iniciales horizontal como vertical. Comienza en la esquina superior izquierda y va hasta la esquina inferior derecha.

Ejemplo del degradado diagonal: ​

degradado diagonal CSS

html
<!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>
Try it Yourself »

Uso de ángulos ​

Define un ángulo en lugar de direcciones para tener más control sobre la dirección del degradado. 0deg crea un degradado vertical que va de abajo hacia arriba, 90deg crea un degradado horizontal que va de izquierda a derecha. Especificar ángulos negativos hará que se ejecute en sentido antihorario.

Ejemplo de un degradado lineal con un ángulo especificado: ​

degradado lineal usando ángulo

html
<!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>
Try it Yourself »

Efecto de múltiples colores ​

Los colores de los degradados CSS varían con la posición, produciendo transiciones suaves de color. No hay límite en el uso de colores.

Ejemplo de un degradado lineal con efecto de múltiples colores: ​

degradado lineal con múltiples colores

html
<!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>
Try it Yourself »

También podemos crear un degradado lineal con efecto de múltiples colores especificando una dirección. Puedes dar a cada color cero, uno o dos valores de porcentaje o de longitud absoluta. 0% indica el punto de inicio, mientras que 100% indica el punto final.

Ejemplo de un degradado lineal con múltiples colores de izquierda a derecha: ​

degradado lineal de izquierda a derecha con múltiples colores

html
<!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>
Try it Yourself »

Ejemplo de un degradado lineal con múltiples colores de derecha a izquierda: ​

degradado lineal con múltiples colores de derecha a izquierda

html
<!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>
Try it Yourself »

Transparencia ​

Los degradados admiten transparencia, por lo que puedes usar varios fondos para lograr un efecto transparente. Para conseguirlo, puedes usar la función rgba() para definir los puntos de color. El último parámetro de la función rgba() puede ser un valor de 0 a 1, que definirá la transparencia del color. 0 indica transparencia total, 1 indica color completo.

Ejemplo de un degradado lineal de color completo a transparente: ​

degradado lineal transparente

html
<!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>
Try it Yourself »

Degradado lineal repetido ​

Usa la función repeating-linear-gradient() para repetir un degradado lineal. Los colores se repiten una y otra vez a medida que el degradado se repite.

Ejemplo de un degradado lineal repetido: ​

degradado lineal repetido

html
<!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>
Try it Yourself »

Degradados radiales ​

Los degradados radiales irradian desde un punto central. Para crear un degradado radial, se deben especificar al menos dos puntos de color. Los degradados radiales pueden ser circulares o elípticos.

Sintaxis ​

Sintaxis del degradado radial

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

Ejemplo de un degradado radial con tres colores: ​

degradado radial CSS

html
<!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>
Try it Yourself »

Posicionamiento de los puntos de color radiales ​

Al igual que los degradados lineales, los degradados radiales también toman una posición especificada y una longitud absoluta.

Ejemplo de puntos de color espaciados de forma diferente: ​

puntos de color de degradado radial posicionados

html
<!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>
Try it Yourself »

Posicionamiento del centro del degradado radial ​

También puedes especificar la posición central del degradado con porcentaje o longitudes absolutas.

Ejemplo de un degradado radial con centro posicionado: ​

centro de degradado radial posicionado

html
<!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>
Try it Yourself »

Forma del degradado radial ​

El parámetro shape define la forma del degradado radial. Puede tomar dos valores: circle o ellipse. El valor predeterminado es ellipse.

Ejemplo de forma de degradado radial: ​

degradado radial circular y elíptico CSS

html
<!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>
Try it Yourself »

Tamaño del degradado radial ​

A diferencia de los degradados lineales, se puede especificar el tamaño de los degradados radiales. Los valores son:

  • closest-corner
  • closest-side
  • farthest-corner(default)
  • farthest-side.

Ejemplo de degradados radiales con tamaño especificado: ​

degradado radial CSS closest-corner, closest-side, farthest-corner y farthest-side

html
<!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>
Try it Yourself »

Degradado radial repetido ​

La función CSS repeating-radial-gradient() crea una imagen que consiste en degradados repetidos que irradian desde un origen.

Ejemplo del degradado radial repetido: ​

degradado radial CSS repetido

html
<!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>
Try it Yourself »

Degradados cónicos ​

El conic-gradient crea una imagen que consiste en un degradado con transiciones de color que giran alrededor de un punto central.

Sintaxis ​

degradado cónico CSS

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

Ejemplo de un degradado cónico básico: ​

degradado cónico CSS

html
<!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>
Try it Yourself »

Posicionamiento del centro cónico ​

Al igual que los degradados radiales, el centro del degradado cónico se puede posicionar con porcentaje o longitudes absolutas, con la palabra clave "at".

Ejemplo de un degradado cónico con centro posicionado: ​

degradado cónico CSS con centro posicionado

html
<!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>
Try it Yourself »

Cambio del ángulo ​

El ángulo del degradado cónico se puede rotar con la palabra clave "from".

Ejemplo de degradado cónico con ángulo rotado: ​

degradado cónico CSS con ángulo rotado

html
<!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>
Try it Yourself »

Degradado cónico repetido ​

La función CSS repeating-conic-gradient() crea una imagen que consiste en un degradado repetido con transiciones de color que giran alrededor de un punto central.

Ejemplo del degradado cónico repetido: ​

degradado cónico CSS repetido

html
<!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>
Try it Yourself »

Práctica ​

¿Qué tipos de degradados CSS se mencionan en la página web?

¿Te resulta útil?

Vista previa dual-run — compárala con las rutas Symfony en producción.