Blend Mode Simulator

See how two colors combine under various CSS blend modes (multiply, screen, overlay, etc.). Everything runs on your device — fast, free, and private.

The result will appear here…
or press Ctrl+Enter

Everything runs in your browser. Your data is never sent to our servers.

728 × 90Ad Space AvailablePlace your ad here

Example

Example Input

#ff8800, #0088ff

Example Output

multiply #003700 · screen #ffffff · overlay …

How to Use

  1. 1Enter a color or data in the Input field.
  2. 2Set "More settings" if needed, then click Run (or Ctrl+Enter).
  3. 3Copy the result — a swatch is shown next to each value.

About Blend Mode Simulator

The Blend Mode Simulator computes the resulting color of two colors (top & bottom) for common blend modes: multiply, screen, overlay, darken, lighten, and difference.

It helps predict the effect of CSS mix-blend-mode/background-blend-mode without trial and error in the browser.

FAQ

Is my data sent to a server?

No. Blend Mode Simulator runs entirely in your browser — your data never leaves your device.

Related Tools

Related Categories