The CSS blur() filter function applies a Gaussian blur to rendered content. Its single length parameter controls how strongly neighboring pixels blend: 0px leaves content unchanged, while larger values produce a stronger blur. section 14.1
Use blur() with these practical distinctions:
- Apply filter: blur(...) to the whole element, including its text, borders, background, and child content; this can make text unreadable. section 14.1
- Use px, em, rem, or another length unit, then adjust the value in DevTools to compare weaker and stronger results. section 14.1
- Combine blur() with other filter functions by separating them with spaces; effects apply from left to right. section 14.1.1
- Choose backdrop-filter: blur(...) when text should remain sharp while only the background showing through a semitransparent element becomes blurred. section 14.1.2
Blur an image
img { filter: blur(5px); } A low value keeps the image partly comprehensible; a high value reduces it to a vague smudge of color. section 14.1
Keep gallery focus clear
.gallery:hover img { filter: blur(2px) grayscale(50%); } .gallery img:hover { filter: none; } .gallery img { transition: filter 1s; } This softens nonfocused images and transitions the effect gradually instead of changing it abruptly. section 14.1.1
Listing 14.5 Backdrop blur filter
.box {
padding: 30px;
background-image: url(images/bird.jpg);
background-size: cover;
background-position: center 30%;
}
.box__content {
max-inline-size: 500px;
margin-inline: auto;
padding: 50px 30px 70px;
border-radius: 10px;
background-color: oklch(100% none none / 0.3); #1
-webkit-backdrop-filter: blur(10px); #2
backdrop-filter: blur(10px); #3
}
Use the backdrop-blur listing as a reusable pattern for placing legible text over a blurred background image. section 14.1.2
