CSS Filter Examples

Note:
This page was created for use in my former teaching at the University of Pittsburgh. It is only occasionally updated resulting in many links being more of historical rather than current usefulness. Over time many links will suffer link rot.

 

Yesterday it worked,
Today it is not working,
Windows is like that...

Look over the different effects available with CSS filters. Select an image you would like to work with from the Class Images page. Select and copy the code from the example to your page. Once it works, change colors, sizes, etc.

Alpha Channel

<img src="images/sunface.gif" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)">

"SunShine!"

<span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">"SunShine!"</span>

Motion Blur

<img src="images/sunface.gif" style="Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
"SunShine!" <span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: Blur(Add = 1, Direction = 225, Strength = 10)">"SunShine!"</span>

Chroma

<img src="images/slash1.gif" style="Filter: Chroma(Color = #000000)">
"SunShine!" <span style="width: 580; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: Chroma(Color = #FF0000)">"SunShine!"</span>

Drop Shadow

<img src="images/sunface.gif" style="Filter: Chroma(Color = #000000) DropShadow(Color=#FF0000, OffX=2, OffY=2, Positive=1)">
"SunShine!" <span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: blue; Filter: DropShadow(Color=#FF0000, OffX=2, OffY=2, Positive=1)">"SunShine!"</span>

Flip

<img src="images/sunface.gif" style="Filter: FlipV">
"SunShine!" <span style="width: 300; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: FlipV">"SunShine!" </span>

Glow

<img src="images/slash.gif" style="Filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">
"A Green Glow!" <span style="width: 357; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Glow(Color=#00FF00, Strength=20)">"A Green Glow!"</span>

Grayscale

<img src="images/flood85_1.jpg" style="Filter: Gray">
"Colorless Flood" <span style="width: 300; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Gray">"Colorless Flood" </span>

Invert

<img src="images/flood85_1.jpg" style="Filter: Invert">
"Invert the Flood!" <span style="width: 387; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Invert">"Invert the Flood!"</span>

Mask

<img src="images/slash.gif" style="FILTER: Chroma(Color = #000000) Mask(Color=#00FF00)">
"Now, Stop That!." <span style="width: 357; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Mask(Color=#00FF00)">"Now, Stop That!."</span>

Shadow

<img src="images/slash.gif" style="FILTER: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
"Now, Stop That!" <span style="width: 357; height: 50; font-size: 18pt; font-family: Arial Black; color: red; Filter: Shadow(Color=#0000FF, Direction=225)">"Now, Stop That!"</span>

Wave

<img src="images/flood85_1.jpg" style="FILTER: Chroma(Color = #000000) Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10)">
"Flood!" <span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: Wave(Add=0, Freq=5, LightStrength=20, Phase=20, Strength=20)">"Flood!"</span>

X-ray

<img src="images/flood85_1.jpg" style="Filter: Xray">
"Flood!" <span style="width: 357; height: 50; font-size: 36pt; font-family: Arial Black; color: red; Filter: Xray">"Flood!" </span>

Chaining Filters

 

 <img src="images/sunface.gif" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0) Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10)">
The truth of a thing is the feel of it, not the think of it.
Stanley Kubrick 		<span style="width: 357; height: 20; font-size: 18pt; font-family: Arial Black; Filter: Mask(color=#FF0000) Shadow(Color=#0000FF, Direction=225) Chroma(color=#FF0000)"> The truth of a thing is the feel of it, not the think of it.<BR> Stanley Kubrick</span>
A circle image <img src="images/circle2.gif" alt="A circle image" style="Filter: Alpha(Opacity=130, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0) Filter: Blur(Add = 5, Direction = 135, Strength = 18)">
images/yeltson.jpg <img src="images/yeltson.jpg" alt="images/yeltson.jpg" style="FILTER:Wave(Add=0, Freq=3, LightStrength=20, Phase=220, Strength=10)">
images/yeltson.jpg <img src="images/yeltson.jpg" alt="images/yeltson.jpg" style="FILTER: Wave(Add=0, Freq=3, LightStrength=20, Phase=220, Strength=10) Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)">

Class Images

** Writing for the Web **
** Effective Web Design**
** Web Development Basics **
** Marketing on the Internet **
** Graphic Design for the Web **
** Web Site Design and Layout **
** Management of Web Projects **
** Designing and Building an Intranet **

Computer Learning Center

University of Pittsburgh

Home | Handout | Searching | Show Me | Tell Me | Buildit

David J. Hark
HARK/INTERNET-HELP
P. O. Box 201 Shepherdstown, WV 25443-0201
304-876-2607
dhark@fred.net
dhark@intrepid.net
http://www.dhark.com
http://www.fred.net/dhark
Last updated: 2 January 2000

 

© 1998, 1999, 2000 David J. Hark