How to Use CSS Filters and Blend Modes to Create Visual Effects


HomeHome / Blog / How to Use CSS Filters and Blend Modes to Create Visual Effects

May 11, 2023

How to Use CSS Filters and Blend Modes to Create Visual Effects

The CSS filter and blend modes are powerful tools to easily apply stunning

The CSS filter and blend modes are powerful tools to easily apply stunning visual effects to your web page without the need for complex code.

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.

You apply CSS filters using the filter property and a property specifying the applied effect type. Each filter property is a CSS function, that works similarly to a CSS variable function. It accepts a parameter to specify how much the filter should affect the styled element.

There are 10 CSS filter functions available to style your HTML element:

You can use these filters individually or in combination to create unique styles and enhance the appearance of your HTML elements.

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

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

The grayscale() filter removes all color information from an image or text element. The filter takes a value between 0 and 1, with 0 meaning the original color and 1 being the full grayscale effect.

The sepia() filter applies a sepia-tone effect to an image or text element. The filter also takes a value between 0 and 1.

For example:

Combining grayscale() at 14% and sepia() at 30% can create a vintage or retro effect on your image.

The saturate() filter increases or decreases the saturation of an image or text element. The filter takes a value between 0 and infinity, with 1 being the original color and higher values increasing saturation.

The invert() filter will invert the colors of an image or text element by flipping the hue of every color present by 180 degrees on the color wheel. This means that the filter changes the brightness and saturation levels of the element while maintaining the hue.

For example:

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

The hue-rotate() filter rotates the hues of an image or text element, which means that it changes the overall color of the element while maintaining the brightness and saturation levels. The amount of rotation can be specified in degrees, with 0 representing the original color and 360 representing a full rotation back to the original color.

Combining the hue-rotate() and contrast() filters can create a vibrant and colorful effect on your images.

For example:

Hue-rotate can accept a value of deg, grad, rad, or turn. The above code rotates the hue of the image by 10 degrees and raises the contrast.

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.

Combining the brightness() and blur() filters can create a dreamy and soft effect on your images.

For example:

The above code decreases the brightness by 0.8 (80%) and applies a 5px blur effect to the image.

A drop shadow effect is a visual effect in which an element appears to cast a shadow on the surface behind it, giving the illusion of depth and dimensionality. Drop shadows are often applied to text or images to create a sense of separation between the element and the background.

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

Combining the drop-shadow() and opacity() filters can create a subtle effect on your text elements.

For example:

In this example, the drop shadow is positioned 10 pixels to the right and 9 pixels to the bottom, with a blur radius of 9 pixels. The shadow color is specified as beige. An opacity of 70% is also specified.

CSS blend modes control how an element's content blends with the background or other elements, allowing for creative composition effects.

Some of the most popular use cases for CSS blend modes include:

The two most common blend modes are background-blend-mode and mix-blend-mode. Both properties share the same 15 values: normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color-burn, luminosity, difference, hard-light, soft-light, exclusion, and hue.

You should use background-blend-mode when you have multiple background layouts, like background images on an element, and want them all to blend into each other.

You could also use the mix-blend-mode to blend the content of a given element with the content of its direct parent. The mix-blend-mode is typically used to blend foreground content such as text, shapes, or images.

Here's an example of using mix-blend-mode to blend text and image.



The difference blend mode calculates the absolute difference between the color values of the text and the underlying dark image.

In this scenario, the text color would interact with the dark background, resulting in a high contrast effect.

You can combine filters and blend modes to create even more visually interesting effects. By using both properties together, you can achieve unique and creative results that are hard to replicate with other CSS properties.

Here's an example that combines the filter and blend mode to create a more complex effect:

This code combines the filters; brightness, hue-rotate, drop-shadow, and a mix-blend-mode of value screen to the image. It increases the brightness by 150%, while hue-rotate will invert the colors of the image by 180 degrees.

Then also, a drop shadow is applied. Lastly, the screen value for the blend mode will combine the colors of the image with the underlying background, resulting in an effect where lighter colors are intensified, and darker colors are blended with the background.

You have learned about the different types of CSS filters and how can you apply them to your HTML elements. By using various filter functions such as blur, contrast, and hue-rotate, you can modify the appearance of your images. You have also seen examples of blend modes in action and how they can be used to create unique designs.

If you experiment more with these techniques, you can add an extra level of visual interest to your designs.

Noble Okafor is a skilled software engineer with over 3 years of navigating the programming field. He has a passion for building optimized JavaScript, native and cross-platform mobile and web software solutions. He strives to document his knowledge and lessons through his technical articles with over a year of experience in writing. The primary focus and aim of these articles is to simplify the complexities around software engineering topics.

filter MAKEUSEOF VIDEO OF THE DAY SCROLL TO CONTINUE WITH CONTENT blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() saturate() sepia() grayscale() sepia() grayscale() sepia() saturate() invert() hue-rotate() hue-rotate() contrast() deg grad rad turn brightness() blur() 0.8 (80%) 5px drop-shadow() opacity() Creating gradients Adding texture Adjusting colors background-blend-mode mix-blend-mode background-blend-mode mix-blend-mode mix-blend-mode mix-blend-mode difference brightness hue-rotate drop-shadow mix-blend-mode screen ue-rotate screen