Impostare un gradient alle immagini con i CSS

La proprietà mask-image di CSS ci consente di creare delle "mask" alle immagini.

Oggi vediamo come usarla per creare dei gradient.

Ma penso ci siano anche altre utili utilizzi.

Comunque qui sotto due esempi:

• lineare
• ellittico

#img_gradient {
	-webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 75%);
	mask-image: linear-gradient(to bottom, transparent 5%, black 75%);
}

#img_gradient_radial {
	-webkit-mask-image: radial-gradient(ellipse 50% 90% at 27% 50%, black 40%, transparent 50%);
	mask-image: radial-gradient(ellipse 50% 90% at 27% 50%, black 40%, transparent 50%);
}

<img src="img.jpg" width="300">
<br>
<img id="img_gradient" src="img.jpg" width="300">
<br>
<img id="img_gradient_radial" src="img.jpg" width="300">

Enjoy!