Creating a Soft Blur Effect with CSS Filters

CSS Filters can be added to any element on your Web page to create some very nice effects.  You can even add multiple filters to a given element to create some interesting combined effects.  Let’s start with this image:

bibury

Now, let’s give it an old-timey effect with the following filters applied:

-webkit-filter: sepia(0.7) saturate(3) brightness(0.9) contrast(1.1);

Right, see that -webkit prefix?  This is only going to work on Chrome at this point unfortunately.

bibury

But, what about creating a nice soft blur effect?  If I just apply a slight blur:

-webkit-filter: blur(3px);

bibury

I end up with a blurry image, not the soft blur effect I’m looking for.  In Photoshop I would create a new layer on top of the regular image with a slight blur, and make it slightly transparent.  Let’s go ahead and do that.

Create 2 overlapping divs, both of class ‘layer’ and give the second div the extra class ‘soft-blur-overlay’ so we can identify it.

<div class="layer-container">
    <div class="layer"></div>
    <div class="layer soft-blur-overlay"></div>
</div>

Now, let’s define the CSS.  We want the images to overlap and we want them to have the same background image.

<style>
.layer-container { position: relative }

.layer { 
    background-image: url(http://blattchat.com/wp-content/uploads/2013/05/bibury.jpg);
    background-repeat: no-repeat;
    position: absolute;
    top: 0; left: 0;
    width: 768px;
    height: 1024px;
}

.soft-blur-overlay {
    -webkit-filter: blur(3px) opacity(70%);
}

.soft-blur-overlay:hover {
    -webkit-filter: none;
}
</style>

As you can see, both overlapping layers get the same background image, but the ‘soft-blur-overlay’ layer is slightly blurry.  However, since it is also slightly transparent, the sharp edges of the bottom layer shine through, giving the image a crisp, yet slighty fuzzy look, a soft blur.

Note that  I added an extra css effect so that the -webkit-filter is disabled when you move your mouse over the image.  This is so you can easily compare the image with and without the soft blur.

And here you go:

If you don’t see the soft blur effect, make sure you move your mouse out of the image.

You can play around with different opacity and blur values to achieve the exact effect you’re looking for.

Tagged , , . Bookmark the permalink.

5 Responses to Creating a Soft Blur Effect with CSS Filters

  1. Jerry Witt says:

    Looks cool in Chrome. Firefox is showing me 4 duplicate images.

  2. MrAnderson says:

    I cannot believe that EI 10 does not support these features… pick up the pace MS!

  3. Pingback: Photoshop Layer Mask Implemented with CSS Custom Filters - Alan Greenblatt

  4. Pingback: Advanced Gradient Map Usage - Alan Greenblatt

Leave a Reply

Your email address will not be published. Required fields are marked *