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 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:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()

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

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:

        img {
  filter: grayscale(14%) sepia(30%);
}

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

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

2. Invert and Saturate

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:

        img {
  filter: invert(30%) saturate(75%);
}

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

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

3. Hue-Rotate and Contrast

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:

        img {
  filter: hue-rotate(10deg) contrast(150%);
}

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.

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

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 the brightness() and blur() filters can create a dreamy and soft effect on your images.

For example:

        img {
  filter: brightness(0.8) blur(5px);
}

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

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

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 the drop-shadow() and opacity() filters can create a subtle effect on your text elements.

For example:

        .text-effect {
  transform: translate(-50%, -50%);
  color: black;
  drop-shadow: 10px 9px 9px beige;
  opacity: 70%;
}

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.

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

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:

  • Creating gradients: Blend modes can be used to create several CSS background gradients that transition between colors, giving you an easy and efficient way to add depth and dimension to your designs.
  • Adding texture: You can also use blend modes to add texture to backgrounds, images, and other elements on a page. This can be a great way to create a unique look and add visual interest to otherwise plain elements.
  • Adjusting colors: With blend modes, you can adjust the colors of elements on a page, including adjusting background colors. This will allow you to easily create effects such as color overlays or tinted images.

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.

HTML:

        <div class="container">
      <img
        src="https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
        class="background-image"
      />
      <div class="content">
        <h1>Welcome</h1>
        <p>Hello User!</p>
      </div>
</div>

CSS:

        .container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  mix-blend-mode: difference;
}

h1 {
  font-size: 60px;
  color: white;
}

p {
  font-size: 40px;
  color: white;
}

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.

Welcome text blended night sky light with mix blend mode

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:

        .my-element {
  filter: brightness(150%) hue-rotate(180deg) drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
  mix-blend-mode: screen;
}

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.

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

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.