Skip to content
Related Articles

Related Articles

CSS | blur() Function
  • Last Updated : 07 Aug, 2019

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:




<!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
  • Internet Explorer
  • Firefox
  • Safari
  • Opera
My Personal Notes arrow_drop_up
Recommended Articles
Page :