CSS3 Filters
There are many filter effects which can be used to perform various visual effects like blur, opacity, etc. on
any graphical element like <img>.
CSS3 Filter Functions
| Function | Description |
|---|---|
| none | It is a default value.It has no special effects. |
| blur(px) | It applies blur effect. A larger value will increase the blur on the element. The defalut value is 0. |
| brightness(%) | It adjusts the brightness. 0% will make the image completely black, 100% is the original brightness, more than 100% will increase the brightness. |
| contrast(%) | It adjusts the contrast. Values affects same as in brightness(%). |
| grayscale(%) | It changes the image into grayscale. Here, 0% represents original image and 100% will make image completely grayscale. |
| drop-shadow() | It applies a drop-shadow effect. |
| hue-rotate(deg) | It applies a Hue rotation. |
| invert(%) | It inverts the colors in the image. |
| opacity(%) | It controls the opacity of the image. |
| sepia(%) | It converts the image to sepia color effect. |
| saturate(%) | It balances the saturation. |
The Blur Function
This function creates blurry effect over the image. A larger value will create more blur. The default value is 0.
<html lang="en">
<head>
<title> CSS 3 Blur Filter Effect </title>
<meta charset="UTF-8">
<style>
img.blur {
-webkit-filter: blur(1px); /* Chrome, Safari, Opera */
filter: blur(1px);
}
img.extra-blur {
-webkit-filter: blur(2px); /* Chrome, Safari, Opera */
filter: blur(2px);
}
table td{
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG.png" alt="PUBG">
</td>
<td>
<img class="blur" src="PUBG.png" alt="PUBG">
</td>
<td>
<img class="extra-blur" src="PUBG.png" alt="PUBG">
</td>
</tr>
<tr>
<td>Original Image</td>
<td>Image Blur (1px)</td>
<td>Blur (2px)</td>
</tr>
</table>
</body>
</html>
Output
|
|
|
| Original Image | Image Blur (1px) | Blur (2px) |
The Brightness Function
The brightness() function is used to balance brightness of the image. Here, 0% will create an image
completely black i.e. no brightness and value of 100% or 1 gives the original brightness.
Values higher than the 100% will increase the brightness in the image.
<html lang="en">
<head>
<title> CSS 3 Brightness Filter Effect </title>
<meta charset="UTF-8">
<style>
img.bright {
-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
filter: brightness(200%);
}
img.dark {
-webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
filter: brightness(50%);
}
table td{
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG-GAME-IMAGE.jpg" alt="PUBG">
</td>
<td>
<img class="dark" src="PUBG-GAME-IMAGE.jpg" alt="PUBG">
</td>
<td>
<img class="bright" src="PUBG-GAME-IMAGE.jpg" alt="PUBG">
</td>
</tr>
<tr>
<td>Original Image</td>
<td>brightness(50%)</td>
<td>brightness(200%)</td>
</tr>
</table>
</body>
</html>
Output
|
|
|
| Original Image | brightness(50%) | brightness(200%) |
Adjusting the Image Contrast
The contrast() function is used to balance the contrast of an image.
Its values affects same as in the previous function. Here also, value of 0% will create an image that is completely black i.e.
no contrast and a value of 100% or 1 gives the default contrast of the image. Values over 100% will increase the
contrast on the image.
<html lang="en">
<head>
<title> CSS 3 Contrast Filter Effect </title>
<meta charset="UTF-8">
<style>
img.bright {
-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
filter: contrast(200%);
}
img.dim {
-webkit-filter: contrast(50%); /* Chrome, Safari, Opera */
filter: contrast(50%);
}
table td{
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG-Image.png" alt="PUBG">
</td>
<td>
<img class="dim" src="PUBG-Image.png" alt="PUBG">
</td>
<td>
<img class="bright" src="PUBG-Image.png" alt="PUBG">
</td>
</tr>
<tr>
<td>Original Image</td>
<td>contrast(50%)</td>
<td>contrast(200%)</td>
</tr>
</table>
</body>
</html>
Output
|
|
|
|
| Original Image | contrast(50%) | contrast(200%) |
Drop Shadow Effect
The drop-shadow() function is used to apply the drop shadow effect to the images. It works similar to the box-shadow property.
<html lang="en">
<head>
<title> CSS 3 Drop Shadow Filter Effect </title>
<meta charset="UTF-8">
<style>
.shadow {
-webkit-filter: drop-shadow(5px 5px 5px green); /* Chrome, Safari, Opera */
filter: drop-shadow(5px 5px 5px green);
}
.shadow-large {
-webkit-filter: drop-shadow(10px 10px 5px red); /* Chrome, Safari, Opera */
filter: drop-shadow(10px 10px 5px red);
}
table td{
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG-GAME-IMAGE.jpg" alt="PUBG">
</td>
<td>
<img class="shadow" src="PUBG-GAME-IMAGE.jpg" alt="PUBG">
</td>
<td>
<img class="shadow-large" src="PUBG-GAME-IMAGE.jpg" alt="PUBG">
</td>
</tr>
<tr>
<td>Original Image</td>
<td>Drop-shadow(5px 5px 5px Green)</td>
<td>Drop-shadow(10px 10px 5px Red)</td>
</tr>
</table>
</body>
</html>
Output
|
|
|
|
| Original Image | Drop-shadow(5px 5px 5px Green) | Drop-shadow(10px 10px 5px Red) |
Converting to Grayscale
The grayscale() function is used to convert image color to grayscale. Here, 100% is completely grayscale, 0% leaves the image unchanged. The default value is 0%.
<html lang="en">
<head>
<title> CSS 3 Gray-Scale Filter Effect</title>
<meta charset="UTF-8">
<style>
img.complete-gray {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
img.partial-gray {
-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
filter: grayscale(50%);
}
table td{
padding: 10px;
text-align: center;
border: 0px !important;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG-IMAGE.png" alt="PUBG">
</td>
<td>
<img class="complete-gray" src="PUBG-IMAGE.png" alt="PUBG">
</td>
<td>
<img class="partial-gray" src="PUBG-IMAGE.png" alt="PUBG">
</td>
</tr>
<tr>
<td>Grayscale(0)</td>
<td>Grayscale(50%)</td>
<td>Grayscale(100%)</td>
</tr>
</table>
</body>
</html>
Output
|
|
|
|
| Grayscale(0) | Grayscale(50%) | Grayscale(100%) |
Applying Hue Rotation on Image
The hue-rotate() function applies a hue rotation on the image. Here, the values are given in degrees.
A value of 0deg gives the original image.
The default value is 0deg. The maximum value which can be used here is 360deg.
<html lang="en">
<head>
<title> CSS 3 Hue-rotate Filter Effect </title>
<meta charset="UTF-8">
<style>
img.hue-normal {
-webkit-filter: hue-rotate(200deg); /* Chrome, Safari, Opera */
filter: hue-rotate(200deg);
}
img.hue-wrap {
-webkit-filter: hue-rotate(600deg); /* Chrome, Safari, Opera */
filter: hue-rotate(600deg);
}
table td{
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG.png" alt="PUBG">
</td>
<td>
<img class="hue-normal" src="PUBG.png" alt="PUBG">
</td>
<td>
<img class="hue-wrap" src="PUBG.png" alt="PUBG">
</td>
</tr>
<tr>
<td>Original Image</td>
<td>hue-rotate(150deg)</td>
<td>hue-rotate(480deg)</td>
</tr>
</table>
</body>
</html>
Output
|
|
|
|
| Original Image | hue-rotate(150deg) | hue-rotate(480deg) |
The Invert Effect
The invert() function is used to invert the colors of the image.
Here also, value of 100% or 1 is completely inverted, value of 0% gives the original image.
If the 'amount' parameter is missing, then the default value of 0 is used.
<html lang="en">
<head>
<title> CSS 3 invert Filter Effect </title>
<meta charset="UTF-8">
<style>
img.partially-inverted {
-webkit-filter: invert(75%); /* Chrome, Safari, Opera */
filter: invert(75%);
}
img.fully-inverted {
-webkit-filter: invert(100%); /* Chrome, Safari, Opera */
filter: invert(100%);
}
table td{
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG-IMAGE" alt="PUBG">
</td>
<td>
<img class="partially-inverted" src="PUBG-IMAGE" alt="PUBG">
</td>
<td>
<img class="fully-inverted" src="PUBG-IMAGE" alt="PUBG">
</td>
</tr>
<tr>
<td>Original Image</td>
<td>Invert(75)</td>
<td>Invert(100)</td>
</tr>
</table>
</body>
</html>
Output
|
|
|
|
| Original Image | Invert(75) | Invert(100) |
Applying Opacity to Images
The opacity() function is used to apply opacity to the images. Here, value of 0% is completely transparent, value of 100% or 1 gives the original image.
If the 'amount' parameter is missing, then the default value of 1 is used.
<html lang="en">
<head>
<title> CSS 3 Opacity Filter Effect </title>
<meta charset="UTF-8">
<style>
img.transparent {
-webkit-filter: opacity(75%);
filter: opacity(75%);
}
img.highly-transparent {
-webkit-filter: opacity(50%);
filter: opacity(50%);
}
table td{
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG-GAME-IMAGE.jpg" alt="PUBG">
</td>
<td>
<img class="transparent" src="PUBG-GAME-IMAGE.jpg" alt="PUBG">
</td>
<td>
<img class="highly-transparent" src="PUBG-GAME-IMAGE.jpg" alt="PUBG">
</td>
</tr>
<tr>
<td>Original Image</td>
<td>Opacity (75%)</td>
<td>Opacity (50%)</td>
</tr>
</table>
</body>
</html>
Output
|
|
|
|
| Original Image | Opacity (75%) | Opacity (50%) |
Applying Sepia Effect to Images
The sepia() function converts the image to sepia color effect. Here, value of 100% or 1 is completely sepia, value of 0% gives the original image.
If the 'amount' parameter is missing, then the default value of 0 is used.
<html lang="en">
<head>
<title> CSS 3 Sepia Filter Effect </title>
<meta charset="UTF-8">
<style>
img.complete-sepia {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
img.partial-sepia {
-webkit-filter: sepia(50%);
filter: sepia(50%);
}
table td{
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG-IMAGE.png" alt="PUBG">
</td>
<td>
<img class="complete-sepia" src="PUBG-IMAGE.png" alt="PUBG">
</td>
<td>
<img class="partial-sepia" src="PUBG-IMAGE.png" alt="PUBG">
</td>
</tr>
<tr>
<td>Original Image</td>
<td>Sepia (100%)</td>
<td>Sepia (50%)</td>
</tr>
</table>
</body>
</html>
Output
|
|
|
|
| Original Image | Sepia (100%) | Sepia (50%) |
Adjusting the Saturation of Images
The saturate() function can be used to balance the saturation of an image. Here, 0% is completely unsaturated and 100% is the original image.
Values over 100% will increase the saturation effect. If the 'amount' parameter is missing, then the default value of 1 is used.
<html lang="en">
<head>
<title> CSS 3 Saturate Filter Effect </title>
<meta charset="UTF-8">
<style>
img.un-saturated {
-webkit-filter: saturate(0%);
filter: saturate(0%);
}
img.super-saturated {
-webkit-filter: saturate(200%);
filter: saturate(200%);
}
table td{
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="PUBG-IMAGE.png" alt="PUBG">
</td>
<td>
<img class="super-saturated" src="PUBG-IMAGE.png" alt="PUBG">
</td>
<td>
<img class="un-saturated" src="PUBG-IMAGE.png" alt="PUBG">
</td>
</tr>
<tr>
<td>Original Image</td>
<td>Saturate (200%)</td>
<td>Saturate (0%)</td>
</tr>
</table>
</body>
</html>
Output
|
|
|
|
| Original Image | Saturate (200%) | Saturate (0%) |