Skip to content
Related Articles

Related Articles

CSS | blur() Function

Improve Article
Save Article
Like Article
  • Last Updated : 07 Aug, 2019

The blur() function is an inbuilt function which is used to apply a blurred effect filter on the image.


blur( radius )

Parameters: This function accepts single parameter radius which holds the blur radius in form of length. This parameter defines the value of the standard deviation to the Gaussian function.

Below example illustrates the blur() function in CSS:


<!DOCTYPE html> 
    <title>CSS blur() Function</title
        h1 {
        body {
        .blur_effect {
            filter: blur(5px);
    <h2>CSS blur() function</h2>
    <img class="blur_effect" src
        alt="GeeksforGeeks logo"


Supported Browsers: The browsers supported by blur() function are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera
My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!