La propriété mask-image en CSS

Une image avec un dégradé

<img src="img/8072439.webp" width="640" class="mask-img1" alt="image avec un dégradé">

.mask-img1 {
  -webkit-mask-image: linear-gradient(to top, transparent 25%, black 75%);
  mask-image: linear-gradient(to top, transparent 25%, black 75%);
}

Utiliser une image comme masque

<img src="img/8072439.webp" width="640" class="mask-img2" alt="image comme masque">

.mask-img2 {
    -webkit-mask-image: url(img/fish.png);
    mask-image: url(img/fish.png);
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
}

Utiliser une image comme masque (bis)

<img src="img/8072439.webp" width="640" class="mask-img3" alt="image comme masque">

.mask-img3 {
    -webkit-mask-image: url(img/fish.png);
    mask-image: url(img/fish.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

Une image avec un cercle

<img src="img/8072439.webp" width="640" class="mask-img4" alt="image avec un cercle">

.mask-img4 {
    -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.25) 50%);
    mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.25) 50%);
}

Une image avec une ellipse

<img src="img/8072439.webp" width="640" class="mask-img5" alt="Exemple avec masque dégradé">

.mask-img5 {
    -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.25) 50%);
    mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.25) 50%);
}

Une image et un svg inline

<svg width=0 height=0>
    <defs>
        <clipPath id="decoupage">
            <circle cx="320" cy="220" r="200" />
        </clipPath>
    </defs>
</svg>
<img src="img/8072439.webp" width="640" class="mask-img6" alt="Exemple avec masque dégradé">

.mask-img6 {
    clip-path: url(#decoupage);
}

Une image et un svg

<img src="img/8072439.webp" width="640" class="mask-img7" alt="Exemple avec masque dégradé">

.mask-img7 {
    -webkit-mask-image: url(img/blob.svg);
    mask-image: url(img/blob.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center center;
    mask-position: center center;
}

Une image et un svg animé