CSS Blend Mode Generator

CSS Blend Mode

CSS Blend Mode is a powerful feature that allows you to define how an element’s content blends with the content of the background or other elements behind it. It is mainly used for creative visual effects, photo overlays, and modern UI designs. By applying blend modes, you can achieve looks similar to those found in graphic design tools like Photoshop or Illustrator directly with CSS.

Types of Blend Modes

There are two main CSS properties related to blend modes:

mix-blend-mode - defines how an element's content blends with the background or the elements underneath it.
background-blend-mode - defines how multiple background layers (colors, gradients, and images) blend with each other within the same element.

Basic Syntax

You can apply a blend mode using the mix-blend-mode property like this:

.element {
  mix-blend-mode: multiply;
}

Or use background-blend-mode when combining multiple backgrounds:

.element {
  background-image: url('image.jpg'), linear-gradient(to right, #ff0000, #0000ff);
  background-blend-mode: overlay;
}

Common Blend Modes

CSS supports a variety of blend modes inspired by digital compositing in design tools. Here are some of the most commonly used ones:

normal - the default, no blending occurs.
multiply - darkens the base color by multiplying it with the blend color.
screen - brightens the base color by inverting, multiplying, and inverting again.
overlay - combines multiply and screen to preserve highlights and shadows.
darken - keeps the darker of the two colors.
lighten - keeps the lighter of the two colors.
color-dodge - brightens the base color to reflect the blend color.
color-burn - darkens the base color to reflect the blend color.
difference - subtracts the darker color from the lighter color.
exclusion - similar to difference, but with lower contrast.

Practical Example - Image Overlay

Let's say you want to overlay text or a gradient on an image while keeping the image visible beneath:

.container {
  background-image: url('photo.jpg');
  background-color: rgba(255, 0, 0, 0.5);
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
  height: 400px;
}

Advanced Example - Layered Elements

You can use mix-blend-mode to make elements interact with their background dynamically:

.text {
  color: white;
  font-size: 4rem;
  mix-blend-mode: difference;
  background: black;
  padding: 50px;
}

Combining Blend Modes with Other CSS Effects

Blend modes can be combined with filters, gradients, and even animations to produce visually rich and interactive experiences. For instance, you can animate the opacity or background color while keeping the blend mode active to create smooth transitions.

.image {
  background: url('image.jpg');
  background-size: cover;
  mix-blend-mode: overlay;
  filter: brightness(0.8) contrast(1.2);
  transition: all 0.5s ease;
}

.image:hover {
  filter: brightness(1.2) contrast(1.5);
}

Browser Support

Most modern browsers support mix-blend-mode and background-blend-mode, including Chrome, Edge, Firefox, and Safari. However, it is good practice to provide fallback colors or backgrounds for older browsers that might not support blending.

Conclusion

CSS Blend Mode is a versatile tool for designers and developers who want to bring advanced visual blending effects to the web without using image editing software. By experimenting with different modes and combinations, you can create stunning visual compositions that make your designs stand out.

Last update: 13. 08. 2025.