13 insanely useful css filter effects you can use now

Have you ever wondered what if there was a way to manipulate images like blurring or saturating etc with css only, life could have been lot easier isn’t it?

Well in fact there are whole bunch of css filter effects which can provide very similar effect to Photoshop or other image editing software’s.

Let’s see how you can apply these css filter effects in your project today.

What is CSS Filter?

Css filters are properties which effects an elements rendering before the element is displayed.

Css filters can be applied on almost any element like image, video, iframe, text, input elements etc. But keep in mind some effects may vary for elements like text or input. You can use single or combination of filters together on one element.

Here is the list of filters available

• brightness()
• contrast()
• blur()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• sepia()
• saturate()
• url()
• custom()

Now let’s see all the filters in more details.

Default Filter Syntax

filter: <filter-function> [<filter-function>]* | none

We will mainly test all filters on this image.

Image Source

Brightness

By the name of the filter you can guess it controls the brightness of the image, in fact brightness filter is very similar to Photoshop’s brightness effect.

filter: brightness([ <number> | <percentage> ])

As you can see number or percentage can be used as value for this filter with 100% or 1 being  the default value. In case of no value it will use default value.

This filter applies a linear multiplier on the element, you can use more than 100% value. Higher value means  brighter image with significantly higher value will turn the image into complete white visa versa 0% or 0 will turn the image completely black.

Negative value is not allowed.

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

Contrast

This filter controls the contrast of the image very similar to Photoshop’s contrast effect.

filter: contrast([ <number> | <percentage> ])

Like brightness filter this filter also accepts number or percentage value while 100% or 1 being the default value. For missing value it will use default value. 0% or 0 will turn the image completely grey.

Similar to brightness filter you can use higher value than 100% and similarly negative value is not allowed.

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

Blur

Have you have ever used blur in Photoshop or any other image editor? This filter works very similarly, to be precise it applies Gaussian blur on image.

filter: blur( <length> )

You can use any length value except percentage that will determine how many pixels need to blend into each other. Higher value will make image more blurry with 0 being the default value. For missing value it will use 0 as default value.

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

Drop-Shadow

Drop-shadow is very similar to box-shadow and you must have used it. But what if you want to create shadow around an irregular shape? you can’t do that with box-shadow because it only creates square or rectangular shadow around the shape.

This is where drop-shadow filter is very useful. Drop-shadow filter is the blurred, offset version of the input image’s alpha mask drawn in a color of your choice.

filter: drop-shadow(<length>{1,2} <color>)

It accepts parameters very much like box-shadow with few exceptions like you can’t use inset for inner shadow and there is no spread parameter similar to text-shadow to have bigger solid shadow than the object.

img{
  -webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.9));
  filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.9));
}

Grayscale

Grayscale filter is like Photoshop’s desaturate  effect which makes the image grayscale.

filter: grayscale([ <number> | <percentage> ])

You can use number or percentage as value, where 0% or 0 means no change and 100% or 1 means complete grayscale anything in between are linear multipliers on the effect.

Like other filters negative value is not allowed.

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

Hue-rotate

This filter applies hue rotation on image. The value accepted here is in degree which defines the angle at which color will rotate.

filter: hue-rotate(<angle>)

You can give value between 0deg – 360deg, at 0deg the image will be unchanged. Though you can give higher value than 360deg but filter will just wrap around. That means effect at 45deg and 405deg will be same.

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

Invert

Invert css filter works similar to Photoshop’s invert effect, it inverts the color of the image.

filter: invert([ <number> | <percentage> ])

You can use number or percentage as value, where 0% or 0 means no change and 100% or 1 means complete invert, anything in between are linear multipliers on the effect.

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

Opacity

This filter applies transparency on image. The value will determine the amount of transparency of the image.

filter: opacity([ <number> | <percentage> ])

You can use number or percentage as value, where 0% or 0 means completely transparent and 100% or 1 means complete opaque, anything in between are linear multipliers on the effect. For missing value it uses 100% as default value.

