Image Overlay & Blend Mode Tool

What Is mix-blend-mode?

mix-blend-mode is a CSS property that controls how an element's content blends with the content behind it. When applied to a semi-transparent overlay on an image, it creates color grading, tints, and duotone effects. The overlay element sits on top of the image and blends based on the selected mode (multiply, overlay, soft-light, etc.). Each mode uses a different compositing formula; multiply darkens, screen lightens, overlay combines both.

How CSS Blend Modes Work

Blend modes compute the final pixel color from a source (the blended element) and a backdrop (the content behind). multiply multiplies source and backdrop RGB values; screen inverts, multiplies, then inverts again for a lightening effect. overlay multiplies dark areas and screens light areas. Use a container with position: relative and an overlay with position: absolute; inset: 0 so the overlay covers the image. Pair overlays with gradients from our CSS Gradient Generator for richer effects.

mix-blend-mode vs background-blend-mode

mix-blend-mode blends the entire element (including its content) with the backdrop. background-blend-mode blends multiple background layers (images, gradients, colors) within a single element. Use mix-blend-mode when you have a separate overlay div on top of an image. Use background-blend-mode when stacking backgrounds directly: background: url(img.jpg), linear-gradient(...); background-blend-mode: overlay;. The latter avoids an extra DOM element but gives less flexibility for positioning.

Common Image Overlay Use Cases

Hero sections use dark overlays (multiply or darken) to improve text contrast. Gallery cards use soft tints (soft-light, overlay) for branding. Duotone effects use color or luminosity with a solid overlay. Overlays can be combined with clip-path for shaped masks; see the Clip-Path Generator. Use a Box Shadow Generator for cards that hold overlay images.

Best Blend Modes for Photos

multiply darkens and adds depth; ideal for dark overlays. screen lightens; use with light overlays. overlay boosts contrast and works well for vintage or cinematic looks. soft-light is subtler, good for warm tints. color applies the overlay's hue while preserving luminance; ideal for duotones. luminosity does the inverse. Experiment with opacity (0.3 to 0.6 typically) to control intensity.

Browser Support & Fallbacks

mix-blend-mode is supported in all modern browsers. Use @supports (mix-blend-mode: overlay) to provide a fallback: a semi-transparent overlay without blend mode will still darken or tint the image, just without the precise compositing. For critical hero images, ensure the underlying image and text contrast work even without the overlay.

Common Blend Mode Mistakes

Applying mix-blend-mode to the image itself blends it with the page background instead of an overlay. Use a wrapper with the image and a sibling overlay div. Forgetting position: relative on the container breaks absolute positioning. Using full opacity (1) with dark blend modes can make images nearly black; keep opacity around 0.3 to 0.6. Blending white or black overlays with normal mode ignores the blend and only changes opacity.