下面給了html範例程式碼和包含在其中的css程式碼，裡面用的圖片為fd.jpg，複製程式碼，並將圖片命名為fd.jpg即可看到全部效果
<!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS濾鏡效果.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
.alphas
{
filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=85,finishx=150,finishy=85);
}
.blurs
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;/*這個屬性不可少，否則效果不可見*/
filter:blur(add=true,direction=90,strength=25);
}
.chromas
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:red;
width:350px;
filter:chroma(color=red);
}
.dropshadows
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:dropshadow(color=red,offx=15,offy=10,positive=1);
}
.fliphs
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:fliph;
}
.flipvs
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:flipv;
}
.glows
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:glow(color=blue,strength=15);
}
.grays
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:gray;
}
.inverts
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:invert;
}
.masks
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:mask(color=green);
}
.shadows
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:shadow(color=red,direction=225);
}
.waves
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:wave(add=true,freq=3,lightstrength=100,phase=45,strength=20);
}
.xrays
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:xray;
}
</style>
</head>
<body>
<table width=1000 border=1>
<tr><td width=100>濾鏡屬性</td><td width=100>描述</td><td width=400>參數和取值</td><td width=400>效果範例< /td></tr>
<tr><td><span class=alpha>Alpha</span></td><td>設定透明效果</td><td>opacity:透明度等級，0到100，0為完全透明<br>
style:指定透明區域形狀特徵，0為均勻分佈；1為線形；2為放射狀；3為長方形<br>finishopacity:設定漸變結束時的透明度，達到漸變效果，值從0到100<br>
startX,startY:漸變透明效果開始座標<br>finishX,finishY:漸變透明效果結束座標</td><td><p><img src="fd.jpg" class="alphas"/></p ></td></tr>
<tr><td>Blur</td><td>建立模糊效果</td><td>add:指定圖片是否改變為模糊效果，true和false<br>
direction:設定模糊方向，0度代表垂直向上，每45度為一個單位，預設向左270度<br>strength:代表多少個像素的寬度受到模糊影響，預設為5</td>
<td><div class="blurs">GOOD LUCK !</div></td></tr>
<tr><td>Chroma</td><td>把指定的顏色設定為透明</td><td>color:指定透明顏色</td><td>chroma<div class="chromas">範例</div></td></tr>
<tr><td>DropShadow</td><td>建立一種偏移的影像輪廓，即投射陰影</td><td>color:投影的顏色<br>offx,offy:x,y方向陰影的偏移量<br>
positive:true為任何非透明像素建立陰影，false為透明像素建立陰影</td><td><div class="dropshadows">dropshadow範例</div></td></tr>
<tr><td>FlipH</td><td>水平反轉</td><td>無</td><td><div class="fliphs">水平反轉</div></td ></tr>
<tr><td>FlipV</td><td>垂直反轉</td><td>無</td><td><div class="flipvs">垂直反轉</div></td ></tr>
<tr><td>Glow</td><td>為物件的外邊界增加光效</td><td>color:指定發光的顏色<br>
strength:發光的強度</td><td><div class="glows">GLOW範例</div></td></tr>
<tr><td>Gray</td><td>降低圖片的彩色度，變成灰階圖</td><td>無</td><td><img src="fd.jpg" class ="grays"/></td></tr>
<tr><td>Invert</td><td>將色彩、飽和度、亮度值完全反轉建立底片效果</td><td>無</td><td><img src="fd. jpg" class="inverts"/></td></tr>
<tr><td>Light</td><td>在一個物件上進行燈光投影</td><td>no</td><td>no</td></tr>
<tr><td>Mask</td><td>為一個物件建立透明膜</td><td>color:指定遮罩的顏色</td><td><div class="masks">MASK範例</div></td></tr>
<tr><td>Shadow</td><td>建立一個物件的固體輪廓，即陰影效果</td><td>color:投影顏色<br>direction:投影方向</td><td>< div class="shadows">SHADOW範例</div></td></tr>
<tr><td>Wave</td><td>在X軸和Y軸方向利用正弦波紋打亂圖片</td><td>add:true代表按波浪式打亂，false不打亂<br >
freq:產生波紋的頻率（產生多少個波紋)<br>lightstrength:使產生的波紋增強效果（值為0到100）<br>
phase:設定正弦波開始的偏移量，通用0，可達100<br>strength:設定正弦波的振幅</td><td><div class="waves">WAVE 範例</div> </ td></tr>
<tr><td>Xray</td><td>只顯示物件的輪廓</td><td>無</td><td><img src="fd.jpg" class="xrays"/> </td></tr>
</table>
</body>
</html>