Gradientes en CSS: gradiente lineal y radial

Los gradientes nos permiten añadir efectos de colores degradados en nuestros diseños. Los gradientes están disponibles desde CSS3 y se configuran como fondos, por lo que tendremos que usar la propiedad “background“. Disponemos de dos tipos de gradientes: lineal y radial.

Gradientes en CSS: gradiente lineal y radial

1. Gradiente lineal

El gradiente lineal se define mediante la función linear-gradient() y permite crear fondos degradados en una dirección específica. El formato es el siguiente:

background: linear-gradient(dirección|ángulo, color, color, color...);
background: linear-gradient(dirección|ángulo, color posición, color posición, color posición...);
background: linear-gradient(color, color, color…);

Significado de las propiedades:

• Dirección | ángulo: indica la dirección o ángulo del gradiente. Puede ser especificado usando las palabras clave to top, to bottom, to left y to right. También puede ser indicado por un ángulo para declarar una dirección específica del gradiente.
• Color: permite crear una lista con varias paradas para ir cambiando el color del gradiente. Se pueden definir tantos colores como se necesiten. Se puede utilizar el nombre de color (en inglés), valor hexadecimal, color en RGB o HSL.
• Posición: posición a la que comienza a cambiar el color del gradiente. Suele indicarse en porcentajes o píxeles.

Recuerda utilizar la extensión que te facilita la tarea de crear los prefijos para navegadores. En estas propiedades hay diferencias entre las funciones estándar y las especificadas por los navegadores.

Ejemplo

Prueba las siguientes propiedades en diferentes contenedores y observa las diferencias entre los distintos valores.

background: linear-gradient(90deg, rgba(176,174,238,1) 0%, rgba(29,30,31,1));
background: linear-gradient(to right, red,brown,orange,yellow,blue,green,violet,pink);
background: linear-gradient(to top, #000, #ccc);
background: linear-gradient(to right,red 300px,brown 400px,orange 700px);

2. Gradiente radial

El gradiente radial nos permite crear degradados con formas circulares. El formato para los gradientes radiales es muy parecido al anterior. En este caso, debemos usar la función radial-gradient() y un nuevo atributo para la forma.

background: radial-gradient(forma, color, color, color...);
background: radial-gradient(forma posición, color, color, color...);
background: radial-gradient(forma, color posición, color posición, color posición...);
background: radial-gradient(color, color, color...);
background: radial-gradient(farthest-side, color, color, ...);

Significado de las propiedades:

• Forma: existen dos tipos de forma: circle y ellipse (el valor por defecto será ellipse). De forma optativa se puede indicar el tamaño de la forma.
• Color: permite crear una lista con varias paradas para ir cambiando el color del gradiente. Se pueden definir tantos colores como se necesiten.
• Posición: para cada color se puede indicar la posición en la que comienzan las transiciones.
• Farthest-side: para indicar que el gradiente se extienda hasta el borde más lejano del elemento. Esto es útil cuando se desea que el gradiente radial llene completamente el contenedor, independientemente de su tamaño.

Ejemplo

Prueba las siguientes propiedades en diferentes contenedores y observa las diferencias entre los distintos valores.

background: radial-gradient(ellipse, rgba(176,174,238,1) 0%, rgba(29,30,31,1));
background: radial-gradient (circle,red,brown,orange,yellow,blue);
background: radial-gradient(circle,red 300px,brown 400px,orange 700px);
background: radial-gradient(#000, #ccc);
background: radial-gradient(farthest-side, #ff5733, #ffca3a);

3. Generadores de gradientes

Para facilitarnos la tarea de la creación de gradientes podemos utilizar un generador de gradientes online que nos proporcione el código CSS necesario para nuestro diseño. Algunas herramientas online útiles son las siguientes:

• cssgradient.io

Ejemplo

background: rgb(176,174,238);
background: radial-gradient(circle, rgba(176,174,238,1) 0%, rgba(29,30,31,1) 100%);

4. Patrones de gradientes

Podemos aplicar diseños muy trabajados creando patrones sin necesidad de cargar imágenes con mucho peso. Existen diversos artistas dedicados a hacer este tipo de diseños. Algunos ejemplos de diseños de este tipo se pueden obtener en la siguiente plataforma:

• leaverou.github.io/css3patterns

Comprueba tu apendizaje

Ejercicio propuesto

Aplica un gradiente en uno de los contenedores de tu proyecto web. El gradiente debe contener los colores establecidos en la guía de estilo de tu proyecto web.