David Walsh Blog

CSS Image Filters in Internet Explorer

Internet Explorer provides for some really interesting CSS image effects. Of course, these effects are useless in any other browser (just how Microsoft intended) but they should be used like any other browser-dependent functionality — used as enhancements only.

Note: Only IE users will see these image effects. Please switch to IE to experience the image effects.

Original Image

Horizontal Flip

.hflip	{ filter:fliph; }

Vertical Flip

.vflip	{ filter:flipv; }

The Wave

.wave { filter:wave(add = 0, freq = 5, lightstrength = 10, phase = 100, strength = 20); }

Frame Fade

.frame	{ filter:alpha(opacity = 100, finishopacity = 0, style = 3, startx = 20, starty = 40, finishx = 0, finishy = 0); }

X-Ray / Inverse

.xray { filter:xray; }

Blur

.blur { filter:blur(add = 0, direction = 300, strength = 10); }

Grayscale

.gray { filter:gray; }