CSS Function - blur()

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
blur()	18	12	35	6	15

Print Page