Preview CSS mix-blend-mode overlays on photos with live controls—copy plain CSS, Tailwind classes, or React styles. Everything runs locally with no server upload.
mix-blend-mode tells the browser how a semi-transparent overlay blends with the image behind it—multiply darkens, screen lightens, overlay boosts contrast, and color modes create duotone effects.
CSS mix-blend-mode controls how an element composites with the pixels underneath. On hero images and cards, designers stack a positioned overlay (solid color or gradient) on top of a photo and pick a blend mode so the tint interacts with luminance and hue instead of only changing opacity.
Unlike background-blend-mode, which blends layers inside one element's background property, mix-blend-mode applies to the whole overlay element—including its background—against the backdrop (typically the image in a relative container). Pair position: relative on the wrapper, position: absolute; inset: 0 on the overlay, and tune opacity between roughly 30% and 60% for cinematic looks without crushing detail.
This tool previews all standard blend modes live on your uploaded image and exports copy-ready CSS, Tailwind utility classes, and React inline style objects. Processing stays in your browser; images are not uploaded to a server.
Concise answers for common searches — definitions, steps, and comparisons.
Use it when a separate overlay layer (solid color or gradient) should interact with photo luminance—hero darkening, brand tints, or duotone effects. Skip it when a simple rgba overlay without compositing is enough; blend modes add depth but require correct DOM structure (relative wrapper + absolute overlay).
multiply or darken with a near-black or deep navy overlay at roughly 45–55% opacity. Screen and lighten are for brightening; color and luminosity are for stylized grading, not maximum text contrast.
Opacity-only stacks a translucent color on top—predictable but flat. mix-blend-mode recomputes pixels with the backdrop (multiply darkens lights, screen lifts shadows). Choose blend when you want cinematic interaction; choose opacity when you only need a uniform wash.
The preview applies your overlay color, opacity, and mix-blend-mode as inline styles on an absolutely positioned div over the image. Exported CSS mirrors those values; Tailwind and React snippets are string-built from the same state—no server rendering.
Click Upload image or keep the demo photo. The preview updates instantly as you change overlay color, opacity, or blend mode.
Choose mix-blend-mode from the dropdown (multiply for dark heroes, overlay or soft-light for tints, color for duotones). Adjust the opacity slider—most photo overlays land between 35% and 55%.
Use Hero Dark Overlay, Duotone Blue, or other presets, then tweak the hex color picker for brand alignment.
Copy the generated .overlay rule, Tailwind class string, or React style object into your component. Toggle Show overlay off to compare before/after.
Input
Photo + #0f0f23 overlay at 55% opacity, blend mode multiplyOutput
.overlay { mix-blend-mode: multiply; opacity: 0.55; background-color: #0f0f23; }Multiply darkens mid-tones so headlines stay legible without a flat gray wash. Use position: absolute; inset: 0 on the overlay inside a relative hero container.
Input
Photo + #1e40af overlay at 45% opacity, blend mode colorOutput
Tailwind: mix-blend-color with bg-[#1e40af] and opacity-[0.45]Color mode applies the overlay hue while preserving luminance from the photo—ideal for branded gallery cards and marketing bands.
Common real-world scenarios where this tool saves time.
Dark multiply or darken overlays improve contrast for H1 copy and CTAs on full-bleed photography without replacing the image.
Soft-light or overlay tints unify disparate stock photos under one brand color before shipping CSS to production.
Color and luminosity modes plus warm or cool hex overlays mimic film looks; copy CSS into static sites or React heroes.
Export mix-blend-* utilities with arbitrary bg and opacity values so engineers paste exact classes from design review.
Step-by-step chains that connect related tools for common tasks.
Choose the property and tool that match your layout problem.
| Goal | Use this tool | Use instead |
|---|---|---|
| Overlay on top of a photo | Image Blend Mode Tool | — |
| Stack gradients on one div | CSS Gradient Generator | background-blend-mode |
| Shaped image masks | Clip-Path Generator | clip-path on the image |
| Card elevation without blend | Box Shadow Generator | box-shadow |
| Tailwind utility lookup | Tailwind Cheatsheet | Reference only |
| Related tool | Use this tool when | Use related tool when |
|---|---|---|
| CSS Gradient Generator | You need a solid or gradient overlay div with mix-blend-mode on a photo. | You are building multi-stop gradients as backgrounds, not blending a layer on an img. |
| Clip-Path Generator | The full rectangular image should receive a color grade via overlay blend. | You need non-rectangular masks (circles, polygons) on the image itself. |
| CSS Filter Generator | You want hue/tint interaction via overlay blend modes. | You want blur, brightness, or saturate filters applied directly to the image element. |
Blend against the page background instead of a controlled overlay. Use a wrapper with the image and a sibling overlay div with mix-blend-mode.
Absolute inset: 0 on the overlay will anchor to the wrong ancestor. Set position: relative on the image wrapper.
The photo can turn nearly black. Keep opacity around 0.35–0.6 and preview with Show overlay toggled off to check the base image.
background-blend-mode stacks backgrounds inside one element. mix-blend-mode blends the entire overlay element with content behind it—pick the property that matches your DOM structure.
Likely cause: Overlay applied to the image element itself or opacity set to 0
Fix: Use a sibling overlay div with non-zero opacity. Ensure Show overlay is enabled in the tool and position: absolute; inset: 0 in your layout.
Likely cause: Missing position: relative on the image container
Fix: Wrap the img and overlay in a relative container with overflow: hidden so blending is scoped to the card or hero bounds.
Likely cause: Parent creates a new stacking context or mix-blend-mode is purged
Fix: Confirm mix-blend-{mode} is in your Tailwind safelist if using arbitrary values. Check that no parent sets isolation: isolate unintentionally.
Advertisement
All standard mix-blend-mode keywords: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. The dropdown lists each with live preview on your image.
No. Upload and preview run entirely in your browser. Your photos are not sent to EverydayTools servers—no upload, no storage, and no signup.
Yes—click Download PNG to save a composited image using the same overlay color, opacity, and blend mode as the preview. Export runs locally in your browser; uploaded images are not sent to a server. For production sites, still prefer CSS overlays when you need editable, responsive heroes.
mix-blend-mode blends a separate overlay element (or any element) with pixels behind it—typical for a div on top of an img. background-blend-mode blends multiple background layers (images, gradients) within one element. Use mix-blend-mode when you have a sibling overlay; use background-blend-mode when stacking backgrounds on a single box.
Most hero and card overlays work between 35% and 55% opacity. Multiply and darken modes need less opacity than screen or soft-light. Always check text contrast on top of the blended result, not only the raw photo.
All modern evergreen browsers support mix-blend-mode. For legacy support, provide a fallback: a semi-transparent overlay without blend still tints the image. Use @supports (mix-blend-mode: overlay) to layer enhanced effects when available.
Copy the generated className string—it includes arbitrary background color, opacity, and mix-blend-{mode} utilities. Ensure the overlay is absolute inset-0 inside a relative parent, matching the plain CSS block.
Yes—completely free with no usage limits. Copy CSS as often as you need; everything runs locally in your browser.
Image upload and blend preview run locally in your browser. Photos are not uploaded, logged, or stored on EverydayTools servers.
Exported CSS, Tailwind, and React snippets mirror the live preview values. Verify final heroes in target browsers because stacking contexts can change blend appearance.
For design prototyping and CSS handoff—not a substitute for production image pipelines or accessibility audits of text contrast.
More free tools for the same workflow.
Free CSS clip-path generator — build polygon, circle, and ellipse shapes visually with draggable points and copy the clip-path CSS property instantly. No signup needed.
Free CSS filter generator — create blur, brightness, contrast, grayscale, hue-rotate, and other filter effects with live preview. Copy the CSS filter property. No signup.
Free CSS gradient generator — create linear and radial gradients with custom colors, stops, and directions. Live preview and one-click CSS copy. No signup required.
Advertisement
Reviewed by EverydayTools Editorial Team on 2026-05-21.
Contrast boost—vintage
normal — No blend—opacity onlymultiply — Darkens—hero overlaysscreen — Lightens—bright tintsoverlay — Contrast boost—vintagedarken — Keeps darker pixelslighten — Keeps lighter pixelscolor-dodge — Strong highlightscolor-burn — Deep shadowshard-light — Strong contrastsoft-light — Subtle tintdifference — Inverted contrastexclusion — Softer differencehue — Overlay hue onlysaturation — Overlay saturationcolor — Duotone / brand tintluminosity — Overlay brightnessOriginal
With overlay
.overlay {
position: absolute;
inset: 0;
background-color: #3b82f6;
opacity: 0.50;
mix-blend-mode: overlay;
pointer-events: none;
}