CSS Blend Modes and Filters

Introduction CSS Blend Modes and Filters provide advanced image and element styling, allowing developers to create unique visual effects with ease. 1. CSS Blend Modes Blend modes determine how layers interact with each other, similar to Photoshop blending. mix-blend-mode Blends an element with its background. background-blend-mode Applies blend mode to background layers. Common Blend Modes: […]

  • Post author:
  • Post category: CSS
  • Reading time: 21 mins read
  • Post last modified: April 3, 2025

Introduction

CSS Blend Modes and Filters provide advanced image and element styling, allowing developers to create unique visual effects with ease.

1. CSS Blend Modes

Blend modes determine how layers interact with each other, similar to Photoshop blending.

mix-blend-mode

div {
    mix-blend-mode: multiply;
}
CSS

Blends an element with its background.

background-blend-mode

div {
    background-blend-mode: overlay;
}
CSS

Applies blend mode to background layers.

Common Blend Modes:

  • multiply
  • screen
  • overlay
  • darken
  • lighten

2. CSS Filters

Filters apply graphical effects like blur, brightness, and contrast.

Basic Filter Usage

img {
    filter: blur(5px);
}
CSS

Applies a 5px blur to an image.

Multiple Filters

img {
    filter: brightness(120%) contrast(90%);
}
CSS

Increases brightness and adjusts contrast.

Grayscale Effect

img {
    filter: grayscale(100%);
}
CSS

Converts an image to black and white.

3. Combining Blend Modes and Filters

div {
    filter: sepia(60%);
    mix-blend-mode: soft-light;
}
CSS

Creates a vintage effect with sepia and blending.

Conclusion

CSS Blend Modes and Filters enable stunning effects without extra images, enhancing modern web design.

Tags:

Leave a Reply