Crear degradados con CSS

Crear degradados con CSS

7 de noviembre 2021

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 remasiado 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, 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-lineal {
	background-image: linear-gradient(to right, #ffffff, #000000);
}
.degradado-radial {
	background-image: radial-gradient(90deg, rgba(255,0,0,0), #000000);
}
.degradado-conico{
	background-image: conic-gradient(to bottom left, rgba(255,0,0,.5), #000000);
}

Indicamos primero el tipo de degradado, después la dirección, después el color de origen y por último el color de destino. La dirección la podemos establecer  o 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.

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.

Publicado por Jesús Tovar

Categorías: CSS, Diseño

Etiquetas: ,

Deja una respuesta

Tu dirección de correo electrónico no será publicada.