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=
alt="GeeksforGeeks logo">
</body>
</html>
|
Output:
Supported Browsers: The browsers supported by blur() function are listed below:
- Google Chrome 18 and above
- Edge 12 and above
- Internet Explorer not supported
- Firefox 35 and above
- Safari 6 and above
- Opera 15 and above