Preview all CSS mix-blend-mode and background-blend-mode options on two layered images in real time.
This tool stacks two images you load locally and lets you flip through every mix-blend-mode and background-blend-mode value from a dropdown, updating the composite instantly because it applies the real CSS property to live layers rather than simulating the math in JavaScript. What trips people up is the difference between the two properties: mix-blend-mode blends an element against the backdrop formed by content stacked beneath it within its stacking context, while background-blend-mode only blends layers within one element's own background stack, so a mode that looks identical here can render differently once copied into a page with other content behind it or a different stacking/isolation context.
A concrete input and expected output from the current implementation.
Input
Base layer: solid red square (#FF0000). Top layer: solid blue square (#0000FF). Mode: multiply.
Expected output
Composite renders solid black (#000000).
Multiply computes each channel as base times blend; red contributes zero in the green and blue channels, blue contributes zero in the red and green channels, so every resulting channel is zero.
Selecting a mode sets the actual mix-blend-mode or background-blend-mode CSS value on the layered elements, so the preview is the browser's own compositing output rather than an approximation. Switching modes swaps the property and the browser repaints immediately, which also means the result reflects whatever that specific browser engine actually does with the spec's blend formulas.
The previewer keeps mix-blend-mode and background-blend-mode as separate contexts: one blends a top image against a bottom one as stacked elements, the other blends two images as background layers within a single element. You load or swap images into each slot and switch layer order, then compare how the same nominal mode reads in each context.
No. The tool runs entirely in the browser; loaded images are read locally to render the composite and are never sent to a server.
They blend different things. mix-blend-mode blends the element against the backdrop formed by whatever is stacked beneath it within the same stacking context, and an isolate or a new stacking context can limit what that backdrop includes, while background-blend-mode blends only the background layers inside one element. The per-mode formula is the same, but what counts as the backdrop differs between the two.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.