What Can CSS Filters Do for You?

CSS filters have been around for a while. They originated thanks to SVGs – Scalable Vector Graphics – in order to apply different image effects to vectors. Today, CSS filters are not limited to SVGs but can be used for images, text and everything else you can find on a web page.

How Do Filters Work?

Filters aren’t that hard to comprehend. Let’s start with a web page. When it starts to loads, it renders content and styling is applied, naturally. Filters are applied after everything else but still before the page is fully loaded. The filters actually take a snapshot of the content so that they can perform their duties and redisplay the altered content on top of the original. It works in the same way as camera filters; first you have the lens which sees the world. But before you can capture a picture, you add filters making what you capture an altered version of what it actually there.

Does This Affect Load Time?

Yes, CSS filters can impact load times but it is not based on how much filtering is going on. If you add a small filter, such as on your logo, you will most likely not see an impact. However, if you add a filter that changes the whole web page – yes, you can do that – or a bunch of filters all over on a page, your website will slow down. It’s up to you to see how many filters are needed and to see how that will effect load times.

Using CSS Filters

The syntax for filters is simple. Add the filter property in CSS with a value (gray scale, for example). The thing about the filter values is that most of them take a parameter in order to determine how much of the filter to apply. This will make more sense with some code:

img { -webkit-filter: grayscale(100%); }
img { -webkit-filter: grayscale(50%); }
img { -webkit-filter: grayscale(10%); }

Best Designed WordPress and Bootstrap Themes

Designmodo Shop

The above filter property has a value of grayscale. Think of the percentage as “how gray you want the image to be.”  If you want to change the image to be completely black and white, the parameter needs to be 100 percent; if you only want the effect to be half as strong, use 50 percent and so on.

The More the Merrier

You can also apply multiple filters at once. They will be applied in cascading order. From the example below, first the image will be turned 100 percent black and white, and then the opacity will change to 50 percent. The order is more important if you are using more complex filters like saturation or hue rotation and if you are adding more than two at once. Notice no commas are needed.

img { -webkit-filter: grayscale(100%) opacity(50%); }

Grayscale

For formality sake’s let’s go over how it would look. There were plenty of other hacks available before CSS filters, but look how easy it is to transform an image.

img { -webkit-filter: grayscale(100%); }

Sepia

This old-fashioned photo effect is easy to do in your browser. Just like with grayscale, between 0 percent and 100 percent, you need to specify how much of the effect you want applied.

img { -webkit-filter: sepia(100%); }

Saturation

When applied, saturation makes colors more vivid. The cool thing about the saturate filter is that it doesn’t stop at 100 percent, you can specify a value like 1,000 percent to really exaggerate colors for some quite interesting visual effects.

img { -webkit-filter: saturate(1000%); }

Blur

Think of the blur filter the way Gaussian blur works in Adobe Photoshop; you set a pixel value to define how much you want to blur an element. The higher the pixel value, the more intense the blur will be.

img { -webkit-filter: blur(5px); }

Hue-rotate

This filter is a little different than previous ones because it uses degrees to transform colors of an element. A color wheel, like all circles, starts at 0 and goes around to 360 degrees. With the hue-rotate filter, you just need to pick a spot on the color wheel to determine how much rotation you’d like.

img { -webkit-filter: hue-rotate(45deg); }
img { -webkit-filter: hue-rotate(90deg); }
img { -webkit-filter: hue-rotate(180deg); }

Invert

Invert is an interesting filter, it may be kind of weird at first but everybody plays with it at some point. Basically, it inverts the colors of your element, so black will be white, red will be green and so on. It does relate to the hue-rotate filter a bit but they are in fact different. It is percentage-based where zero is unchanged and 100 percent is totally inverted.

img { -webkit-filter: invert(100%); }

Contrast

When there is no contrast in an image, the image is all one color (often a dark gray). The contrast filter is unchanged at 100 percent, so that’s the default state of your element. If you want to have no contrast, set the filter at 0 percent. If you are looking for a lot of contrast, or want everything to be very clearly black and white, you would set the contest to be something like 2,500 percent. Of course, the big percentage is totally exaggerating everything.

img { -webkit-filter: contrast(25%); }
img { -webkit-filter: contrast(2500%); }

Brightness

This filter too is obvious, like the name suggests it determines how bright an image will be. The difference here is that the element will be unchanged at 100 percent, just like the contrast filter. You can dim the element by decreasing the percentage, or brighten it by increasing the percentage.

img { -webkit-filter: brightness(50%); }
img { -webkit-filter: brightness(150%); }

Drop Shadow

I’m sure you’re asking yourself why would I use this if there are box shadow and text shadow properties. Well, those work great on boxes and text but what about irregular shapes like a PNG of a giraffe or even a pentagon shape? This is where the filter comes in. The filter works by taking the image, making a duplicate, recoloring it completely and offsets it based on what you tell the offset and color to be. As you can see in the snippet below, there is no need for commas. The first value is the x distance, the second value is y distance, the third value is the blur amount, and the last value is the colour.

