CSS blur() Function

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= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo"> 
</body> 
  
</html> 