Quick Fun: CSS3 Filter Effects

-webkit-filter: blur(2px);

-webkit-filter: brightness(30%);

-webkit-filter: contrast(30%);

-webkit-filter: grayscale();

-webkit-filter: sepia();

-webkit-filter: invert();

-webkit-filter: opacity(30%);

-webkit-filter: saturate(50%);

-webkit-filter: saturate(300%);

-webkit-filter: hue-rotate(90deg);

-webkit-filter: hue-rotate(300deg);

/* Adding Drop-shadow on the toolbar at the top */

#bg {
  -webkit-filter: drop-shadow(rgba(0,0,0,0.5) 0 5px 5px);
}

Author: Tomomi Imura

Short story: keeping my website since 1996, finally started this blog in 2007. Long story: see "About" page!

Tomomi Imura has written 87 articles for us.

Share this article:

13 Comments to “Quick Fun: CSS3 Filter Effects”

• 
  Zach December 21, 2011 at 4:55 pm

  It almost seems like the invert filter is also de-saturating, but that might be due to image compression?
• 
  admin December 21, 2011 at 9:36 pm

  Zach, I am not sure how invert should correctly looks like, but I just quickly tried on WK Nightly with this code:
  javascript:document.documentElement.style.webkitFilter=’invert() saturate(50%25)’

  I tried 100% invert, with 50% saturation. (%25 is just an escape char for %)
  It does result more de-saturated color.

  When I tried with 200% saturation (with invert), ah, it is saturated and my eyes hurt!
• properties by web (et un peu de design) - Pearltrees December 22, 2011 at 1:49 am

  [...] Quick Fun: CSS3 Filter Effects « GirlieMac! Blog -webkit-filter: brightness(30%); The default is 100%. [...]
• CSS3 adds Filter Effects 1.0 to it's awesome features! | DirTek Designs December 22, 2011 at 2:37 am

  [...] can see view full screenshots and codes for each filter on the GirlieMac! blog. You can also read more information about them on the W3C website. (function(d){ var [...]
• 
  niloy mondal December 22, 2011 at 8:14 am

  whats the purpose of drop shadow and opacity filters? we already have that in css.
• tech blog - [crosspost] Quick Fun: CSS3 Filter Effects December 22, 2011 at 8:33 am

  [...] +Источник: girliemac.com « Замена в таблице [...]
• 
  Geckotang December 23, 2011 at 9:40 am

  bad
  -webkit-filter: drop-shadow(rgba(0,0,0,0.5), 0 5px 5px);

  good
  -webkit-filter: drop-shadow(rgba(0,0,0,0.5) 0 5px 5px);
• 
  admin December 23, 2011 at 11:09 am

  Geckotang, thank you! I fixed the typo just now!

  niloy, yeah I was wondering the same.
• 有趣的css3 filter effects – 91CssGarden December 25, 2011 at 7:34 pm

  [...] http://girliemac.com/blog/2011/12/21/quick-fun-css3-filter-effects/ 转载请注明：91CssGarden » 有趣的css3 filter effects 火柴— E-mail：1547053586@qq.com [...]
• 
  admin January 4, 2012 at 9:55 pm

  Check this out:
  http://dabblet.com/gist/1562718

  This example by Lea Verou tell you how drop-shadow() differs from the box-shadow.
• 
  Mark March 26, 2012 at 1:45 pm

  Great list. I have known these where available, but never really paid attention. You’ve inspired me to make a few webkit goodies. Thanks!
• 
  Ricardo September 18, 2012 at 1:36 pm

  hi, I’m learning this whole new thing of CSS3 and Webkit and HTML5 (I’ve been quite un-updated lol)
  So basicacally I want to do this test: a simple tag link making some webkit effect like the invert() i’ve tried but I keep failing

  Thanks for reading btw

  Keep sharing the good stuff, it’s very appreciated
• 
  admin September 18, 2012 at 4:10 pm

  Hi Ricardo,
  it looks like WordPress turned < a > into an html so your comment is now in pink (linked)! Anyway, I did understand the question so no prob

  I think you are using a unsupported browser to test the invert effect.
  Unfortunately, the css3 filter effect is only supported by a few browsers so far. (See http://caniuse.com/#feat=css-filters) so try it with the latest Chrome or Safari.

  Also, the vendor prefix, -webkit- is still required. so if you want to invert the color, you need:

  .something {
  -webkit-filter: invert();
  }