Great visuals with mask effects

One property. Endless creative possibilities. Let’s explore CSS masks.

CSS masks control an element’s opacity using a shape, gradient, or image. It even works with GIFs!

It results in smoother, more creative effects, all with pure CSS.

How does it work?

1. mask-image: defines the image or gradient used as a mask.
2. mask-size: controls how it fits the element.
3. mask-position: determines its placement.

Why is it powerful?

With mask-image, you can create ink effects, smooth transitions, and elegant content reveals, without heavy graphics or extra elements.

And It already has more than 96% browser support.

<div class="banner">
	<div class="content">
		<h1>Theosoti.com</h1>
	</div>
</div>

.banner:before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('image.jpeg');
	background-size: cover;
	background-position: top;
	z-index: -1;

	mask-image: url(mask.png);
	mask-size: cover;
	mask-position: center;
}

Codepen link: https://codepen.io/emgarf/pen/GgRgMMj

To learn more tips about CSS, make sure to join my newsletter below ❤️