CSS Visual Filters

Sponsors

Bookmark with

StumbleUpon
del.icio.us
Digg it
reddit
Furl
Spurl
ma.gnolia
Yahoo MyWeb
Windows Live

Introduction

This guide shows you how to apply visual filters to text with CSS.

Tested in

Note: This is IE only. CSS3 might bring something new!

Alpha Filter

CSS Code Example:

<span style="FILTER: Alpha(Opacity=80, FinishOpacity=70, Style=2); font-size:20pt;">Alpha Filter</span>

Result:

Possible Parameters:

• Opacity 0 (fully transparent) - 100 (fully opaque)
• Finishopacity 0 (fully transparent) - 100 (fully opaque)
• Style shape characteristics of opacity gradient. 0 (uniform), 1 (linear), 2 (radial), 3 (rectangular)
• startX X coordinate for opacity gradient to start
• startY Y coordinate for opacity gradient to start
• finishX X coordinate for opacity gradient to end
• finishY Y coordinate for opacity gradient to end

Blur Filter

CSS Code Example:

<span style="filter: blur(add=false, direction=135, strength=6); font-size:20pt;width:200px;">Blur Filter</span>

Result:

Possible Parameters:

• Add whether to add the original image to the motion-blurred image. True=added, False=not added.
• Direction direction of the blur basically, in 45 degree increments from 0(top) clockwise to 315 (top left).
• Strength in pixels how much the blur will extent. Default is 5.

Glow Filter

CSS Code Example:

<span style="FILTER: Glow(Color=#ff0000, Strength=8); width:200px;font-size:20pt;">Glow Filter</span>

Result:

Possible Parameters:

• Color colour for the shadow effect. Hex value.
• strength intensity of the glow effect. 1 - 255. Gets away from "glow" at high values.

Drop Shadow Filter

CSS Code Example:

<span style="FILTER: DropShadow(Color=#0066cc, OffX=5, OffY=-3, Positive=1);width:300px;font-size:20pt;">DropShadow Filter</span>

Result:

Possible Parameters:

• Color colour for the drop shadow effect. Hex value.
• offX number of pixels shadow is offset in x-axis
• offY number of pixels shadow is offset in y-axis
• positive non-zero value create drop shadow for any non-transparent pixel, false or zero value creates shadow for any transparent pixel in visual object.

Shadow Filter

CSS Code Example:

<span style="FILTER: Shadow(Color=#00cc66, Direction=45);width:200px;font-size:20pt;">Shadow Filter</span>

Result:

Possible Parameters:

• color colour of the shadow. Hex value.
• direction directional offset of the shadow in 45 degree increments between 0 and 315 degrees.

Wave Filter

CSS Code Example:

<span style="FILTER: Wave(Add=1, Freq=2, LightStrength=30, Phase=20, Strength=7); width:200px;font-size:20pt;">Wave Effect</span>

Result:

Possible Parameters:

• add true (non-zero) adds waved effect to original, false (zero) does not.
• freq number of waves in visual area.
• lightstrength strength of light in wave effect from 0 - 100.
• phase wavelength at which offset should start from 0 - 360.
• strength intensity of wave effect.

FlipV Filter

CSS Code Example:

<span style="FILTER: FlipV; width:200px;font-size:20pt;">FlipV Filter</span>

Result:

FlipH Filter

CSS Code Example:

<span style="FILTER: FlipH; width:200px;font-size:20pt;">FlipH Filter</span>

Result:

Possible Parameters:

• n/a

Chroma Filter

CSS Code Example:

<span style="FILTER: Chroma(Color=#9999cc); width:200px;font-size:20pt;">Chroma Filter</span>

Result:

Possible Parameters:

• Color Value of the color to be subject to chromakey transparency. Hex value.

Grayscale Filter

CSS Code Example:

<span style="FILTER: Gray; width:300px;font-size:20pt;">Grayscale Filter</span>

Result: ?

Possible Parameters:

• n/a

Invert Filter

CSS Code Example:

<span style="FILTER: Invert; width:300px;font-size:20pt;background:#eeeeee;">Invert Filter</span>

Result:

Possible Parameters:

• n/a

Light Filter

CSS Code Example:

<span style="FILTER: Light; width:200px;font-size:20pt;">Light Filter</span>

Result:

Possible Parameters:

• n/a

Mask Filter

CSS Code Example:

<span style="FILTER: Mask(Color=#9999cc; width:200px;font-size:20pt;">Mask Filter</span>

Result:

Possible Parameters:

• color colour of the transparent regions. Hex value.

X-Ray Filter

CSS Code Example:

<span style="FILTER: Xray; width:200px;font-size:20pt;background:#eeeeee;">X-Ray Filter</span>

Result:

Possible Parameters:

• n/a