How to Blur Images in CSS

With the introduction of CSS3 filters, a lot of image effects became available natively inside the browser. One of them being blur - you can achieve interesting hover effects or background blurs for modals:

.im-blurry-anyway {
    filter: blur(4px);
}

The function accepts a radius as a value. It defines the deviation to the gaussian function. The filter CSS property also accepts other functions, such as:

• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()

10 Best Practices for Quickly Improving Your CSSBuilding scalable and manageable stylesheetsCSS has its own nuances that can make or break your design. Here are 10 tips for CSS :  best practices that can help you bring out the best from your styles.Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• The CSS blur() function