Layer two colors, gradients or images and preview every CSS mix-blend-mode value live, then copy the ready-to-use CSS.
🔒 Uploaded images stay on your device and are never uploaded.
Choose a color, gradient or your own uploaded image for the base and top layer. Use the arrows or click any thumbnail to preview all 16 CSS mix-blend-mode values against your exact layers, or turn on auto-cycle to watch them all in sequence. When you find the effect you want, copy the generated CSS, which includes the top layer's background and the chosen blend mode.
Preview all 16 standard CSS blend modes, from multiply and screen to hue and luminosity.
Mix and match flat colors, two-stop gradients or your own uploaded images for either layer.
Uploaded images are rendered locally with object URLs and never leave your device.
mix-blend-mode controls how an element's content blends with the content and background behind it, similar to layer blend modes in image editing software.
CSS supports normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.
Yes. Upload an image for either layer and it blends with the layer beneath it exactly like it would with any other element.
mix-blend-mode blends a whole element with everything behind it, while background-blend-mode only blends an element's own background layers with each other.
Most current browsers support mix-blend-mode well, but always check your target audience and provide acceptable plain layering as a fallback for very old browsers.