<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
img{
width: 250px;
height: 125px;
}
#point{
-webkit-filter: none; /* Safari 6.0 - 9.0 */
filter: none;
}
#point1{
-webkit-filter: blur(5px);
filter: blur(5px);
}
#point2{
-webkit-filter: brightness(200%);
filter: brightness(200%);
}
#point3{
-webkit-filter: drop-shadow(3px 6px 10px #8c8c8c);
filter: drop-shadow(3px 6px 10px #8c8c8c);
}
#point4{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
#point5{
-webkit-filter: hue-rotate(120deg);
filter: hue-rotate(120deg);
}
#point6{
-webkit-filter: invert(100%);
filter: invert(100%);
}
#point7{
-webkit-filter: opacity(20%);
filter: opacity(20%);
}
#point8{
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
#point9{
-webkit-filter: sepia(100%) blur(5px);
filter: sepia(100%) blur(5px);
}
</style>
</head>
<body>
<h1>CSS filter Property</h1>
<h2>filter: none (default)</h2>
<img id="point" src="car-left.png">
<h2>filter: blur(5px)</h2>
<img id="point1" src="car-left.png">
<h2>filter: brightness(200%)</h2>
<img id="point2" src="car-left.png">
<h2>filter: drop-shadow(3px 6px 10px #8c8c8c)</h2>
<img id="point3" src="car-left.png">
<h2>filter: grayscale(100%)</h2>
<img id="point4" src="car-left.png">
<h2>filter: hue-rotate(120deg)</h2>
<img id="point5" src="car-left.png">
<h2>filter: invert(100%)</h2>
<img id="point6" src="car-left.png">
<h2>filter: opacity(20%)</h2>
<img id="point7" src="car-left.png">
<h2>filter: sepia(100%)</h2>
<img id="point8" src="car-left.png">
<h2>filter: sepia(100%) blur(5px)</h2>
<img id="point9" src="car-left.png">
<p><strong>Note</strong>: Multiple values are supported by filter</p> </body>
</html>