Crear degradados con CSS

Cuando hablamos de un degradado dentro del mundo del arte, y más concretamente del diseño, nos referimos a una transición suave entre dos o más colores de forma gradual. Se trata de un efecto que ha pasado del entorno más tradicional al digital por su gran versatilidad a la hora de aportar valor visual a un proyecto.

Al comienzo de dedicarme al desarrollo web, cuando un diseño utilizaba un degradado el único modo de incluirlo durante la maquetación era mediante una imagen de fondo. Para que no afectada demasiado a la carga de datos, si éste tenía un patrón uniforme, lo habitual era realizar un corte de 1px y ajustarlo para que se repitiera. Si embargo esto era un engorro considerable y cuando el patrón era complejo no te quedaba más remedio que usar una imagen completa. Puede que a día de hoy la carga de este tipo de imágenes no supongan demasiada diferencia dentro del flujo, pero las velocidades en aquel momento hacían que la optimización de los recursos fuera vital.

Como se trataba de una práctica habitual entre los maquetadores web, la comunidad decidió incorporarlo a las propiedades de CSS y soportar de manera nativa el uso de gradientes de una manera bastante flexible. La incorporación se hizo a través de la propiedad background-imagen, parecía lógico que si precisamente se venían cargando como imagen, se extendieran las funciones de esta propiedad para poder definir sus características. Así pues, tenemos la posibilidad de crear degradados lineales mediante la función linear-gradient(),  radiales usando radial-gradient() y cónicos con conic-gradient(). La sintaxis es la siguiente:

.degradado-css-lineal {
	background-image: linear-gradient(to right, #ffffff, #000000);
}
.degradado-css-radial {
	background-image: radial-gradient(circle, rgba(255,0,0,0), #000000);
}
.degradado-css-conico{
	background-image: conic-gradient(rgba(255,0,0,0) 90deg, #000000);
}

Indicamos primero el tipo de degradado CSS, después las características dependiendo del tipo que queramos usar como pueden ser la dirección, el color de origen y el color de destino. La dirección la podemos establecer con grados si queremos ser más específicos y el color en hexadecimal o RGBA que nos permite indicar el alfa.

Decir que entre el color de origen y el final podemos añadir tantos como queramos dando lugar a patrones de degradados más complejos. Así es cómo se verían los degradados del ejemplo anterior:

See the Pen Crear degradados con CSS by Jesús Tovar (@jesustovar) on CodePen.

La contra de crear degradados así es sin duda que no tenemos una interfaz gráfica que nos ayude a previsualizar lo que estamos creando. En cualquier caso para eso siempre podemos usar un generador de degradados CSS online que nos facilite la tarea.