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);
}
blur.css
Copied to clipboard!

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:

How to blur images in CSS
If you would like to see more Webtips, follow @flowforfrank

10 Best Practices for Quickly Improving Your CSS

Resources:

Remove ads
Remove ads

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
🎉 Thank you for subscribing to our newsletter. x This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.