Skip to content
Related Articles

Related Articles

CSS | blur() Function

View Discussion
Improve Article
Save Article
  • Last Updated : 19 Aug, 2022
View Discussion
Improve Article
Save Article

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

Syntax:

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: 

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>CSS blur() Function</title>
     
    <style>
        h1 {
            color:green;
        }
        body {
            text-align:center;
        }
        .blur_effect {
            filter: blur(5px);
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
    <h2>CSS blur() function</h2>
     
    <img class="blur_effect" src=
        alt="GeeksforGeeks logo">
</body>
 
</html>

Output:

  

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

  • Google Chrome 18 and above
  • Edge 12 and above
  • Internet Explorer not supported
  • Firefox 35 and above
  • Safari 6 and above
  • Opera 15 and above
My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!