Free CSS Blend Mode Previewer
Preview how CSS mix-blend-mode works with two colors. Choose a background color and overlay color, then select from 16 blend modes: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. Copy the generated CSS. All processing happens locally.
How to Use
- Choose background and overlay colors
- Select a blend mode from the dropdown
- Preview the effect live
- Copy the CSS
Privacy
All processing happens locally. No data is transmitted.
Last reviewed: July 2026.