The CSS filter and blend modes allow you to easily apply visual effects to your web page.

Filters are a set of predefined CSS functions used to adjust the rendering of images or other HTML elements.

While blend modes determine how an element should blend with its background or neighboring elements.

woman with a computer on the lap. grayscale & sepia effects applied

Each filter property is a CSS function, thatworks similarly to a CSS variablefunction.

It accepts a parameter to specify how much the filter should affect the styled element.

Some of these filters work much better with others when used the right way.

woman with laptop on the lap. invert & saturate effects applied

Here are examples of combining CSS filters to achieve different visual effects on an image element.

Grayscale and Sepia

Thegrayscale()filter removes all color information from an image or text element.

Thesepia()filter applies a sepia-tone effect to an image or text element.

woman with a computer on the lap. hue-rotate & contrast effects applied

The filter also takes a value between 0 and 1.

Invert and Saturate

Thesaturate()filter increases or decreases the saturation of an image or text element.

This means that the filter changes the brightness and saturation levels of the element while maintaining the hue.

woman with laptop on the lap. brightness & blur effects applied

This code inverts the colors of the image and increases the saturation by 75%.

Combining thehue-rotate()andcontrast()filters can create a vibrant and colorful effect on your images.

Hue-rotate can accept a value ofdeg,grad,rad, orturn.

hello world text overlaid over a Woman with a computer. dropshadow & opacity effects applied to text

The above code rotates the hue of the image by 10 degrees and raises the contrast.

Brightness and Blur

The brightness and blur filters are very much self-explanatory.

The first adjusting the brightness of your image, and the latter controlling the level of blur applied.

Welcome text blended night sky light with mix blend mode

Combining thebrightness()andblur()filters can create a dreamy and soft effect on your images.

The above code decreases the brightness by0.8 (80%)and applies a5pxblur effect to the image.

Meanwhile, the opacity filter controls the transparency of an element.

a picture of a woman with combine filter and blend mode applied

Combining thedrop-shadow()andopacity()filters can create a subtle effect on your text elements.

The shadow color is specified as beige.

An opacity of 70% is also specified.

You could also use themix-blend-modeto blend the content of a given element with the content of its direct parent.

Themix-blend-modeis typically used to blend foreground content such as text, shapes, or images.

Here’s an example of usingmix-blend-modeto blend text and image.

It increases the brightness by 150%, while hue-rotatewill invert the colors of the image by 180 degrees.

Then also, a drop shadow is applied.