Degradados CSS

Tabla de contenido

Fondos degradados:

Gradient Backgrounds

Los degradados CSS te permiten mostrar transiciones suaves entre dos o más colores específicos.

CSS define tres tipos de degradados:

Degradados lineales (hacia abajo/arriba/izquierda/derecha/diagonalmente)
Degradados radiales (definidos por su centro)
Degradados cónicos (girados alrededor de un punto central)

Degradados lineales CSS

Para crear un degradado lineal debes definir al menos dos paradas de color. Las paradas de color son los colores que desea generar transiciones suaves. entre. También puede establecer un punto de partida y una dirección (o un ángulo) a lo largo con el efecto degradado.

Sintaxis

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Dirección: de arriba a abajo (ésta es la opción predeterminada)

El siguiente ejemplo muestra un degradado lineal que comienza en la parte superior. Comienza en rojo y pasa a amarillo:

top to bottom (default)

Ejemplo

  #grad {
  background-image: linear-gradient(red, yellow);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

<div id="grad1"></div>

</body>
</html>

Dirección: de izquierda a derecha

El siguiente ejemplo muestra un degradado lineal que comienza desde la izquierda. Comienza en rojo y pasa a amarillo:

left to right

Ejemplo

  #grad {
  background-image: linear-gradient(to right, red , yellow);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Left to Right</h1>
<p>This linear gradient starts red at the left, transitioning to yellow (to the right):</p>

<div id="grad1"></div>

</body>
</html>

Dirección - Diagonal

Puede hacer un degradado en diagonal especificando las posiciones iniciales horizontal y vertical.

El siguiente ejemplo muestra un degradado lineal que comienza en la parte superior izquierda (y llega a la parte inferior derecha). Comienza en rojo y pasa a amarillo:

top left to bottom right

Ejemplo

   #grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Diagonal</h1>
<p>This linear gradient starts red at top left, transitioning to yellow (at bottom right):</p>

<div id="grad1"></div>

</body>
</html>

Usando ángulos

Si desea tener más control sobre la dirección del degradado, puede definir un ángulo, en lugar de las direcciones predefinidas (hacia abajo, hacia arriba, a la derecha, a la izquierda, abajo a la derecha, etc.). Un valor de 0 grados equivale a "hasta arriba". Un valor de 90 grados equivale a "a la derecha". un valor de 180 grados equivale a "hasta abajo".

Sintaxis

background-image: linear-gradient(angle, color-stop1, color-stop2);

El siguiente ejemplo muestra cómo utilizar ángulos en gradientes lineales:

180deg

Ejemplo

  #grad {
  background-image: linear-gradient(180deg, red, yellow);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(0deg, red, yellow);
}

#grad2 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(90deg, red, yellow);
}

#grad3 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(180deg, red, yellow);
}

#grad4 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradients - Using Different Angles</h1>

<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>

</body>
</html>

Usar múltiples paradas de color

El siguiente ejemplo muestra un degradado lineal (de arriba a abajo) con múltiples paradas de color:

Ejemplo

  #grad {
  background-image: linear-gradient(red, yellow, green);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow, green);
}

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red 10%, green 85%, blue 90%);
}
</style>
</head>
<body>

<h1>Linear Gradients - Multiple Color Stops</h1>
<p><strong>Note:</strong> Color stops are spaced evenly when no percents are specified.</p>

<h2>3 Color Stops (evenly spaced):</h2>
<div id="grad1"></div>

<h2>7 Color Stops (evenly spaced):</h2>
<div id="grad2"></div>

<h2>3 Color Stops (not evenly spaced):</h2>
<div id="grad3"></div>

</body>
</html>

El siguiente ejemplo muestra cómo crear un degradado lineal (de izquierda a derecha) con el color del arco iris y algo de texto:

Rainbow Background

Ejemplo

   #grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 55px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Rainbow Background
</div>

</body>
</html>

Usando transparencia

Los degradados CSS también admiten la transparencia, que se puede utilizar para crear efectos de desvanecimiento.

Para agregar transparencia, usamos la función rgba() para definir las paradas de color. El último parámetro en la función rgba() puede ser un valor de 0 a 1, y define la transparencia del color: 0 indica transparencia total, 1 indica todo color (sin transparencia).

El siguiente ejemplo muestra un degradado lineal que comienza desde la izquierda. Comienza completamente transparente y pasa a todo color rojo:

Ejemplo

  #grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), 
rgba(255,0,0,1));
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>

<h1>Linear Gradient - Transparency</h1>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).</p>

<div id="grad1"></div>

</body>
</html>

Repetir un gradiente lineal

La función repetición-lineal-gradiente() se utiliza para repetir gradientes lineales:

Ejemplo

Un gradiente lineal repetido:

   #grad {
  background-image: 
repeating-linear-gradient(red, yellow 10%, green 20%);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
}

#grad4 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
}

#grad5 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg, red 0px, red 10px, red 10px, yellow 10px, yellow 20px);
}
</style>
</head>
<body>

<h1>Repeating Linear Gradient</h1>

<div id="grad1"></div>

<p>A repeating gradient on 45deg axe starting red and finishing green:</p>
<div id="grad2"></div>

<p>A repeating gradient on 190deg axe starting red and finishing green:</p>
<div id="grad3"></div>

<p>A repeating gradient on 90deg axe starting red and finishing green:</p>
<div id="grad4"></div>

<p>A repeating linear gradient with solid stripes:</p>
<div id="grad5"></div>

</body>
</html>