How to Use CSS Filters and Blend Modes to Create Visual Effects
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.
Using CSS Filters
You apply CSS filters using thefilterproperty and a property specifying the applied effect type. 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.
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.
1. Grayscale and Sepia
Thegrayscale()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.
Thesepia()filter applies a sepia-tone effect to an image or text element. The filter also takes a value between 0 and 1.
For example:
Combininggrayscale()at 14% andsepia()at 30% can create a vintage or retro effect on your image.
2. Invert and Saturate
Thesaturate()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.
Theinvert()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.
This code inverts the colors of the image and increases the saturation by 75%.
3. Hue-Rotate and Contrast
Thehue-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 thehue-rotate()andcontrast()filters can create a vibrant and colorful effect on your images.
Hue-rotate can accept a value ofdeg,grad,rad, orturn. The above code rotates the hue of the image by 10 degrees and raises the contrast.
4. 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.
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.
5. Drop-Shadow and Opacity
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 thedrop-shadow()andopacity()filters can create a subtle effect on your text elements.
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.
Using CSS Blend Modes
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 arebackground-blend-modeandmix-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 usebackground-blend-modewhen you have multiple background layouts, like background images on an element, and want them all to blend into each other.
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.
Thedifferenceblend 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.
Combining Filters and Blend Modes
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 amix-blend-modeof valuescreento the 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. Lastly, thescreenvalue 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.
Mastering Filters and Blend Modes
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.
These tips will help you use CSS to its full potential.
You don’t need to fork out for expensive hardware to run an AI on your PC.
You’re not getting the most out of what you pay for iCloud+.
Unlock a world of entertainment possibilities with this clever TV hack.
Turn these settings on, and your iPhone will be so much better than before.
Sometimes the smallest cleaning habit makes the biggest mess.
