Como crear degradados o difuminados en la web usando CSS

Actualizado: 17 de noviembre del 2022
Por: Norfi Carrodeguas

Reglas para crear degradados, o gradientes (gradient blur), en páginas web para diferentes navegadores y que validen correctamente.

Como crear degradados o difuminados en la web usando CSS

Es de gran utilidad usar CSS para crear degradados o difuminados en las páginas y así evitamos tener que emplear imágenes.
A continuación muestro dos ejemplos con el código necesario para crearlas.

Ejemplos de degradados o difuminados con CSS

Degradado con transparencia

El primer degradado usa el color azul y el blanco, con la transparencia al 0% este último.
Esto permite que al usar el Modo Oscuro en el navegador se aprecie la transparencia.
Pruébalo!

/* W3C */
background: linear-gradient(to right, rgba(68,160,233,1) 0%, rgba(255,255,255,0) 100%);

/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(left, rgba(68,160,233,1) 0%, rgba(255,255,255,0) 100%); 

/* Opera 11.10+ */
background: -o-linear-gradient(left, rgba(68,160,233,1) 0%, rgba(255,255,255,0) 100%); 

/* IE 10+ */
background: -ms-linear-gradient(left, rgba(68,160,233,1) 0%, rgba(255,255,255,0) 100%);

Degradado sin transparencia

El siguiente degradado usa un tono de rojo con blanco y en este caso la transparencia al 100%.

background: linear-gradient(to right, rgba(229,117,115,1) 0%, rgba(255,255,255,1) 100%);

Reglas CCS y compatibilidad para crear gradientes

Los desarrolladores usan diferentes reglas para crear los degradados con CSS.
Yo solo uso en las páginas de este sitio solo linear-gradient, que es completamente compatible con el Validador del W3C y que funciona correctamente en los principales navegadores web.
No obstante se muestran debidamente comentadas las reglas más empleadas, en cada uno de los efectos.

El código para cualquier degradado lo podemos obtener con la siguiente herramienta: Generador de gradientes, bordes y textura con CSS

Comparte

Facebook

Twitter