πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Blur Images in CSS

How to Blur Images in CSS

Ferenc Almasi β€’ 2020 November 04 β€’ Read time 1 min read
  • twitter
  • facebook
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:

Copied to clipboard!
.im-blurry-anyway {
    filter: blur(4px);
}
blur.css

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:

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

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.