CSS Blend Mode Generator
Preview mix-blend-mode and background-blend-mode effects.
Live preview
CSS
mix-blend-mode: multiply;
Blending layers in CSS
Blend modes control how an element's colors mix with what's behind it — the same math Photoshop uses. mix-blend-mode blends an element with the elements beneath it, while background-blend-mode blends an element's own background layers. Modes like multiply darken, screen lightens, and overlay boosts contrast. Drag the colors to explore, then copy the value. Runs locally in your browser.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.