Upload any photo and preview CSS mix-blend-mode overlays live—download a matching PNG or copy CSS, Tailwind, and React code. Free, browser-local, no signup.
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 overlay color (or gradient), opacity, and mix-blend-mode on a div over your image—the same DOM structure exported in CSS. PNG download captures that composited frame with html2canvas so output matches what you see.
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.
Use Download PNG for a flattened image matching the preview, or switch to Copy code for CSS, Tailwind, or React overlay snippets.
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 | — |
| Merge two photos into one | Use a dedicated image blender (e.g. PineTools) | Not supported here—single photo + CSS overlay only |
| 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 |
Use Image Blend Mode Tool when a sibling overlay div should interact with a photo via mix-blend-mode. Use CSS Gradient Generator, Clip-Path, or CSS Filter tools when the job is multi-stop backgrounds, shaped masks, or direct image filters instead.
| 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. Pick from the visual grid with live preview on your image.
No—this tool previews a CSS color or gradient overlay on one photo (mix-blend-mode), not pixel-level merging of two separate images like Canva or PineTools image blenders. Upload one image, tune the overlay, then download PNG or copy CSS. For shaped masks or filters on the image itself, try Clip-Path Generator or CSS Filter Generator.
Yes—the PNG export captures the same CSS mix-blend-mode compositing as the live preview in your browser. Upload the image file directly for best results; remote URLs may fall back to a canvas export if cross-origin rules block capture.
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.
Advertisement
Reviewed by EverydayTools Editorial Team on 2026-06-02.
Preview & download PNG
Upload any photo, tune the overlay, and save a flattened image that matches the live preview.
16 CSS blend modes
Multiply, screen, overlay, color, luminosity, and more—pick from a visual grid with instant feedback.
Copy CSS · Tailwind · React
Export production-ready code for dev handoff. Everything runs locally—no account or server upload.
JPEG, PNG, WebP, or GIF — processed locally (max 12 MB).
Blend mode
Tip: use ← → arrow keys to cycle modes when focus is not in an input.
Sample photo — PNG export matches this preview
or drop an image anywhere on this card.
Save a flattened PNG that matches the live CSS preview (same mix-blend-mode compositing).