CSS Academy · Lesson

mix-blend-mode for Layer Blending

Blend element colors with underlying content using Photoshop-style blend modes in CSS.

mix-blend-mode for Layer Blending is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is mix-blend-mode?

mix-blend-mode controls how an element's pixels blend with the pixels of underlying elements — similar to Photoshop layer blend modes. It affects the entire element including its background.

Normal (Default)

normal is the default — no blending. The top element covers whatever is beneath it.

multiply

multiply darkens by multiplying pixel values. White becomes transparent; black stays black. Great for placing dark-toned images over colored backgrounds.

.texture {
  mix-blend-mode: multiply;
  /* white parts of texture become transparent */
}

screen

screen is the inverse of multiply — brightens. Black becomes transparent; white stays white. Good for light effects and glows.

.glow {
  mix-blend-mode: screen;
  /* black parts become transparent, colors brighten */
}

overlay

overlay combines multiply and screen. Dark areas darken; light areas lighten. Increases contrast while preserving midtones.

.texture {
  mix-blend-mode: overlay;
}

difference

difference subtracts colors. Identical colors produce black; opposite colors produce white. Creates psychedelic, high-contrast effects.

.inverted-text {
  color: white;
  mix-blend-mode: difference;
  /* text color inverts based on underlying color */
}

Hard Light and Soft Light

hard-light applies multiply or screen depending on the source color. soft-light is a softer version with less contrast boost.

Color Blend Modes

These modes blend only certain color properties:

hue — takes hue from top, saturation/lightness from below
saturation — takes saturation from top
color — takes hue and saturation from top, lightness from below
luminosity — takes lightness from top

Color Mode for Duotone

Create duotone images by layering a colored element with mix-blend-mode: color:

.duotone {
  position: relative;
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: royalblue;
  mix-blend-mode: color;
}

Inverted Text Effect

Text that appears inverted against any background:

.inverted-label {
  color: white;
  mix-blend-mode: difference;
  /* white on white → black, white on dark → white */
}

Stacking Contexts and blend mode

mix-blend-mode blends with elements in the same stacking context. The isolation: isolate property on a parent creates a new stacking context, preventing blend modes from affecting elements outside the isolated group.

Quick Check

Which blend mode makes white parts of an element transparent and preserves colored/dark areas — like transparent paper?

Recap

mix-blend-mode blends element pixels with underlying content. Key modes: multiply (darkens, white → transparent), screen (brightens, black → transparent), overlay (boost contrast), difference (subtraction), color (recolor images). Use isolation: isolate on parent to contain blend scope.

Frequently asked questions

Is the “mix-blend-mode for Layer Blending” lesson free?

Yes — the full text of “mix-blend-mode for Layer Blending” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “mix-blend-mode for Layer Blending”?

Blend element colors with underlying content using Photoshop-style blend modes in CSS. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “mix-blend-mode for Layer Blending” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

filter: blur brightness contrast grayscale
backdrop-filter for Frosted Glass
mix-blend-mode for Layer Blending
isolation Property

← Back to CSS Academy