Dramatic background special effects


Shift or invert the hue, saturation, brightness or contrast of everything behind an element, or adjust its grayscale, sepia tone, opacity or drop-shadow.

Property values

One or more of these values. When applying more than one filter to an element, separate them with whitespace.

function units effect
blur() length The background is blurred using the specified pixel or percentage value.
brightness() percentage The background's brightness is reduced the given percentage.
contrast() percentage The background's contrast is reduced the given percentage.
saturate() percentage The background's color saturation is reduced the given percentage.
hue-rotate() angle The background's hue is shifted around the color wheel the given angle.
sepia() percentage The background's color is shifted towards sepia-tone by the given percentage.
invert() percentage The background's color is reversed by the given percentage.
grayscale() percentage The background's color is grayed by the given percentage.
opacity() percentage The background's transparency is increased by the given percentage.
drop-shadow() x, y, radius, color The background under the element's text is blurred using the same rules used by the text-shadow property.


To be effective, the element having the backdrop-filter must be nested within an element that has some type of background.

In this example, the text element stays crisp, while its container is affected.

div #container ^background-image:url(/img/fancy.png) {
p #text {
Sample text
backdrop-filter HTML
/* blurring the background */
#text {
backdrop-filter: blur(4px);

/* reducing the background's opacity */
#text {
backdrop-filter: opacity(15%);

/* applying a drop-shadow effect to the background under the text */
#text {
backdrop-filter: drop-shadow(4px 4px 10px white);
backdrop-filter CSS

style > background > backdrop-filterDramatic background special effects

🔗 🔎