Con CSS se pueden crear fondos con degradados (o gradientes de color) partiendo de un color a otro (u otros).

Otra funcionalidad que se echaba mucho de menos en versiones anteriores de CSS era la de utilizar fondos con gradientes, o lo que es lo mismo, un color inicial que se transforma poco a poco en uno o varios colores sucesivamente. Sin embargo, en versiones anteriores a CSS3 no era posible hacerlo desde código.

En CSS3 se introducen algunas expresiones relacionadas que harán esta tarea algo muy sencillo, pudiendo utilizarlas fácilmente con la propiedad background-image.

Gradientes lineales

El primer tipo de gradiente es el gradiente lineal, que permite crear fondos con los colores gradientes indicados y una cierta dirección definida:

div {
    background-image: linear-gradient([dirección], [color1], [color2], ...)
}

Donde:

Parámetros Significado
[dirección] Orientación en la que se irán transformando los colores.
[color1] El primer color del gradiente.
[color2] El segundo color del gradiente.
... (Se pueden seguir añadiendo colores)

Veamos dos ejemplos con una dirección horizontal (hacia la derecha). El primero de ellos tiene sólo dos colores (azul y rojo), mientras que el segundo tiene tres colores (azul, amarillo y rojo). Ambos tienen como dirección una orientación hacia la derecha:

Gradiente lineal

Colores

El primer ejemplo que se ve en la imagen sería el siguiente en código CSS:

div {
    background-image: linear-gradient(to right, blue, red);
}

Es importante darse cuenta de que se pueden ir añadiendo colores, ya que no estamos limitados a gradientes de sólo dos colores. Como se puede ver en el segundo ejemplo, hemos añadimos un color amarillo antes del rojo:

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

Por defecto, las distancias entre colores se ajustan automáticamente con proporciones equivalentes, salvo que especifiquemos un tamaño (porcentaje, por ejemplo) justo después del color en cuestión. Veamos un ejemplo:

div {
    background-image: linear-gradient(to right, blue 20%, yellow 20%, red);
}

Dirección del gradiente

Como vimos antes, el primer parámetro utilizado en los ejemplos fue to right, que indica la orientación del gradiente. En este parámetro se puede indicar tanto una palabra clave como un número de grados que represente la dirección.

Orientación de dirección

Veamos una tabla de equivalencias:

Dirección Grados Significado
to top 0 ó 360deg Gradiente lineal hacia arriba.
to top right 35deg Gradiente diagonal hacia derecha-arriba.
to right 90deg Gradiente lineal hacia derecha.
to bottom right 145deg Gradiente diagonal hacia abajo-derecha.
to bottom 180deg Gradiente lineal hacia abajo.
to bottom left 215deg Gradiente diagonal hacia abajo-izquierda.
to left 270deg Gradiente lineal hacia izquierda.
to top left 325deg Gradiente diagonal hacia izquierda-arriba.

Nota: Si utilizas los grados en lugar de las palabras clave puedes usar valores intermedios (por ejemplo, 280deg o 58deg) y ser más preciso con la dirección si lo necesitas.

Gradiente radial

A parte de gradientes lineales se pueden crear gradientes con formas circulares. Para ello, sólo tenemos que utilizar la expresión radial-gradient en lugar de linear-gradient:

div {
    background-image: radial-gradient([forma] [tamaño] at [ubicación], [color1], [color2], ...);
}

Donde:

Parámetros Valor
[forma] ellipse | circle
[tamaño] farthest-corner | closest-corner | farthest-side | closest-side | [tamaño]
[ubicación] center | top | left | right | bottom | top left | top right | bottom left | bottom right
[color1] El primer color del gradiente
[color2] El siguiente color del gradiente
... (Se pueden seguir añadiendo colores)

Veamos dos ejemplos de gradientes radiales donde se utiliza una forma circular y los dos ejemplos anteriores de los gradientes lineales:

Gradiente radial

El primer ejemplo que se ve en la imagen anterior sería el siguiente en código CSS:

div {
    background-image: radial-gradient(circle farthest-corner at center, blue, red);
}

En el caso de la forma hemos elegido circle, obteniendo así un gradiente con forma circular. El valor ellipse suele ser útil en el caso en el que alarguemos el ancho del elemento y queramos que el gradiente también se estire. Con la opción de circle mantenemos el gradiente con forma circular siempre.

En el caso del tamaño, tenemos varias opciones para indicar el tamaño que tendrá nuestro gradiente:

Valor Significado
farthest-corner Intenta cubrir hasta la esquina más lejana (expande hacia ambos lados).
farthest-side Intenta cubrir hasta el lado más lejano (expande hacia un sólo lado).
closest-corner Intenta cubrir hasta la esquina más cercana.
closest-side Intenta cubrir hasta el lado más cercano.
[tamaño] Le da un tamaño específico al gradiente (*píxeles, porcentajes, etc...).

En el caso de la ubicación, simplemente especificamos la posición en la que queremos que esté colocado el centro del gradiente.

Es importante recalcar que los tres primeros parámetros (forma, tamaño y posición) pueden llegar a omitirse individualmente, tomando por omisión su valor por defecto y dando como posibilidad esquemas complejos y variados, que pueden invalidar el gradiente si se llega a un caso "imposible".

Gradientes recursivos

Añadiendo el prefijo repeating- a las expresiones anteriores podemos conseguir que el efecto del gradiente, en lugar de adaptarse a la región completa, realice una repetición constante. Comprueba los siguientes ejemplos individuales:

div {
    background: repeating-linear-gradient(circle, blue, yellow, red);
    background: repeating-radial-gradient(circle, blue, yellow, red);
}

En CSSMatic puedes encontrar un generador de gradientes que te permitirá crear estos vistosos y llamativos efectos. Por otro lado, en ColorZilla también tenemos editores de gradientes muy personalizables.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).