CSS Blend Mode Generator
Generate CSS mix-blend-mode and background-blend-mode effects for images, text and colour overlays. Preview and copy the CSS.
Last reviewed by the Radiatus Cloud team
Generate CSS blend-mode effects for overlays and duotone looks.
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Blend colours and images with CSS
Blend modes control how an element's colours mix with what is behind it, the same concept found in image editors. This generator produces CSS for both mix-blend-mode, which blends an element with the layers beneath it, and background-blend-mode, which blends an element's background layers together. You choose from popular modes such as multiply, screen, overlay and difference, and an overlay colour, and the tool outputs both techniques.
The multiply mode darkens, screen lightens, and overlay adds contrast, among many creative possibilities.
Creative image effects
Blend modes enable striking effects without image editing: tinting photos with a brand colour, creating duotone looks, making text interact with backgrounds, and producing colour overlays for hero sections. Because the effect is applied in the browser, a single image can be recoloured dynamically by changing the overlay colour.
Different modes suit different images, so experiment to find the right look, and ensure any text over a blended image stays legible. All generation happens locally in your browser.
Notes on the generated code
Because the css blend mode generator runs entirely in your browser, you can experiment with every option and watch the generated code update instantly, with nothing uploaded and no account required. The output is clean, standards-based CSS that works in any project without external libraries or a build step, so you can paste it straight into your stylesheet and refine it further by hand whenever you need to.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
What is the difference between the two blend properties?
mix-blend-mode blends an element with the layers behind it, while background-blend-mode blends an element\'s own background layers together.
What does multiply mode do?
Multiply darkens by combining colours, which is useful for tinting images and creating shadows and duotone effects.
Can I recolour a photo with blend modes?
Yes. Overlaying a colour with a blend mode tints the image in the browser, so you can change the look by changing the overlay colour.
Will text stay readable over a blend?
It depends on the result. Check contrast after blending and adjust the mode or colour so any overlaid text remains legible.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Choose the blend mode and colours, then copy the CSS.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.