Core Code
Core Code Modern Dev Handbook

Gradient Mask

Gradients can create fade mask effects.

Preview

Code

<style>
img{
width:200px;
-webkit-mask-image:linear-gradient(to bottom,black,transparent);
mask-image:linear-gradient(to bottom,black,transparent);
}
</style>

<img src="https://via.placeholder.com/400x250">

More CSS Masking Examples (8)

example Basic Mask Image open example example Circle Mask open example example Mask Position open example example Mask Size open example example Mask Repeat open example example Masked Text Effect open example example Mask Hover Reveal open example example Combined Mask Effects open example