Advertisement

Advertisement


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.


<!DOCTYPE html>
<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

CSS 3 Blur Filter Effect
PUBG PUBG PUBG
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.


<!DOCTYPE html>
<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

CSS 3 Brightness Filter Effect
PUBG PUBG PUBG
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.


<!DOCTYPE html>
<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

CSS 3 Contrast Filter Effect
PUBG PUBG PUBG
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.


<!DOCTYPE html>
<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

CSS 3 Drop Shadow Filter Effect
PUBG PUBG PUBG
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%.


<!DOCTYPE html>
<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

CSS 3 Gray-Scale Filter Effect
PUBG PUBG PUBG
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.


<!DOCTYPE html>
<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

CSS 3 Hue-rotate Filter Effect
PUBG PUBG PUBG
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.


<!DOCTYPE html>
<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

CSS 3 invert Filter Effect
PUBG PUBG PUBG
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.


<!DOCTYPE html>
<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

CSS 3 Opacity Filter Effect
PUBG PUBG PUBG
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.


<!DOCTYPE html>
<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

CSS 3 Sepia Filter Effect
PUBG PUBG PUBG
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.


<!DOCTYPE html>
<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

CSS 3 Saturate Filter Effect
PUBG PUBG PUBG
Original Image Saturate (200%) Saturate (0%)









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.