CSS blur() Function

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.

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.

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.