CSS Quickies: backdrop-filter

What is CSS Quickes?

I started to ask my beloved community on Instagram: "what CSS properties are confusing for you?"

In "CSS Quickies" I will explain one CSS property in deep. These are community requested properties. If you also confused about a CSS property, then write to me on Instagram or Twitter or down below in the comments. I answer all questions.

I'm also live streaming while coding on twitch.tv. If you want to talk to me directly!

Let's talk about: backdrop-filter

So @kamil.codes from Instagram challenged whether I know this CSS property. I had to say that I didn't know about that property or I forget about it!

Before we go further, I want to mention this first because this for me is the biggest misfortune, Firefox does not support this property! So if you're trying out the examples, you need to open them in Chrome 76+, Edge 17+ or Safari 9+ to see them. To make sure you have a browser that supports this feature, take a look at the caniuse table. So this is far from production ready.

So what does the backdrop-filter do?

It lets you apply effects/filter on everything that is behind the element you are using it on! It will not be applied on text or an element that is inside that element. That's the background in backdrop-filter. To see the effect, the element cannot have any background color applied to it. If you would set the background-color to white, then you would only see the white color but no effect!

What filter's does CSS backdrop-filter has?

blur()

This is your standard blur function. The higher the value, the higher the blur will look.

brightness()

1 or 100% is the default value. If you want to make the picture darker, you need to set it to a value that is below 100%, and if you want to make it brighter you need to set it higher then 100%

contrast()

The values work the same as with the brightness property. The difference between brightness is that brightness if you make the picture brighter will increase every pixel to a lighter color. The contrast, on the other hand, will increase the already light areas and decrease the darker areas.

drop-shadow()

This one is a little bit harder to explain and could be its own post! It basically works like any other drop-shadow. If you really want to know it now, please have a look here drop-shadow() MDN

grayscale()

A grayscale picture is a representation of the amount of light in a picture. In other words, the only allowed colors are black, grey, and white. Where black means that this pixel is completely dark and white that has the strongest light intensity in that picture. The gray colors are the intensity between black and white. Setting the grayscale value to 0 leaves the background unchanged. 1 or 100% means that this picture is completely grayscale. Everything will blend the pictures according to the value.

hue-rotate(deg)

The following explanation is an oversimplification of hue. It is just enough to understand this property. Think about a circle. This circle has a degree from 0 to 360 (Yes, I know it has technically just a degree of 360). Now think that every value from 0 to 360 has a color. Where 0 deg is Red, 120 deg is green, 240 is blue and so on. Imagine your picture now has a red pixel, in other words, its hue value is 0. Now we rotate our circle 120 degrees and our red pixel is now green. This is why it is called hue-rotate.

invert()

This one is doing just what you think it does. It inverts the color. Black will be white, and white will be black. The rest of the colors are a little bit trickier to figure out. For that, you need to understand how the color wheel looks and how it works. Since this is too deep for this CSS quickie. I will send you to this Color Wheel. Pick the first Harmony, and you can play around with the colors, so you get a feeling for what invert does.

opacity()

Opacity is another word for transparency. 1 or 100% is the default value, and it means that the background is not transparent at all. 0 means that the background is not visible. 80%, for example, means that you can see a little bit through the background and so on.

sepia()

We all know sepia, right? It is an effect that even the cheapest image processing software has. It is around 130 years old and actually was a way to make a black and white picture warmer. It also helped to archive the pictures longer since the chemicals used to achieve that effect needed to be applied directly on the photo paper.

saturate()

Ahh, saturation the effect that everyone uses and also the easiest to overdo. Setting this to 1 or 100% will do nothing. The fun begins when we are setting the value to 2 or 200%, this means double the saturation. This means that for example, the color red will now have double the intensity (purity)! So every pixel will double as the instance to the eye as it was before. Setting this value to 0.5 or 50% will remove intensity from the colors, and everything will look more grey and blend. Be very careful with this one

url(file.svg#filter);

This is a more advanced topic, and it's hard to explain in this quicky. If you want to know more about this, let me know! If you need to read about it now, you can read about here: SVG filter.

Some examples

Please check if your browser supports backdrop-filter.

Blur Contrast Saturate

As you can see, we can combine multiple filters to make the effect even more beautiful.

Invert

hue-rotate

sepia grayscale

Resources

• The backdrop-filter CSS property

• MDN backdrop-filter

Thanks for reading!

Say Hallo! Instagram | Twitter | LinkedIn | Medium