LearnCSS Filter Effects

Guil Hernandez
writes on October 1, 2012

Share with your friends


Filters let us apply a variety of Photoshop-like effects to HTML content with simple CSS syntax. With the filter property we can create hardware-accelerated filter effects like grayscale, blur and contrast all with a single line of CSS. In this article, we’ll cover a few of the CSS filter effects we can achieve with this powerful new feature.

A Bit of History

Filters were originally created as an SVG (Scalable Vector Graphics) feature for applying image processing effects to vector graphics. In 2008, Robert O’Callahan from Mozilla thought filters had “major limitations” because they could not be used to enhance HTML content. So he put his forward-thinking cap on and started experimenting with ways to apply the effects to HTML content via CSS. Fast forward a few years and the W3C, with help from Adobe, Apple and Opera created a spec, which landed in WebKit browsers late last year (2011).

“Filters are cool so I decided to go a bit over the top here” — Robert O’Callahan – Mozilla

How CSS Filters Work

Filters can be applied to DOM elements such as images, text, even canvas and video elements. They accept parameters that control how much filtering is done. Before the rendered page loads, the filter takes a snapshot of the page as a bitmap. Then, based on the parameters we pass, it applies the effect over the original page image before it’s composited and rendered into the document.

Now for the Fun Part

Keep in mind that for now we’ll need to use the vendor prefixed version of the filter property, as it’s still a work in progress and things can change at any time. To see how they work we’ll use an image of our good buddy Mike the Frog as our input.

Our original image of Mike the Frog.


The grayscale filter converts our input image to black and white.

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

We used 100%, which is completely grayscale. A value of 0% would leave the image unchanged.


This filter adjusts the hues based on the hue angles in the color wheel and the input image’s original colors; it shifts every hue around the color wheel by the degree parameters we provide.

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

The green hue angle in the original image is around 63º. When the hue is shifted 150º, the result is a bluish hue in the 213º range.


This filter applies a sepia tone (like in antique photographs).

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

A value of 100% makes Mike the Frog look like a character from an old western movie.


We can also adjust the contrast of our image. A value of 0% generates a black image and 100% returns the original image.

