Custom Image Masks With Linear Gradients in CSS

Scroll down to test this effect in an interactive exercise!

This tutorial will teach you how to create custom feather image masks using linear gradients in CSS to make a cool fading image effect.

Add a linear gradient to the mask-image property

Start by defining your CSS class and adding a mask-image property. Then, you want to add a linear-gradient to this mask-image and define a few values: the angle of the gradient and the gradient stops.

To create gradient stops, we will use percentage values and black and transparent mask values. Transparent value means where image is completely faded and black value is where image is fully showing. In between those values is the transition – our linear gradient and the feather effect.

Below is the CSS code used for the image placed in the container (or a div) with a CSS class “image”:

.image img{
	width: 400px;
	mask-image: linear-gradient(180deg,black 80%,transparent 100%);
	-webkit-mask-image: linear-gradient(180deg,black 80%,transparent 100%);
}

Note that we are using the mask-image AND -webkit-mask-image property with the same linear-gradient. Basically, we are just copying the whole line with the mask-image code and the whole linear gradient on a new line, just with adding ‘-webkit-mask-image’ instead of ‘mask-image’.

Use BOTH mask-image and -webkit-mask-image with the same linear gradient values to make this effect compatible with all browsers.

How to add a linear gradient on both sides of the image

If we want to add a linear gradient and feather effect on both sides of the image – for example both top and bottom edges (or left and right), we could adjust the CSS code a bit.

.image img{
	width: 400px;
	mask-image: linear-gradient(180deg,transparent 0%,black 30%,black 70%,transparent 100%);
	-webkit-mask-image: linear-gradient(180deg,transparent 0%,black 30%,black 70%,transparent 100%);
}

Notice how we added another transparent gradient stop at the beginning and another black gradient stop to create a feather effect on both sides of the image. You can adjust these percentage values as necessary to control the gradient effect and create a more subtle or hard transition.

Adding a linear gradient on all four sides of the image

Now what if we wanted to add a feather effect on ALL FOUR SIDES of our image? And apply the linear gradient to every edge: top, bottom, left and right to create sort of a vignette effect?

In that case, we would use two linear-gradients within the same mask-image property and intersect them.

Here is how that code would look like:

.image img{
	width: 400px;
	mask-image: 
        linear-gradient(180deg,transparent 0%,black 10%,black 80%,transparent 100%),
        linear-gradient(90deg,transparent 0%,black 30%,black 90%,transparent 100%);
        mask-composite: intersect;
	-webkit-mask-image:
        linear-gradient(180deg,transparent 0%,black 10%,black 80%,transparent 100%),
        linear-gradient(90deg,transparent 0%,black 30%,black 90%,transparent 100%);
        -webkit-mask-composite: destination-in;
}

In order to make this code compatible with all browsers, we are using both mask-image and -webkit-mask-image with the same linear-gradient.

Additionally, we are using -webkit-mask-composite property to create the intersecting effect and merge the two masks together in other browsers.

Remember to use both mask-image and -webkit-mask-image AND mask-composite and -webkit-mask-composite to make this compatible with all browsers. If you change the percentage values in mask-image, make sure to change it in -webkit-mask-image as well!

online course

free 30min consultation

Ready to Learn CSS?

A step-by-step basic online course for beginners and non-coders with 50+ practical exercises to get you started with CSS.

• No HTML
• Interactive
• For non-coders

Enroll now

Try it out yourself!

Try to create this effect yourself using the interactive CSS exercise below!

Just click on the ‘CSS’ field in the CodePen below and type the CSS there to see the result. You can copy and paste the CSS codes from above and just change the percentage values to create different feather effects.

If you are changing the gradient stops (gradient percentage values), make sure to change them in BOTH mask-image and -webkit-mask-image properties! If you change one, you should change the other one too.

See the Pen Linear gradient – feather effect – CSS image masks by Anait (@velvetmade) on CodePen.

This exercise is part of our online course CSS Basics.

To access more than 50 interactive exercises like this and practice CSS, enroll today!