Blend Modes

Definition

A blend mode is the rule that decides how the colors of two overlapping layers get mixed. Normally the top layer simply covers whatever sits below it, but once you set a blend mode the two colors are combined through a specific formula, so the overlapping area takes on a new color. Multiply, for example, makes the overlap darker; screen does the opposite and makes it brighter; and overlay pushes the light areas lighter and the dark areas darker to boost contrast. In CSS you set this with the mix-blend-mode property, and it is the go-to tool for making images, colors, and text blend together naturally.

Why does it matter?

Without a blend mode, any color or text you place on top of an image always covers it, and the result tends to look awkward, like it is floating on the surface. A blend mode lets the top layer soak up the light, shadow, and texture of the image underneath, so the two feel like they were always a single picture. That is how you get text sitting comfortably over a photo, a color overlay that tints an image, or a duotone that dyes a photo in two tones — all in a few lines of code. The big win is that you can create these moods live, right in the browser, without ever opening an image editor. The catch is that the result depends on the colors of the layer below, so get into the habit of checking with your own eyes that it reads the way you intended on every background. Because the effect is powerful, it also pays to learn some restraint and use it without burying what is underneath.

Common mistakes

• Not checking whether text placed with a blend mode is still readable. Depending on the brightness of the background image, the blended text can show up clearly in some spots and vanish in others, so check that it stays legible across the whole image.
• Getting carried away and piling on several blend modes at once. When the mixing gets excessive the colors turn muddy and the screen looks messy. It works far better to use it sparingly, in one place with a clear purpose.
• Trying to memorize which mode produces which color. Every mode gives a different result depending on the background color, so changing the value and checking with your eyes is much faster and more reliable than learning the names by heart.

Practical tips

• Pick the mode that matches the effect you want. Reach for multiply when you want a dark, inky, shadow-soaked feel, screen for a bright glow where light spreads, and overlay when you want to bring out the contrast in a photo — each one nails a specific mood.
• When you are laying text over an image, tinting with a color overlay, or building a duotone, set it with the CSS mix-blend-mode property. You can apply the effect and tweak the value right in the browser, with no separate image editing.
• Support for mix-blend-mode is fairly generous, but on important screens check for it with @supports and have a fallback so the content still looks fine when the effect is missing. Be especially careful not to let must-read elements like text or buttons rely on the blend effect alone.

Related concepts