CSS Function - blur()

Previous
Quiz

CSS blur() function applies a Gaussian blur to the elements on which it is applied. The blur effect depends on the radius value specified in the function. If the specified radius value is high, then it will create a higher blur effect.

Syntax

The syntax for CSS blur() function is as follows:

 filter: blur(radius);

Parameter

CSS blur() function accepts a single optional parameter (radius) that specifies the blur radius to be applied. If the radius is not specified, 0 is used as default.

Examples of CSS blur() Function

The following examples illustrate how to apply the CSS blur() function in various scenarios.

Applying blur() Effect to an Image

In this example, we have used the CSS blur() function to blur an image.

Example

 <!DOCTYPE html> <html lang="en"> <head> <title>CSS blur() Function</title> <style> img { filter: blur(2px); } </style> </head> <body> <h2>CSS blur() Function</h2> <img src="/html/images/test.png" alt="logo"> </body> </html>

Applying blur() Effect to a Text

In this example, we have used the CSS blur() function to blur the written text.

Example

 <!DOCTYPE html> <html lang="en"> <head> <title>CSS blur() Function</title> <style> .myClass { filter: blur(2px); } </style> </head> <body> <h2>CSS blur() Function</h2> <div class="myClass"> This CSS tutorial covers everything from basic styling concepts and selectors to advanced techniques, such as flexbox, grid, animations, and CSS variables. This CSS tutorial is designed to help both beginners and experienced designers to make them masters in creating visually appealing, responsive, and modern web designs. CSS is the acronym for "Cascading Style Sheet". It's a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS helps the web developers to control the layout and other visual aspects of the web pages. CSS plays a crucial role in modern web development by providing the tools necessary to create visually appealing, accessible, and responsive websites. </div> </body> </html>

Applying blur() Effect on Background

In this example, we have used the CSS blur() function to apply a blur effect only to the background.

Example

 <!DOCTYPE html> <html lang="en"> <head> <title>CSS blur() Function</title> <style> .background { background: url('/html/images/test.png'); filter: blur(4px); position: fixed; width: 100%; height: 100%; z-index: -1; } .container { position: relative; z-index: 1; border: 2px solid #04af2f; width: 200px; padding: 20px; margin: auto; color: red; } </style> </head> <body> <div class="background"></div> <h2>CSS blur() Function</h2> <div class="container"> <p><strong>Just a random para element.</strong></p> </div> </body> </html>

Applying blur() Effect on Hover

In this example, we have used CSS blur() function on a div box. The text gets blurred upon hovering over the div box.

Example

 <!DOCTYPE html> <html lang="en"> <head> <title>CSS blur() Function</title> <style> .container { border: 2px solid #04af2f; width: 200px; padding: 20px; margin: auto; color: red; } .container:hover { filter: blur(4px); } </style> </head> <body> <h2>CSS blur() Function</h2> <div class="container"> <p> <strong>Hover over this box to blur this text.</strong> </p> </div> </body> </html>

Supported Browsers

Function Chrome Edge Firefox Safari Opera
blur() 18 12 35 6 15
Print Page
Previous
Next
Advertisements