I once while practicing just decided to make a photo editor app using react you can check the code here, while on the research I ended up discovering about CSS filters. It's a way of applying filters (obviously) to an html element.
On this tutorial I will show you how to create a filter on a background element. Something like the cover image.
The complete demo can be downloaded on codepen
First we'll create an html file called index.html with basic styling.
<body>
<div class="content">
<h1>Backdrop test</h1>
<p>Just a demo on the CSS backdrop-filter</p>
</div>
<style>
body {
margin: 0px;
background-image:
url('https://source.unsplash.com/600x800');
display: flex;
height: 100vh;
width: 100vw;
}
.content {
margin: auto;
align-self: center;
width: 50%;
background-color: #fff;
padding: 2rem;
}
</style>
</body>
The body here is our background element with a background image linked inside the style tags and other styles for basic design.
You probably already know about the Css filter tag but if we use that, the whole body element and the content area will be applied the filters too.
To only apply filters on the background, we use backdrop-filter which uses the values of the normal filter tag. So let's do that, inside the body styles, we'll add a backdrop-filter style as seen below:
body{
backdrop-filter: blur(90px);/*added here after other styles*/
}
Something to look out for:
There are browsers like opera mini as seen here which doesn't support CSS filters, how do you solve that you may ask.
To avoid such surprises, it's better to check for support before applying. We can do that using the CSS @supports as seen below.
background-color: #fff;
@supports (backdrop-filter: blur()) {
background-color: transparent; /*Has to be transparent*/
backdrop-filter: blur(100px) contrast(90%);
}
Note: Here I have used a background image so adding a background color isn't necessary here but there are situations where you have no background image then you better apply a background color and inside the @supports check you apply a transparent background color.
Check MDN for the documentation.
I hope you find this useful, have a nice day 🙂
Top comments (0)