Créer un effet de fondu ou dégradé sur une image

Comment créer rapidement un effet de fondu sur une image ou un bloc

Voici un petit bout de code css à appliquer directement sur vos images ou tout autre bloc de couleur. Imaginons que nous avons une image en background d’une div.home_image.

A l’aide de ce bout de code, à modifier bien sûr selon ses besoins, on obtient rapidement un effet de fondu du bas vers le haut. Les couleurs sont à adapter en fonction de celle du site.

On cible la classe de la div, et à l’aide d’un pseudo élément on applique l’effet de fondu grâce à la propriété linear-gradient. La div parente doit avoir une position: relative. On règle ensuite la hauteur de l’effet de fondu avec la valeur height.

.home_image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: -webkit-linear-gradient( bottom , #F5F5F5, rgba(255,255,255,0));
    background: linear-gradient(to top, #F5F5F5, rgba(255,255,255,0));
}