img { -webkit-filter: drop-shadow(5px 5px 5px red); }

CSS Filters Recap

The examples in this post are not the only CSS filters available, but are a nice introduction to what you can achieve using them. What do you think? They are pretty incredible if you ask me. They allow for awesome manipulation in the browser with no need for additional software to help edit images or elements.

Paula Borowska

Paula runs a user experience blog BeingLimited and an author of an upcoming book about mobile design, the Mobile Design Book. You can connect with her on Google+.

Newsletter

19 Comments
  1. Daniil Apr 9, 1:30 pm

    The only good-looking filter for me is Grayscale. I think the other ones are just ugly, photo-destructive and useless. And the only nice thing you can do with grayscale – it’s a hover transition. I think the best way to manipulate images – use software. At least for better flexibility and operability because CSS Filters are not much supported even in new browsers.

    Correct me if i’m wrong.

    Reply
    +2
    • Zetura Apr 9, 9:46 pm

      Agreed, the filters only works on webkit, so they’re just for an additional effect for this users.
      But I think the blur effect is nice too. With a blur of 1 to 3px, you can do nice hover effects, like a portfolio blured and the items are releaved on hover (or a clean and blured on hover with some text appearing).

      Reply
      +3
      • Daniil Apr 10, 2:30 am

        Just tried some filters on my photos here http://codepen.io/bulb/pen/ojbsJ/
        Still can’t say that hover blur looks good. Maybe somewhere where is no photo edges it will works better… Not strong sepia and grayscale are the only “photogenic” ones.

        Reply
        +2
        • Zetura Apr 10, 12:32 pm

          Yes, it would be nice to not blur the edges. Well, any case, it only works on webkit so… ^^

          Reply
          +2
      • Harsh Apr 10, 9:22 am

        Blur effect is also usable for the websites where you need to hide the adult pictures for guest users. Once user logs in and verifies the age or turn off the age filter, you can remove the blur.

        Reply
        +2
    • Marlou Apr 15, 1:12 pm

      Just like in Photoshop, default filters are ugly extremes. This doesn’t mean they aren’t usefull! For example, you could use a contract increase of 125% for more interesting photos (or 150% for black and whites)
      http://jsfiddle.net/Marlou/z4zj4/
      Everything in moderation ;)

      Reply
      0
    • Paula Borowska Apr 17, 7:23 pm

      I agree, these are not the best way to manipulate photos but this is a pretty neat set of properties that’s just imply good to know about. It may be limiting but there are creative ways to use these now, only imagine what would happen if this become the next hot trend.

      Reply
      0
    • Hamranhansenhansen Aug 6, 6:34 am

      For flexibility, you manipulate in the browser, where you have JavaScript and the DOM. Locking your work up in Photoshop where it can’t be changed without Photoshop is inflexible by definition. And you can’t animate layers of they only exist in Photoshop instead of in the browser.

      The best use of filters is on SVG, because with SVG you are rendering from vector to bitmap in the browser at load time in exactly the right size (from iPhone to the side of a blimp) and you can add texture and depth to those vectors with filters, so that you simultaneously get the look of bitmaps with the flexibility of resolution-independent, animatable vectors.

      Consider filters in the context of animation and interactivity. For example, blurring the background when you show the user a small login form, then once they have logged in, you remove the blur from the background. Or adding a grayscale filter to an element that is animated so that it appears to be receding into the background, because as things get further away from our eyes, we see less of the color, they appear more gray. If you are not doing these things in the browser then you not only need to generate more assets, you also need to send them over the network to every user.

      Reply
      +1
  2. David East
    David East Apr 9, 9:18 pm

    Great article! CSS Filters are totally awesome.

    I created a little demo project to showcase filters no too long ago.

    http://cssdeck.com/labs/css3-image-filters

    Reply
    +2
  3. Alexander Goncharov Apr 10, 4:14 pm

    Thx a lot for the article Paula!

    I’ve made a CodePen for grayscale filter with fallback SVG filter for Firefox & fallback old filter:gray for IE 6-9.

    Nothing for IE 10+ BTW =( only js-based canvas stuff, totally not worth it.

    Reply
    -1
  4. Jason Smith Apr 14, 9:43 am

    These filters may be useful for hiding the images. Like Harsh ha said, we can blur the images on login page and after the user logs in images can be shown.

    Reply
    0
  5. z Apr 15, 8:13 am

    WebKit is getting worse and worse now. I won’t use them unless for the extra 7 GB SkyDrive (oh OneDrive) storage for installing Office Online web app on Chrome.

    Reply
    -2
  6. IoHL Apr 15, 3:23 pm

    I just wondering if these filters are cross browsers support or just -webkit- base only at the time being…

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters