Magical Use of CSS to Build Fancy Perspective Background Effects

This article will introduce a clever use background with backdrop- filter to create an interesting perspective background effect.

This skill comes from a question from a group friend, how to build a background effect of the top bar such as an ElementUI document, and see the effect:

Looking closely, during the scrolling process of the page, the background of the top bar is not white, nor is it a frosted glass effect, but the background can be grained:

To be precise, it is a kind of frosted glass effect based on granulation. The elements are firstly granulated, and secondly, the edges of the elements are also blurred to a certain extent. So, how do we achieve this effect?

Demand disassembly

The above effect seems magical, but the principle is actually very simple. The main thing is to add the granular background background backdrop-filter: blur() .

First, we need to implement the particle background.

We use background to achieve such a background:

 <div></div>

 div {
    background: radial-gradient(transparent, #000 20px);
    background-size: 40px 40px;
}

The radial gradient from transparent to black looks like this:

It should be noted that the white part in the picture is actually transparent, which can reveal the background behind it. At this point, if there are elements behind the background, the effect will look like this:

OK, we will replace the black in background: radial-gradient(transparent, #000 20px) with white , the effect is as follows:

Here to demonstrate the principle, the circle of each radial gradient is set relatively large, and we adjust it back to the normal size:

 div {
    background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px);
    background-size: 4px 4px;
}

In this way, we successfully grain the background:

Of course, the background exposed at this time looks very blunt and unsightly, so we also need backdrop-filter: blur() , let's add a try:

 div {
    background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px);
    background-size: 4px 4px;
    backdrop-filter: blur(10px);
}

In this way, we achieve the effect shown at the beginning:

It should be noted here that the size control of background-size a02f32768ef11fe69437fd2bced07cf4--- and different backdrop-filter: blur(10px) values will affect the effect.

For the complete demo, you can click here: CodePen Demo -- Mask Filter

Of course, after mastering this technique, we can try to replace background: radial-gradient() graphics, and change background-size , and try various perspective backgrounds of different shapes. Just a few examples:

 div {
    background: linear-gradient(45deg, transparent, #fff 4px);
    background-size: 6px 6px;
    backdrop-filter: saturate(50%) blur(4px);
}

Here linear-gradient() is used instead of radila-gradient() :

at last

A very small skill, used in the right place, can improve the texture of the page, have you learned it?

This concludes this article, I hope it helps you :)

More wonderful CSS technical articles are summarized in my Github -- iCSS , which will be updated continuously. Welcome to click star to subscribe to the collection.

If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.