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.




Comparte

Sígueme en las redes sociales