Introduction
This guide whoes you how to apply visual filters to text with CSS. Note: This is IE only, as usual!

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=#ffcc66, 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 dropshadow 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 bwetween 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