How to create a fade-out effect with css?

You see it on many websites: pieces of text, images or other elements that slowly fade out at the edges. With this 'fade-out' effect, elements get a nice gradient that subtly blends into the background. Below we show you a few examples, so you can immediately see what we mean.

Fade-out effect at the bottom of the dashboard image

Fade-out of reviews

What is a fade-out effect?

Een fade-out effect is een effect waarmee je tekst, afbeeldingen of andere elementen langzaam transparant maakt. Het lijkt alsof de content in de achtergrond wegvloeit. Je hebt verschillende fade-out effecten.

Linear fade-out

De bekendste variant is de lineair fade-out. Daarbij wordt het een element aan de zij-, boven- of onderkant transparant.

Radial fade-out

In this process, an element fades into a kind of circle. This causes the image to dissolve, as it were, into its surroundings, giving it a soft, framed look.

How do you create a fade-out effect on your own website?

There are actually two ways to tackle this.

Giving a fade-out effect to an image

You can give an image a fade-out effect using a programme like Figma or Photoshop. Then export the image and put it on your website. An example is shown below. We developed this website for Relivon. The website has an image on the homepage that gently fades out on the left-hand side.

When you adjust that image, you unfortunately lose the effect. In that case, you have to create a new image with a fade-out in Figma or Photoshop.

Fade-out effect with code

If you want to give text or other elements a fade-out effect, or want to make sure that when someone uploads a new image it automatically gets the effect, you can opt for a more durable solution by adding a piece of CSS code.

Adding fade-out effect with CSS code

CSS code linear fade-out

The piece of code below creates a fade-out effect that makes an element transparent on both sides. We explain how it works in more detail below.

.CSS-selector {
--fade-amount: 5%;
mask-image: linear-gradient(to left, transparent, black var(--fade-amount), black calc(100% - var(--fade-amount)), transparent);
} 

To use the piece of code, you must first give a CSS class to the element that is to receive the fade-out. In the place in the code where it now says '.CSS-selector', you then enter the appropriate class.

The code works as follows: first, you set a 'variable'. That then involves this piece of code:

--fade-amount: 5%;

You use this variable to specify the amount of 'fade' used in the element. In this case, 5% of the element will become transparent on both sides. You can play around with this and see what amount of fade you like.

Next, you use the CSS property 'mask-image' which places a mask on top of the element. This mask ultimately creates the fade effect. You give this mask a linear gradient and use the brackets () to give arguments to the gradient. Inside those brackets you start with 'to left'. This indicates the direction of the gradient. Bear in mind that the first colour you enter will appear on the right-hand side. This can sometimes be confusing. If instead of 'to left' you enter the direction 'to bottom', you will see that the fade effect runs from top to bottom.

Then you include 'colours' as arguments between the brackets. You use 'transparent' and 'black' for this. Of course, transparent is not a colour, but it makes the side transparent. Black is used because in combination with a mask-image property, black stands for full visibility within a mask. In practice, you can also enter 'blue' here, in which case the code will still work.

transparent, black, black, transparent

So, in this order, both sides are transparent and the centre piece is visible.

Next, to make sure you get a fade on both sides that is symmetrical, use the 'fade-amount' variable. To do this, place var(-fade-amount) after the colour 'black'. This determines at what percentage point the colour black starts from the right side. After the second reference of 'black', place calc(100% - var(-fade-amount)). This prints the colour black completely to 100% on the left side of the element, but then subtracts the set fade-amount from the whole. This gives you a fade that is perfectly symmetrical.

black var(--fade-amount), black calc(100% - var(--fade-amount))

The end result then looks as follows:

CSS code radial fade-out

Want to add this same effect now with a 'radial gradient' creating a circular fade out? Then add the code below. In the case of a radial gradient, there is no need to add 4 colours. You add 2 colours where the first colour represents the inside of the circle and the second colour affects the outside.

Change the linear-gradient to 'radial-gradient' and 'to left' to 'circle'.

.CSS-selector {
--fade-amount: 20%;
mask-image: radial-gradient(circle, black var(--fade-amount), transparent);
}