This filter works similarly to the well know css property opacity but only difference is that this filter tends to perform better in some browser through hardware acceleration.

Negative value is not allowed.

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

Sepia

Sepia toning is a specialized treatment to give a black-and-white photographic print a warmer tone and to enhance its archival qualities. (Source Wikipedia )

This filter adds sepia effect to the image. The amount or value determines the conversion.

filter: sepia([ <number> | <percentage> ])

You can use number or percentage as value, where 0% or 0 means no effect and 100% or 1 means completely sepia, anything in between are linear multipliers on the effect.

Negative value is not allowed.

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

Saturate

This filter controls the saturation level of an image.  This css filter effect is very similar to Photoshop’s saturation effect.

filter: saturate([ <number> | <percentage> ])

You can use number or percentage as value, where 100% or 1 means no effect and 0% or 0 make the image grayscale. You are allowed to use greater value than 100% but that will give super saturated output.

Negative value is not allowed.

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

Url

If you want to create your custom filter then consider using url filter. The url filter locates an XML file that specifies an SVG filter.

filter: url(<url>)

img {
  -webkit-filter:url('#filter');
  filter: url('#filter');
}

More Resources for SVG Filters

• W3C SVG Filter Specification
• MDN-SVG Filters
• Go beyond with SVG filters
• SVG Filter Tutorial

Multiple Filters

You can combine multiple filters to get a different type of effect. But keep in mind the order you put the filters will matter because different order will output different effects.

Like if you place grayscale() after sepia() will affect in a complete grayscale image and if you reverse the sequence like sepia() after grayscale() the image will have complete sepia effect.

Animating Filters

You must be delighted to know that css filters can be animated and that opens the door for lots of experiment and fun. You can combine multiple filters with animation to create some really unique animation effects.

figure {
  -webkit-animation:forest-night 10s infinite;
  animation:forest-night 10s infinite;
}

@-webkit-keyframes forest-night {
  0% {
    filter:hue-rotate(0deg) brightness(0%);
  }
  10% {
    filter:hue-rotate(0deg) brightness(50%);
  }
  20% {
    filter:hue-rotate(0deg) brightness(100%);
  }
  50% {
    filter:hue-rotate(0deg) brightness(2);
  }
  70% {
    filter:hue-rotate(220deg) brightness(50%);
  }
  100% {
    filter:hue-rotate(0deg) brightness(0%);
  }
}
@keyframes forest-night {
  0% {
    filter:hue-rotate(0deg) brightness(0%);
  }
  10% {
    filter:hue-rotate(0deg) brightness(50%);
  }
  20% {
    filter:hue-rotate(0deg) brightness(100%);
  }
  50% {
    filter:hue-rotate(0deg) brightness(2);
  }
  70% {
    filter:hue-rotate(220deg) brightness(50%);
  }
  100% {
    filter:hue-rotate(0deg) brightness(0%);
  }
}

Custom

Apart from all the filters mentioned there is another filter called custom, but this filter is in the development phase. This filter will allow you to create cinematic effects using CSS shaders.

But there has been some issue in the development of this filter that has slowed the process. Adobe team is working on it and hopefully, in recent future, it will be available for everybody to use.

Applying Filter on Video or Iframe

As I said earlier filter can be applied to almost any element with varying effects.  For examples of filter effects on video or iframe check Bennett Feely’s website.

More Info

• W3C Filter Effects Specification
• MDN-Css Filters
• Can I Use

Browser Support

Firefox	Chrome	Opera	Safari	IE
49.0	49.0	41.0	9.1	No

Conclusion

We have discussed all the CSS filters currently available and have seen how easily different effects can be achieved. Some filters require browser hardware acceleration for better performance especially blur(), opacity() and drop-shadow(), so consider this factor before using it. Take a look at this very creative pen. So ready to use it in your next project? Go ahead experiment and have fun.

Which CSS filter effect do you like most or have experimented with do let me know in the comment section below.