mask-image (often a gradient) makes parts of an element transparent based on the mask's alpha — great for fade-out edges or punching an image into a shape. Where clip-path cuts a hard edge, masks give soft, gradient-based transparency.
mask-image (often a gradient) makes parts of an element transparent based on the mask's alpha — great for fade-out edges or punching an image into a shape. Where clip-path cuts a hard edge, masks give soft, gradient-based transparency.
<!doctype html><html><head><meta charset="utf-8">
<style>img{width:240px;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}</style></head><body style="background:#06040d;padding:20px"><img src="https://via.placeholder.com/240x160" alt=""></body></html>