Filter and backdrop filter in the past and present life of ground glass


The past and present life of ground glass


Hello, I’m aben. This is the “coding reception hall”. I’ll introduce the front-end art with my own understanding, and introduce more front-end views with interesting language and vivid examples. I also welcome new and old friends to put forward your opinions on the front. This series of articles will launch 100 cases for sharing and update from time to time, Update at least once a month. You are welcome to subscribe, collect and comment. You are also welcome to share this program with more people. Landscape meets. Let’s join today’s “coding reception hall”.

In this episode, we will talk about the filter attribute under the ground glass effect and the use of the new feature of CSS3, backdrop filter. We will encounter the use of frosted glass special effects on many occasions, such as the task bar in the lower left corner of windows, the daily music recommendation of Netease cloud music, iPhone design, etc. this special effect has formed a new design style, which is called glassmorphism in the industry. Some people call it a new wind direction under the new imitation style. Then where will it go with the development of time? Please look forward to it! Hahaha, but today we want to talk about its past and present life~

First case presentation:

Filter and backdrop filter in the past and present life of ground glass

1. Traditional filter

Filter and backdrop filter in the past and present life of ground glass

2. CSS3 new attribute – backdrop filter

! [uploading…] ()


Pronunciation – English[ ˈ f ɪ lt ə (r) ], CSS properties apply graphical effects such as blur or color offset to elements. Filters are usually used to adjust the rendering of images, backgrounds and borders. Filter is very similar to the beauty camera in our mobile phone. It can not only perform special effects on pictures by setting attribute values, but also can be applied to video processing. Its attribute values and application methods are shown as follows:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()

None no display

Blur Gaussian blur value is CSS length. Percentage value is not accepted. The default value is0, this attribute can be used with ground glass

The brightness value is[0,+x%], the value cannot be negative. When the value is0When, it will be all black, and the value will increase with it, and the exposure will be more obvious

Contrast value is0%The image will be completely black. Value is100%, the image remains unchanged. The value can exceed100%, which means a lower contrast will be used. If no value is set, the default value is1

Drop shadow value this attribute is similar to box shadow. Filter: Drop Shadow (offset-x, offset-y, blur radius, color), where the shadow offset value must be set (the larger the value, the more the offset, the double positive shadow will appear in the upper right); Blue radius is an optional value. The larger the value, the more fuzzy it will be. Negative numbers are not allowed; Color is an optional value. You can determine the shadow color through the color setting. Otherwise, it is the default color value of the browser. Example: filter: Drop Shadow (16px 16px 10px black)

Grayscale gray value is between 0 and 100%. 0 is the primary color of the original image (this property is set for many web page colors during mourning Festival, such as Qingming Festival or other specific festivals). Example: filter: grayscale (100%)

Hue rotate() hue flip value defaults to 0DEG. Although there is no default value for this value, we all flip the value once (360DEG) and return to the origin. For example: filter: hue rotate (90DEG)

Invert() inverts the input image from green to red, black to white, with a percentage from 0 to 100%. When it exceeds 100%, the effect remains unchanged, for example: filter: invert (50%);

Opacity() transparency: this attribute is consistent with the opacity attribute. The percentage ranges from 0 to 100%. When it exceeds 100%, the effect remains unchanged, for example: filter: opacity (50%);

Saturate() saturation percentage ranges from 0 to 100%. When it exceeds 100%, the effect remains unchanged. Filter: saturate (50%);

Sepia () dark brown treatment percentage ranges from 0 to 100%. When it exceeds 100%, the effect remains unchanged, filter: sepia (0%);

URL () SVG filter handles filter: URL (SVG url#element ID), introduces an SVG address and specifies a class as the definition

Other words

Having said so much, in fact, I think these design attributes are very similar to the days when I went back to junior high school and primary school when I took Nokia or Samsung. At that time, I can only use some simple filters for the p-chart. When I first deal with this attribute, it is like my keyboard returning to the mobile phone keyboard 8 years ago, and it is really a hell filter with current aesthetics, When I think this is a chicken rib attribute, the result surprised me. After investigating the introduction of SVG filter, this attribute will greatly improve the systematic beautification style, and its compatibility is temporarily unmatched by its successor backdrop filter

Many times we can’t judge whether a skill is useful or not. Don’t be afraid. It will be useful to expand it. Talent will be wasted if we think blindly but don’t act.


CSS attributes allow you to add graphic effects (such as blur or color offset) to the area behind an element, and their attribute values are consistent with filter. Because it applies to elementsbehindIn order to see the effect, the element or its background must be at least partially transparent.


The difference is that the backdrop filter is a hierarchical setting, which will set the graphic effect in the area behind the target element instead of the current page of the graphic, that is, it will affect the bottom layer without affecting the picture itself; The filter will not only affect the current element, but also let the descendant elements inherit. As an empty background element, it has no effect. On the other hand, the performance occupancy and compatibility of bcakdrop filter are far worse than that of filter, which is the reason why more filters are used.

For case interpretation, please download the source code and see the notes

In short, the traditional filter is called by adding pseudo elements and underlying value settings, while the backdrop filter is called by setting transparency and itself

Write at the end:

Thank MDN website and other major platforms for sharing knowledge. I just add some humble opinions to share with you after summarizing my knowledge. We will continue to introduce Linux and git, JS, Vue and other frameworks. Welcome to pay attention. Then we’ll meet again next time~~~

Recommended Today

On the mutation mechanism of Clickhouse (with source code analysis)

Recently studied a bit of CH code.I found an interesting word, mutation.The word Google has the meaning of mutation, but more relevant articles translate this as “revision”. The previous article analyzed background_ pool_ Size parameter.This parameter is related to the background asynchronous worker pool merge.The asynchronous merge and mutation work in Clickhouse kernel is completed […]