Blur Image CSS

Blur image CSS, we can use it as CSS blur background image. The blur effect mostly used to hide the important information from the normal or background image. The snippet is an answer to “How to create a blurred background image” question.

HTML

<div class="middle-div">

    <img src="/images/user-img-1.jpg" alt="Blur Image CSS">
    <h4>Normal Image</h4>


    <img src="/images/user-img-1.jpg" class="blur-img" alt="Blur Image CSS">
    <h4>Blur Image</h4>

</div>

CSS

.middle-div {
    max-width: 300px;
    height: 300px;
    text-align: center;
    font-family: arial;
    margin: 50px auto;
}

/* Blur Image CSS  */
.blur-img {
    max-width: 100%;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}