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.

Syntax:

blur( radius )

Parameters: This function accepts a single parameter radius which holds the blur radius in the form of length. This parameter defines the value of the standard deviation to the Gaussian function.

The below example illustrates the blur() function in CSS:

Example: In this example using the CSS blur() function: ApApplylies a 5px blur effect to an image of the w3wiki logo, with centered text styling for ‘h1’ and ‘body’ elements 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>w3wiki</h1>

    <h2>CSS blur() function</h2>

    <img class="blur_effect" 
         src=
"https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="w3wiki logo">
</body>

</html>

Output:

Example: In this example demonstrating CSS blur() function: Uses flexbox for layout. Images apply different blur levels (blur(0), blur(3px), blur(1.5rem)), each displayed with specific margins and sizes.

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.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png"
            alt="Image with no blur" 
            class="blur-none">
        <img src=
"https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png"
            alt="Image with 3px blur" 
            class="blur-medium">
        <img src=
"https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png"
            alt="Image with 1.5rem blur" 
            class="blur-large">
    </div>

</body>

</html>

Output:

Supported Browsers: The browsers supported by blur() function are listed below:

Contact Us