Workaround to backdrop-filter in CSS
The CSS backdrop-filter property is used to apply effects to the area behind an element. This is unlike the filter property where it applies the effect to the whole element. It can be used to eliminate the use of an extra element to style the background separately.
Syntax:
.element { backdrop-filter: filter-function | none }
Approach:
Creating overlays on top of images (and videos) often entails using some sort of drop shadow effect. For example, using white icons requires a shadow to be visible against near-white backgrounds. With backdrop-filter, you can create overlays that adapt to the background color instead of using a shadow.
There can be many filter functions:
- blur() – It is used to apply a Gaussian blur to the image.
Example:<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.container {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/w3wiki-25.png");
background-size: cover;
align-items: center;
justify-content: center;
height: 100px;
width: 250px;
}
.foreground {
backdrop-filter: blur(2px);
padding: 2px;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
w3wiki
</
h1
>
<
b
>CSS | backdrop-filter</
b
>
<
div
class
=
"container"
>
<
div
class
=
"foreground"
>
This text is not affected
by backdrop-filter.
</
div
>
</
div
>
</
body
>
</
html
>
OUTPUT:
- brightness(): It is used to make the image lighter or darker (0% – darker and 100% – brighter ).
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.container {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/w3wiki-25.png");
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
width: 360px;
}
.foreground {
backdrop-filter: brightness(25%);
padding: 2px;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
w3wiki
</
h1
>
<
b
>CSS | backdrop-filter</
b
>
<
div
class
=
"container"
>
<
div
class
=
"foreground"
>
This text is not affected
by backdrop-filter.
</
div
>
</
div
>
</
body
>
</
html
>
OUTPUT:
- contrast() – It is used to set the contrast of the image (100% – original and 0% darker)
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.container {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/w3wiki-25.png");
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
width: 360px;
}
.foreground {
backdrop-filter: contrast(20%);
padding: 2px;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
w3wiki
</
h1
>
<
b
>CSS | backdrop-filter</
b
>
<
div
class
=
"container"
>
<
div
class
=
"foreground"
>
This text is not affected by
backdrop-filter.
</
div
>
</
div
>
</
body
>
</
html
>
OUTPUT:
- drop-shadow() – It is used to apply a drop shadow effect to the element.
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.container {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/w3wiki-25.png");
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
width: 360px;
}
.foreground {
backdrop-filter: drop-shadow(20px 10px red);
padding: 2px;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
w3wiki
</
h1
>
<
b
>CSS | backdrop-filter</
b
>
<
div
class
=
"container"
>
<
div
class
=
"foreground"
>
This text is not affected by
backdrop-filter.
</
div
>
</
div
>
</
body
>
</
html
>
OUTPUT:
- grayscale() – It is used to convert the colors of the image into black and white. A value of 0% indicates the original image and 100% will indicate a completely black and white image.
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.container {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/w3wiki-25.png");
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
width: 360px;
}
.foreground {
backdrop-filter: grayscale(75%);
padding: 2px;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
w3wiki
</
h1
>
<
b
>CSS | backdrop-filter</
b
>
<
div
class
=
"container"
>
<
div
class
=
"foreground"
>
This text is not affected by
backdrop-filter.
</
div
>
</
div
>
</
body
>
</
html
>
OUTPUT:
- hue-rotate() – It is used to apply a hue rotation to the image.
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.container {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/w3wiki-25.png");
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
width: 360px;
}
.foreground {
backdrop-filter: hue-rotate(180deg);
padding: 2px;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
w3wiki
</
h1
>
<
b
>CSS | backdrop-filter</
b
>
<
div
class
=
"container"
>
<
div
class
=
"foreground"
>
This text is not affected by
backdrop-filter.
</
div
>
</
div
>
</
body
>
</
html
>
OUTPUT:
- invert() – It is used to invert the image. The default value is 0% which represents the original image.
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.container {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/w3wiki-25.png");
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
width: 360px;
}
.foreground {
backdrop-filter: invert(100%);
padding: 2px;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
w3wiki
</
h1
>
<
b
>CSS | backdrop-filter</
b
>
<
div
class
=
"container"
>
<
div
class
=
"foreground"
>
This text is not affected by
backdrop-filter.
</
div
>
</
div
>
</
body
>
</
html
>
OUTPUT:
- opacity() – It is used to set the opacity of the image. The default value is 0% which indicates that the image is completely transparent.
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.container {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/w3wiki-25.png");
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
width: 360px;
}
.foreground {
backdrop-filter: opacity(50%);
padding: 2px;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
w3wiki
</
h1
>
<
b
>CSS | backdrop-filter</
b
>
<
div
class
=
"container"
>
<
div
class
=
"foreground"
>
This text is not affected by
backdrop-filter.
</
div
>
</
div
>
</
body
>
</
html
>
OUTPUT:
- saturate() – It is used to set the saturation of the element. The default value is 100% which indicates the original image.
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.container {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/w3wiki-25.png");
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
width: 360px;
}
.foreground {
backdrop-filter: saturate(50%);
padding: 2px;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
w3wiki
</
h1
>
<
b
>CSS | backdrop-filter</
b
>
<
div
class
=
"container"
>
<
div
class
=
"foreground"
>
This text is not affected by
backdrop-filter.
</
div
>
</
div
>
</
body
>
</
html
>
OUTPUT:
- sepia() – It is used to convert the image to sepia giving it a warmer appearance. A 0% value represents the original image and 100% represents a completely sepia image.
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.container {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/w3wiki-25.png");
background-size: cover;
display: flex;
justify-content: center;
height: 100px;
width: 360px;
}
.foreground {
backdrop-filter: sepia(100%);
padding: 2px;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
w3wiki
</
h1
>
<
b
>CSS | backdrop-filter</
b
>
<
div
class
=
"container"
>
<
div
class
=
"foreground"
>
This text is not affected by
backdrop-filter.
</
div
>
</
div
>
</
body
>
</
html
>
OUTPUT: