Generator Tools

CSS Mix-Blend-Mode Tester

Preview every CSS mix-blend-mode value live in your browser. See multiply, screen, overlay, hue, color, and 12 more modes side by side. Free, no signup.

View

Switch between a single focused preview or the full 16-mode grid.

Backdrop layer

The layer underneath. Blend modes combine the source foreground with this backdrop.

Foreground (source) layer

The layer with mix-blend-mode applied. Pick a subject that matches how you intend to use the blend.

Sample text

Text color

Live preview

mix-blend-mode: multiply

BLEND

Multiplies channels: result is always darker. White is a no-op, black wins.

CSS output

.blend-stage {
  background: linear-gradient(135deg, #ff6b6b 0%, #ffd93d 35%, #ff9a3c 70%, #c2185b 100%);
}

.blend-layer {
  color: #ffffff;
  mix-blend-mode: multiply;
}

Tailwind class

mix-blend-multiply

Tailwind v3 and later ships utilities for every standard mix-blend-mode value. Apply this class to the source element, not the stage.

Blend mode reference

The CSS Compositing and Blending Level 1 spec defines two families. Separable blends combine each color channel independently. Non- separable blends work in HSL space and treat hue, saturation, and luminosity as a unit.

normal

separable

Paints the source on top of the backdrop with no blending. The default.

multiply

separable

Multiplies channels: result is always darker. White is a no-op, black wins.

screen

separable

Inverse multiply: result is always lighter. Black is a no-op, white wins.

overlay

separable

Multiply for dark backdrop pixels, screen for light. Boosts contrast.

darken

separable

Per-channel min of source and backdrop. Keeps only the darker components.

lighten

separable

Per-channel max of source and backdrop. Keeps only the lighter components.

color-dodge

separable

Brightens the backdrop using the source as the dodge mask. Whites blow out.

color-burn

separable

Darkens the backdrop using the inverted source as the burn mask. Blacks crush.

hard-light

separable

Like overlay but with source and backdrop swapped. Strong, punchy contrast.

soft-light

separable

A softer overlay: gentle lighten or darken without the harsh edges.

difference

separable

Absolute per-channel difference. Equal colors yield black; opposites yield bright.

exclusion

separable

Like difference but with lower contrast. Equal colors stay black.

hue

non-separable

Source hue with backdrop saturation and luminosity. Re-tints the backdrop.

saturation

non-separable

Source saturation with backdrop hue and luminosity. Adjusts vibrance only.

color

non-separable

Source hue and saturation with backdrop luminosity. Classic colorize.

luminosity

non-separable

Source luminosity with backdrop hue and saturation. Inverse of color.

How to use

Pick a backdrop layer (warm gradient, cool gradient, vivid conic, photo-like, checker, or a solid color you choose).
Pick a foreground subject (text, solid block, gradient block, or an emoji) and customise its color, gradient, or content.
Use the Single mode view to focus one blend mode in a large preview, or switch to All 16 modes to scan every blend mode side by side.
Click any tile in the grid to focus that mode and read its description and family (separable or non-separable).
Copy the full CSS rule, copy the Tailwind mix-blend utility class, or copy a single mode name from any tile and paste it into your project.

About this tool

CSS Mix-Blend-Mode Tester is an in-browser playground for the CSS mix-blend-mode property defined by the Compositing and Blending Level 1 specification. Pick a backdrop (warm gradient, cool gradient, vivid conic wheel, photo-like radial gradient, a checker pattern, or a single solid color you control), pick a foreground subject (large headline text, a solid color block, a custom linear gradient block, or any emoji glyph), and either focus a single blend mode in a large preview or scan every mode side by side in the 16-tile grid. All sixteen standard blend modes are supported: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. Each preview uses the same mix-blend-mode value the tool emits in the copy panel, so the output is always exactly what the preview shows. The CSS panel produces a paste-ready rule with the stage background and the source layer's color, background, and mix-blend-mode declarations; the Tailwind panel emits the standard mix-blend-{mode} utility class that ships with Tailwind v3 and later. The grid view doubles as a reference: every tile shows the mode's family (separable per-channel blends like multiply and screen, or non-separable HSL blends like hue and color) and clicking any tile focuses it in the single view for closer inspection. Everything runs locally, no images are uploaded, and no asset is fetched from a third party, so designers, frontend developers, and SEO teams auditing a brand page can iterate quickly without exposing private mockups.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Mix-Blend-Mode Tester

How to use

About this tool

You may also like

CSS Filter Generator

CSS Gradient Generator

CSS Glassmorphism Generator

CSS Backdrop Filter Generator

Color Mixer

Image Filters