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: 
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:
.png)
OutputSupported 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.
Similar Reads
CSS attr() Function The attr() function is an inbuilt function in CSS that returns the value of an attribute of the selected elements.Syntax: attr( attr_name )Parameter: This function accepts a single parameter attr_name which is used to hold the name of the attribute in an HTML element. It is a mandatory parameter.Ret
2 min read
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 blurr
3 min read
CSS brightness() Function The brightness() function is an inbuilt function which is used to apply a filter to set the brightness of the image. This function uses the linear multiplier to the image to increase or decrease brightness. Syntax: brightness( amount ) Parameters: This function accepts single parameter amount which
1 min read
CSS calc() Function The calc() function is an inbuilt CSS function used to perform calculations to determine CSS property values dynamically. This function allows combining different units, such as percentages and pixels, using basic arithmetic operations like addition, subtraction, multiplication, and division. This a
4 min read
CSS circle() function The circle() function is an inbuilt function in CSS that is used to create floating text around the circular shape picture or anything else. Syntax: circle(100px at 10px 150px); or circle( percentage ); Parameters: This function accepts a single parameter length or percentage which is used to hold t
3 min read
CSS conic-gradient() Function The conic-gradient() function is an inbuilt function in CSS that is used to set a conic gradient as the background image. The conic gradient angle starts from 0 degrees - 360 degrees. Conic are circular and use the center of the element as the source point for color stop. Conic Gradients include pie
3 min read
CSS contrast() Function The contrast() function is an inbuilt function which is used to apply a filter to set the contrast of the image. This function adjusts the contrast of the image. Syntax: contrast( amount ) Parameters: This function accepts single parameter amount which holds the amount of contrast. The value of cont
1 min read
CSS cubic-bezier() Function The cubic-bezier() function is an inbuilt function in CSS that is used to define a Cubic Bezier curve. A Bezier curve is a mathematically defined curve used in two-dimensional graphic applications like adobe illustrator, Inkscape, etc. The curve is defined by four points: the initial position and th
1 min read
CSS drop-shadow() Function The CSS drop-shadow() function adds a shadow effect to elements, like images, using horizontal and vertical offsets, blur radius, spread radius, and color parameters. It enhances visual depth and prominence in web design.Syntax:filter: drop-shadow(offset-x offset-y blur-radius spread-radius color);P
2 min read
CSS ellipse() Function The ellipse() function is an inbuilt function in CSS used to create floating text around the ellipse shape picture or anything else. Syntax:circle(100px 10 px at 10px 150px);orellipse( percentage percentage );Parameter: This function accepts a single parameter length or percentage which is used to h
3 min read