img {
  -webkit-filter: contrast(250%);

We went beyond 100% to generate a high-contrast look.


With blur we can apply a Gaussian blur effect to our image.

img {
  -webkit-filter: blur(6px);

The blur radius parameter passed affects how many pixels blend into each other. The larger the pixel value, the more blur it creates.

Combining Filters

We can use more than one filter by space-separating each one. This can create some interesting visual effects.

img {
  -webkit-filter: grayscale(100%) brightness(-5%) contrast(180%);

Here we’ve combined grayscale, brightness and contrast to generate a Noir style Mike the Frog.


The parameter passed is similar to the syntax for box-shadow.

img {
  -webkit-filter: drop-shadow(20px 15px 20px #000);

You may be asking yourself “We can already do this with box shadows, what’s the purpose?” Well, the drop-shadow filter takes things a step further — it’s a little more powerful than CSS box shadows. For example, if we give our image a dashed border, notice how the filter generated shadow follows the dashes.

Also, take a look at what it does with transparent background areas. I’ve removed the background of the image (in Photoshop) and saved it as a transparent PNG. Whereas box-shadow casts a shadow off the edges of the image, the drop-shadow filter follows the transparent areas of the image.

(Left) drop-shadow filter follows the dashed border. (Right) It follows transparency in the image.

Browser Support

Currently, these filters are only implemented in WebKit based browsers (Chrome, Safari and iOS Safari), so we need to include the ‘-webkit-‘ vendor prefix for now. However, it is best practice to use all the vendor prefixes (that’s up to you). If you want to stay current with browser support, take a look at the latest compatibility table.

CSS filters are just another example of how we shouldn’t limit ourselves to Photoshop when designing for the web. It’s powerful tools like these that help developers and designers further bridge the gap between design and code.

4 Responses to “CSS Filter Effects”

  1. Shivang on June 25, 2013 at 9:06 am said:

    how can we save the images after these filters are applied ?

  2. Guil,

    This is awesome. Thanks!

  3. スーパーブランドコピー激安販売!
    スーパーコピー腕時計,ロレックスコピー,ブライトリングコピー,ボーム&メルシエコピー時計コピー業界最高峰スーパーコピー時計通販専門!7年以上の販売実績を 持つ時計コピー老舗!時計コピーであれば何でも揃えられます コピー時計 時計スーパーコピー通販専門店!時計コピー時計販売通販! コピー時計スーパー コピー等の 最高級のレプリカコピー時計を販売ロレックスコピー,ガガミラノコピー ,IWCコピー ,オメガコピー ,フェラーリコピー ,フランクミュラーコピー ,ベル&ロスコピー ,各種のブランドはコピーを表しますコピーを表して、時計をコピーして、スーパーコピーは代 金引換払いにして、スーパーはブランドをコピーして、スー パーは時計をコピーして代金引換払いにして、スーパーは時 計をコピーして、スーパーは腕時計をコピーして、ブランド はスーパーマーケットを表してコピーして、ブランドのスー パーマーケットはコピーして、ブランドはコピーを表して、 腕時計はコピーします ,ボーム&メルシエコピー時計コピー業界最高峰スーパーコピー時計通販専門!7年以上の販売実績を 持つ時計コピー老舗!時計コピーであれば何でも揃えられます コピー時計 時計スーパーコピー通販専門店!時計コピー時計販売通販! コピー時計スーパー コピー等の 最高級のレプリカコピー時計を販売ロレックスコピー,ガガミラノコピー ,IWCコピー ,オメガコピー ,フェラーリコピー ,フランクミュラーコピー ,ベル&ロスコピー ,各種のブランドはコピーを表しますコピーを表して、時計をコピーして、スーパーコピーは代 金引換払いにして、スーパーはブランドをコピーして、スー パーは時計をコピーして代金引換払いにして、スーパーは時 計をコピーして、スーパーは腕時計をコピーして、ブランド はスーパーマーケットを表してコピーして、ブランドのスー パーマーケットはコピーして、ブランドはコピーを表して、 腕時計はコピーします http://www.ooowatch.com/kabann/vuitton/index.html

  4. ┓┏┓┏┓
    100%実物写真ですし、品質が完璧です!”スーパーコピーブランド財布激安 偽物財布激安コピー ルイヴィトン財布偽物,偽物財布コピーエルバーキンコピースーパーコピー財布ブランド財布コピーブランドコピー激安バレンシアガ スーパーコピー激安ロレックス スーパーコピー時計ブランド財布激安 偽物財布激安コピー ルイヴィトン財布偽物,偽物財布コピーブランド激安市場-jck35販売:ブランド財布コピー,激安ブランド,財布コピー,偽ブランド,偽 ブランド財布,偽物ブランド財布,ブランドコピー,ヴィトンコピー,ルイヴィトン財布偽物, シャネル財布コピー,グッチ財布コピー,エルメス財布偽物,D&G 財布コピー,ボッテガ 財布 .2013年新作スーパーコピーロレックス,スーパーコピーロレックス時計通販スーパー コピー品その他の世界一流ロレックススーパーコピー時計品を扱っています。 ホームページをクリックして商品をご覧下さい.ロレックスコピー,業界No.1人気スーパーコピーロレックス腕時計専門販売ロレックスコピー(ROLEXスーパーコピー)のロレックス レプリカ販売専門店です。すべての商品は品質2年無料保証です,ロレックス デイトジャスト 偽物,人気満点ロレックス コピーn級品新作大特集 http://www.bagkakaku.com/vuitton_belt.html

Leave a Reply

Want to learn more about CSS?

Learn how CSS allows you to apply visual styling to HTML elements with colors, fonts, layouts, and more.

Learn more