Open In App

CSS blur() Function

Last Updated : 12 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

The CSS blur() function applies a Gaussian blur effect to an element, making it appear out of focus. It is used with the filter property and accepts a length value defining the blur radius.

CSS blur() function is part of the CSS filter property, which allows you to apply graphical effects like blurring, sharpening, or color shifting to elements.

Syntax

filter: blur(radius);

Parameters

"radius" specifies the blur radius. The higher the value, the more blurred the element becomes. It can be specified in various units like pixels ('px'), rems ('rem'), or percentages ('%').

CSS blur() Function Examples

The below examples illustrate the blur() function in CSS:

Example 1: In this example, the CSS blur() function adds a 5px blur to the GeeksforGeeks logo. The text in 'h1' and 'body' is centered and styled in green.

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>

Output: Output

Example 2: This example demonstrates the CSS blur() function, utilizing Flexbox for layout. It showcases images with varying levels of blur—blur(0), blur(3px), and blur(1.5rem)—each image is displayed with specific margins and sizes, effectively illustrating how different blur values impact visual clarity.

HTML 
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blur Function Example</title> <style>  .myDiv {  display: flex;  }  .blur-none {  filter: blur(0);  }  .blur-medium {  filter: blur(3px);  }  .blur-large {  filter: blur(1.5rem);  }  img {  display: block;  margin-bottom: 20px;  margin: 5px;  width: 80px;  height: 80px;  }  </style> </head> <body> <h1>CSS blur() Function Example</h1> <div class="myDiv"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="Image with no blur" class="blur-none"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="Image with 3px blur" class="blur-medium"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="Image with 1.5rem blur" class="blur-large"> </div> </body> </html>

Output:

Output
Output

Supported Browsers

The CSS blur() function is widely supported across most modern browsers. Here's a quick rundown of its compatibility:

  • Google Chrome: Supported from version 18 and above.
  • Firefox: Supported from version 35 and above.
  • Safari: Supported from version 6 and above.
  • Edge: Supported from version 12 and above.
  • Opera: Supported from version 15 and above.
  • Internet Explorer: Not supported.

The blur() function is part of the CSS filter property, and it's generally well-supported in all modern browsers on both desktop and mobile platforms. However, always check for the most current support status, especially if targeting older versions of browsers.


J

jit_t
Improve
Article Tags :

Explore

Lightbox