CSS Blend Mode Examples for Modern Web Design

CSS blend modes power four workhorse design effects: duotone photo treatments, brand-color image tints, texture and grain overlays, and knockout text that reveals the image behind it — all achievable with a single blend-mode line and no image editing. Here is where each one earns its place, with the modes and settings that get you there fastest.

Lead with the look you want, then reach for the matching mode in the CSS Blend Mode Generator.

Duotone hero images

Duotones give a photo a bold, on-brand two-color identity. Layer a solid or gradient color over a grayscale image and apply multiply, screen or color. Multiply pushes the shadows into your dark brand color while screen lifts the highlights into a lighter one. Preview the mode over the sample gradients, copy the CSS, and swap in your real image and colors. It is the effect behind countless modern landing pages, done entirely in CSS.

Brand-color photo tints

To make stock imagery feel like it belongs to your brand, tint it. A semi-transparent brand-color layer set to multiply or overlay unifies a gallery of mismatched photos under one consistent hue. Because the tint is CSS, you can theme the same images differently for light and dark modes without exporting new assets.

Texture and grain overlays

Flat designs gain depth with a subtle texture. Place a noise or paper gradient above your content and blend it with overlay or soft-light so the texture interacts with the colors beneath rather than sitting flatly on top. Keep it low-contrast for a tasteful finish.

Knockout and image-fill text

For striking headings, blend text with the layer behind it so the image shows through the letterforms. Using mix-blend-mode with modes like difference or multiply lets large type interact dynamically with a background photo or gradient — an editorial effect that would otherwise need a graphics tool.

Effect-to-mode reference

A repeatable workflow

For every one of these, the process is identical: decide whether you are blending an element with the page (mix-blend-mode) or an element’s own backgrounds (background-blend-mode), flip through modes in the generator until the live preview matches your vision, and copy the CSS. Everything runs in your browser with no image upload, so you can iterate on sensitive brand mockups privately and offline before dropping the code into production.

Try the CSS Blend Mode Generator — free and 100% in your browser.

FAQ

How do I make a duotone image with CSS?

Layer a color over a grayscale image and apply a blend mode like multiply, screen or color. Adjusting the color and mode produces the classic two-tone treatment without any image editor.

Can I tint background photos to match my brand?

Yes. A semi-transparent brand-color layer blended with multiply or overlay recolors any photo, and because it is CSS you can re-theme it for light and dark modes instantly.

How do I make text reveal the image behind it?

Use mix-blend-mode on the text element with a mode such as difference or multiply, positioned over an image or gradient. The letters then interact with the backdrop for a knockout effect.

Do these effects hurt performance?

Blend modes are GPU-composited and generally cheap, but heavy stacking of blended layers on large areas can add cost. Test on real devices and keep the number of blended layers modest.

Related free tools

• CSS Gradient Generator — build the color layers for duotones and tints.
• CSS Filter Generator — grayscale images before blending.
• CSS Glassmorphism Generator — layered frosted surfaces.
• Color Picker — select on-brand tint colors.

Built by ByteVancer

ByteTools is a free product of ByteVancer, a software and web development studio building web apps, SaaS, and custom software. When you want a signature visual style engineered into a real product, ByteVancer can design and build it — explore their services to see how.