Home > Tips & Tricks > CSS Splash Image Masks – mix-blend-mode Property

CSS Splash Image Masks – mix-blend-mode Property

In this trick, we’ll explore how to effortlessly create splash image masks with CSS using the mix-blend-mode: screen property.

The CSS mix-blend-mode property allows you to control how an element’s content blends with its background or the parent element’s content. Among the array of blending modes, the screen mode stands out for its ability to create smooth blends, perfect for splash image masks.

The screen blending mode serves to lighten the background color, resulting in a reflection of the blend color. This mode is particularly effective for seamlessly merging two images, offering a visually striking effect.

Let’s see the straightforward example to grasp the concept of splash image masks using mix-blend-mode: screen CSS property.

<div class="container">
  	<div class="image-mask"></div>
  	<img src="background-image.jpg" alt="Background Image">
.container {
  	position: relative;
  	width: 500px;

.image-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(mask-image.png); /* Path to your mask image */
  	background-size: cover;
    background-position: center;
    mix-blend-mode: screen;

In the above example, the HTML structure consists of a container div containing both the image mask and the background image. The container is styled with CSS to position it relatively. The image mask div, positioned absolutely within the container, covers the entire area. By setting its background image and applying mix-blend-mode: screen, we blend it smoothly with the background image, creating an attractive splash effect.


See the Pen Untitled by Aman Mehra (@amanmehra) on CodePen.

More Tricks


What is the purpose of CSS splash image masks?

CSS splash image masks are used to blend images seamlessly, creating captivating visual effects on websites.

How can I create CSS splash image masks?

You can create CSS splash image masks using the mix-blend-mode: screen property along with appropriate HTML and CSS styling.

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment