Friday, March 29, 2024

How to Use CSS Image Filter Effects

CSS filters are powerful tools, through which developers can create different visual effects, similar to the Photoshop filters for the browser. This CSS filtering property gives you access to effects such as changing the color of an item before it is displayed, color dimming and so on. Filters are used to adjust a particular image, edge, or background. This CSS property of the filter allows you to create graphic effects, such as changing the color of an element or blurring another element, thus creating visual effects.

The CSS filter syntax looks like this:

filter: <blur()>, <brightness()>, <contrast()>, <drop-shadow()>, <grayscale()>, <invert()>, <saturate()>, <hue-rotate()>, <opacity()>, <sepia()/>

A simple example of using filters is listed below:

filter: blur(20px) grayscale(20%);

Specify a value for one of the functions listed above in order to use the CSS filtering property. Note that if the specified value is invalid the effect will be canceled out.

Functions – The filter property is specified as one of the functions below:

  • Blur — this function applies an image blur effect, a higher value will create more blurring, the value for interpolation is 0;
  • brightness — this function applies a linear multiplier to the image so it appears more or less bright, 0% will turn the full black, 100% leaves the image unchanged, and over 100% gives the best results;
  • contrast — this function adjusts the contrast of the image, the 0% value will make the image completely gray, the 100% value leaves the original image unchanged, and the values that go over 100%, yields results with a higher contrast;
  • drop-shadow — this function creates a shadow effect on the image; the function accepts shadow parameter, and parameter parameters are as follows:
    • H-shadow – is required and sets the shadow offset horizontally; negative values place the shadow to the left of the image
    • V-shadow – is necessary and sets the pixel value for the shadow on the vertical; the negative values move the shadow over the image
    • Color – is optional and, if not specified, the color is dictated by the browser in question, basically adds a certain color to the shadow
    • Spread – is optional and must necessarily be expressed in pixels, the positive values make the shadow higher and the negative values diminish, this is a fourth value <length>
  • grayscale — this function converts the image into grayscale, the 0% value leaves the picture unchanged, and the 100% value makes the full grayscale picture, the interpolation value is 0
  • invert — this function inverts the samples from the original image, the 0% value leaves the image intact, while the 100% value completely inverts the image; the value for interpolation is 0
  • saturate — this function saturates the input image, the 0% value is completely unsaturated, while the 100% value leaves the image intact, unchanged, the value for interpolation is 1
  • hue-rotate — this function produces a shade of the image; a value of 0 degrees leaves the image intact, the value for interpolation is 0, and the maximum admissible value is 360 degrees
  • opacity — this function applies opacity to the image, where the 0% value applies total transparency and the 100% value leaves the image intact, the interpolation value is 1, and the negative values are not allowed
  • sepia — this function transforms the image into sepia, the value of 0% leaves the image intact, while the 100% value changes the full image in the sepia, the value for interpolation is 0, and the negative values are not premised
  • url — this function inserts the location of the XML file that has an SVG filter and may include an anchor for the filter element

When you use invalid parameters for any function, it does not return anything. There are exceptions, that I mentioned, that take a value expressed as a percentage and turn the value into a decimal place.

The initial image that will be used during this article looks like this:

The first CSS filter property from this article will display a saturated image:

<html>
<head>
<style>
img {
    filter: saturate(300%);
}
</style>
</head>
<body>
<h2>CSS Filter Property - saturate</h2>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

CSS Filter Property: Saturate

An example of using the CSS filter property is the grayscale option:

<html>
<head>
<style>
img {
        filter: grayscale(80%);
}
</style>
</head>
<body>
<h2>CSS Filter Property - grayscale</h2>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

CSS Filter Property: Grayscale

The next example of the CSS filter property shows the sepia filter:

 <html>
<head>
<style>
img {
    filter: sepia(70%);
}
</style>
</head>
<body>
<h2>Sepia Filter - filter: sepia(70%);</h2>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

The code below displays an example for the blur filter:

<html>
<head>
<style>
img {
     filter: blur(2px);
}
</style>
</head>
<body>
<h2>CSS Filter Property - blur</h2>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

CSS Filter Property: Blur

The next example displays how the opacity filter works:

<html>
<head>
<style>
img {
    filter: opacity(30%);
}
</style>
</head>
<body>
<h2>CSS Filter Property - opacity</h2>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

CSS Filter Property: Opacity

Next, it is an example that uses the invert CSS filter property:

<html>
<head>
<style>
img {
     filter: invert(100%);
}
</style>
</head>
<body>
<h2>CSS Filter Property - invert</h2>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

CSS Filter Property: Invert

The brightness filter example is next:

<html>
<head>
<style>
img {
     filter: brightness(1.1);
}
</style>
</head>
<body>
<h2>CSS Filter Property - brightness</h2>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

CSS Filter Property: Brightness

An example of the contrast filter:

<html>
<head>
<style>
img {
     filter: contrast(180%);
}
</style>
</head>
<body>
<h2>CSS Filter Property - contrast</h2>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

CSS Filter Property: Filter: Contrast

Another interesting filter, that creates different amazing image effects, is the CSS hue-rotate filter, which is shown below using three different settings:

<html>
<head>
<style>
img {
    filter: hue-rotate(90deg);
}
</style>
</head>
<body>
<h2>CSS Filter Property - filter: hue-rotate</h2>
<img src=".jpg" width="400" height="240"/>
</body>
</html>

Some example of the shadow CSS property filter are shown below:

<html>
<head>
<style>
img {
    filter: drop-shadow(30px 10px 4px #58D68D);
}
</style>
</head>
<body>
<h3>CSS Filter Property - filter: drop-shadow  </h3>
<h5>filter: drop-shadow(30px 10px 4px #58D68D);</h5>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

The example below combines two filters, the hue-rotate and saturate to obtain the infrared image effect:

<html>
<head>
<style>
img {
	filter: hue-rotate(180deg) saturate(4);
}
</style>
</head>
<body>
<img src="figure.jpg" width="400" height="240"/>
</body>
</html>

Conclusion

The examples above can be used in your own activities or you can use them as templates to create other spectacular effects. I hope the article will come to your aid when you want to add beautiful graphic effects to your project.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured