Tomomi Imura

Tomomi Imura

An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer.

Twitter LinkedIn Github Flickr

Quick Fun: CSS3 Filter Effects

I quickly played with the brand-new CSS Filter Effects on the latest WebKit Nightly! (Edited: Now also supported on Chrome Canary 18.0.976.0 +)

Click the images to view in the full size.

no filter
This is a default google.com screen.
No filter added.

filter:blur(2px)
blur(radius) to create Gaussian blur

-webkit-filter: blur(2px);

The default is 0, no blur.

filter:brightness(30%)
brightness(amount)

-webkit-filter: brightness(30%);
The default is 100%. Values of amount over 100% are allowed.

Updated: I am not sure when it has modified, but it seems that not the accepted value is the range between -100% (dark) and 100% (light), and the default is 0.

filter:contrast(30%)
contrast(amount)

-webkit-filter: contrast(30%);

The default is 100%. Values of amount over 100% are allowed.

filter:grayscale(100%)
grayscale(amount)

-webkit-filter: grayscale();

The default is 100%.

filter:sepia(100%)
sepia(amount)

-webkit-filter: sepia();

The default is 100%.

filter:invert(100%)
invert(amount)

-webkit-filter: invert();

The default is 100%.

filter:opacity(30%)
opacity(amount)

-webkit-filter: opacity(30%);

The default is 100%, no transparency.

filter:saturate(50%)
Saturate(amount)

-webkit-filter: saturate(50%);

The default is 100%.

filter:saturate(300%)
Saturate(amount) – the amount over 100% is also allowed.

-webkit-filter: saturate(300%);


filter:hue-rotate(90deg)
hue-rotate(angle)

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

The default is 0deg.

filter:hue-rotate(300deg)
hue-rotate(angle)

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


filter:drop-shadow(...)
drop-shadow()

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

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




comments powered by