Share Share

Share Tweet

Tweet Share

Share Pin It

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%); }

Online Email Template Builder With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before. Try FreeOther Products

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.