CSS filters are a great way to add effects to text, images and other aspects of a webpage without having to make special graphics. Filters only work on Internet Explorer 4.0+, and only work on text if height and width are specified. Some of them only work on an image if it has transparent parts.
Below are the details for each of the filters.
Alpha
Alters the opacity of the object, which makes it blend into the background.
| Alpha |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=0)">Alpha</span> |
|
<img src="image.gif" width="88" height="31" style="filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=0)"> |
| opacity |
Level of the opacity. 0 is fully transparent, 100 is fully opaque. |
| finishopacity |
Level of the opacity at the other end of the object. |
| style |
The shape of the opacity gradient. 0 = uniform
1 = linear
2 = radial
3 = rectangular |
| startX |
X coordinate for opacity gradient to begin. |
| startY |
Y coordinate for opacity gradient to begin. |
| finishX |
X coordinate for opacity gradient to end. |
| finishY |
Y coordinate for opacity gradient to end. |
Blur
Motion blurs your object with the direction and strength specified. An interesting mouseover effect for your links!
| Blur |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:blur(add=0, direction=200, strength=5)">Blur</span> |
|
<img src="image.gif" width="88" height="31" style="filter:blur(add=0, direction=200, strength=5)"> |
| add |
True or false. If true, the image is added to the blurred image; if false, the image is not added to the blurred image. |
| direction |
The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left). 0 = top
45 = top right
90 = right
135 = bottom right
180 = bottom
225 = bottom left
270 = left
315 = top left |
| strength |
The number of pixels the blur will extend. The default is 5 pixels. |
Chroma
Makes a specific color transparent. Usually used with images, and it works with scrollbars and backgrounds.
| Chroma |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:chroma(color=#000000)">Chroma</span> |
|
<img src="image.gif" width="88" height="31" style="filter:chroma(color=#A57B94)"> |
| color |
The color that you'd like to be transparent. |
DropShadow
Creates a shadow of your object at the specified X (horizontal) and Y (vertical) offset and color.
| Drop |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:dropshadow(color=#9BAD71, offx=5, offy=5)">Shadow</span> |
|
<img src="image.gif" width="88" height="31" style="filter:dropshadow(color=#9BAD71, offx=5, offy=5)"> |
| color |
The color, in #RRGGBB format, of the dropshadow. |
| offX |
Number of pixels the drop shadow is offset from the visual object, along the x-axis. Positive integers move the drop shadow to the right, negative integers move the drop shadow to the left. |
| offY |
Number of pixels the drop shadow is offset from the visual object, along the y-axis. Positive integers move the drop shadow down, negative integers move the drop shadow up. |
| positive |
If true, all opaque pixels of the object have a dropshadow. If false, all transparent pixels have a dropshadow. The default is true. |
FlipH
Creates a horizontal mirror image of the object.
| FlipH |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:fliph">FlipH</span> |
|
<img src="image.gif" width="88" height="31" style="filter:fliph"> |
FlipV
Creates a vertical mirror image of the object.
| FlipV |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:flipv">FlipV</span> |
|
<img src="image.gif" width="88" height="31" style="filter:flipv"> |
Glow
Creates a glow around the object. If it's a transparent image, the glow is created around the opaque pixels of it.
| Glow |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:glow(color=#9BAD71, strength=7)">Glow</span> |
|
<img src="image.gif" width="88" height="31" style="filter:glow(color=#9BAD71, strength=7)"> |
| color |
The color you want the glow to be. |
| strength |
The intensity of the glow (from 1 to 255). |
Grayscale
Converts the the colors of the object to 256 shades of gray.
| Grayscale |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:gray">Grayscale</span> |
|
<img src="image.gif" width="88" height="31" style="filter:gray"> |
Invert
Maps the colors of the object to their opposite value in the color spectrum; a "negative."
| Invert |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#CC0000; font-weight:bold; filter:invert">Invert</span> |
|
<img src="image.gif" width="88" height="31" style="filter:invert"> |
Mask
Turns transparent pixels to a specified color and makes opaque pixels transparent.
| Mask |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:mask(color=#000000)">Mask</span> |
|
<img src="image.gif" width="88" height="31" style="filter:mask(color=#000000)"> |
| color |
The color that the transparent areas will become. |
Shadow
Creates an attenuated shadow in the direction and color specified. It's a cross between Dropshadow and Glow.
| Shadow |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:shadow(color=#9BAD71, direction=225)">Shadow</span> |
|
<img src="image.gif" width="88" height="31" style="filter:shadow(color=#9BAD71, direction=225)"> |
| color |
The color that you want the shadow to be. |
| direction |
The direction that you want the shadow to go in, expressed in terms of degrees clockwise from vertical. The default is 225 degrees (bottom left). 0 = Top
45 = Top right
90 = Right
135 = Bottom right
180 = Bottom
225 = Bottom left
270 = Left
315 = Top left |
Wave
Gives the object a sine wave distortion to make it look wavey.
| Wave |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:wave(add=0, freq=1, lightstrength=20, phase=100, strength=10)">Wave</span> |
|
<img src="image.gif" width="88" height="31" style="filter:wave(add=0, freq=1, lightstrength=20, phase=100, strength=10)"> |
| add |
A value of 1 adds the original image to the waved image, 0 does not. |
| freq |
The number of waves. |
| light |
The strength of the light on the wave (from 0 to 100). |
| phase |
At what degree the sine wave should start (from 0 to 100). |
| strength |
The intensity of the wave effect. |
Xray
Grayscales and flattens the color depth.
| XRay |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:xray">XRay</span> |
|
<img src="image.gif" width="88" height="31" style="filter:xray"> |
One last thing. You can use multiple filters on the one object to create some really interesting effects:
| Like This |
<span style="width:80; height:70; font-size:34px; font-family:verdana; color:#000000; font-weight:bold; filter:mask(color=#000000) shadow(color=#9BAD71, direction=135) chroma(color=#000000)">Like This</span> |
