Blend Modes & mix-blend-mode

What Are Blend Modes?

Blend modes determine how the colors of one layer interact with the colors of the layers beneath it. If you have ever used Photoshop, Illustrator, or any image editing software, you are already familiar with the concept -- blend modes like Multiply, Screen, and Overlay are staples of graphic design. CSS brings this same power to the web with two properties: mix-blend-mode and background-blend-mode.

At their core, blend modes work by taking the color values of two overlapping layers and applying a mathematical formula to produce a new color. The top layer is called the source, and the bottom layer is called the destination (or backdrop). Different blend modes use different formulas, which is why they produce dramatically different visual results. Some darken, some lighten, some increase contrast, and some create entirely unexpected color combinations.

Blend modes are not just for images. You can apply them to text, shapes, backgrounds, gradients, and any HTML element. This makes them incredibly versatile for creating visual effects that would otherwise require pre-processed images from a design tool.

/* mix-blend-mode: Blends an ELEMENT with the content behind it */
.element {
    mix-blend-mode: multiply;
}

/* background-blend-mode: Blends an element's own BACKGROUND LAYERS */
.element {
    background-image: url("photo.jpg");
    background-color: #3498db;
    background-blend-mode: overlay;
}

/* Reset to default (no blending) */
.element {
    mix-blend-mode: normal;
    background-blend-mode: normal;
}

mix-blend-mode: Blending Elements with Their Backdrop

The mix-blend-mode property controls how an element's visual content blends with the content directly behind it in the rendering order. This means the element's colors are mathematically combined with whatever is visible beneath it -- whether that is a parent's background, sibling elements, or any other content in the stacking order.

<!-- HTML structure -->
<div class="backdrop" style="background: #e74c3c;">
    <div class="blend-element" style="background: #3498db;">
        I blend with the red behind me
    </div>
</div>

/* The blue element blends with the red background */
.blend-element {
    mix-blend-mode: multiply;
}

/* mix-blend-mode works on any element, including text */
.blended-heading {
    color: #ff6600;
    mix-blend-mode: difference;
    font-size: 4rem;
    font-weight: bold;
}

/* Images blending with background */
.blended-image {
    mix-blend-mode: screen;
}

background-blend-mode: Blending Background Layers

The background-blend-mode property controls how an element's own background layers blend with each other. CSS allows multiple background images and a background color on a single element. The background-blend-mode property determines how these layers are composited together. Each background layer blends with the layer beneath it, with the background color at the very bottom of the stack.

/* Blend a background image with a background color */
.color-tinted-image {
    background-image: url("photo.jpg");
    background-color: #3498db;
    background-blend-mode: multiply;
    background-size: cover;
}

/* Blend two background images together */
.dual-image-blend {
    background-image:
        url("texture.png"),
        url("photo.jpg");
    background-blend-mode: overlay, normal;
    background-size: cover;
}

/* Blend a gradient with an image */
.gradient-overlay {
    background-image:
        linear-gradient(135deg, #667eea, #764ba2),
        url("photo.jpg");
    background-blend-mode: overlay;
    background-size: cover;
}

/* Multiple blend modes for multiple layers */
.complex-blend {
    background-image:
        url("pattern.svg"),
        linear-gradient(to right, #e74c3c, #3498db),
        url("photo.jpg");
    background-blend-mode: screen, multiply;
    /* First value: pattern blends with gradient
       Second value: gradient blends with photo */
    background-size: 100px 100px, cover, cover;
}

Normal Mode

The normal blend mode is the default. It does not perform any blending -- the source layer simply covers the destination layer completely (respecting opacity). This is how elements normally render in CSS. You rarely set this explicitly unless you are overriding a blend mode that was set elsewhere.

/* Default behavior -- no blending */
.element {
    mix-blend-mode: normal;
}

/* Useful for resetting blend mode on child elements */
.parent {
    mix-blend-mode: multiply;
}

.parent .no-blend-child {
    mix-blend-mode: normal; /* Override parent's blend */
}

Darken Modes: multiply, darken, color-burn

The darken group of blend modes produces results that are darker than either the source or destination layer. These modes are useful for creating shadows, adding depth, overlaying textures onto images, and producing rich, dark color combinations.

multiply

The multiply blend mode multiplies the color values of the source and destination layers. The result is always darker (or equal to) the darkest of the two layers. White in the source layer becomes transparent (because multiplying by 1 leaves the destination unchanged), while black remains black (multiplying by 0 always yields 0). Think of it like stacking two pieces of colored glass together -- light passes through both, making the result darker.

/* Multiply makes everything darker */
.multiply-element {
    mix-blend-mode: multiply;
}

/* Classic use: tinting an image with a color */
.tinted-image-container {
    position: relative;
    background-color: #2c3e50; /* Dark blue-gray tint */
}

.tinted-image-container img {
    display: block;
    width: 100%;
    mix-blend-mode: multiply;
}

/* Background blend: color wash over a photo */
.blue-tinted-hero {
    background-image: url("hero.jpg");
    background-color: #2980b9;
    background-blend-mode: multiply;
    background-size: cover;
    color: white;
}

/* Multiply is great for overlaying dark textures */
.textured-background {
    background-image:
        url("grunge-texture.png"),
        url("photo.jpg");
    background-blend-mode: multiply;
    background-size: cover;
}

darken

The darken blend mode compares each color channel of the source and destination and keeps the darker value. Unlike multiply, which always darkens the result, darken simply picks the minimum value from each channel. The result is that only areas where the source is darker than the destination will be affected.

/* Darken: keeps the darker of the two layers per channel */
.darken-element {
    mix-blend-mode: darken;
}

/* Use darken to overlay dark elements while preserving light areas */
.dark-overlay {
    background-image:
        url("dark-vignette.png"),
        url("photo.jpg");
    background-blend-mode: darken;
    background-size: cover;
}

/* Darken text against a colorful background */
.darken-text {
    color: #333;
    mix-blend-mode: darken;
    font-weight: bold;
}

color-burn

The color-burn blend mode darkens the destination color to reflect the source color by increasing contrast. It produces a much more intense, saturated result than multiply. Black in the source produces black in the result, and white in the source leaves the destination unchanged. Color-burn creates rich, deep color effects with high contrast.

/* Color-burn: intense darkening with high saturation */
.color-burn-element {
    mix-blend-mode: color-burn;
}

/* Dramatic color overlay */
.dramatic-hero {
    background-image: url("photo.jpg");
    background-color: #c0392b;
    background-blend-mode: color-burn;
    background-size: cover;
}

/* Intensify textures */
.intense-texture {
    background-image:
        url("paper-texture.jpg"),
        url("content-image.jpg");
    background-blend-mode: color-burn;
    background-size: cover;
}

Lighten Modes: screen, lighten, color-dodge

The lighten group of blend modes produces results that are lighter than either the source or destination layer. They are the mathematical inverse of the darken modes. These modes are ideal for creating glowing effects, light leaks, and bright overlays.

screen

The screen blend mode is the inverse of multiply. It multiplies the inverse of the source and destination colors, producing a result that is always lighter (or equal to) the lightest of the two layers. Black in the source becomes transparent (because screening with black has no effect), while white produces white. Think of it like projecting two images onto the same screen -- the result is always brighter.

/* Screen makes everything lighter */
.screen-element {
    mix-blend-mode: screen;
}

/* Classic use: light leak or glow effect */
.light-leak {
    position: relative;
}

.light-leak::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%,
        rgba(255, 200, 50, 0.8),
        transparent 60%);
    mix-blend-mode: screen;
}

/* Remove black backgrounds from images */
.remove-black-bg {
    mix-blend-mode: screen;
    /* Any black areas become transparent */
    /* Great for fire, sparks, or light effects on black */
}

/* Bright color wash */
.bright-wash {
    background-image: url("photo.jpg");
    background-color: #f39c12;
    background-blend-mode: screen;
    background-size: cover;
}

lighten

The lighten blend mode compares each color channel of the source and destination and keeps the lighter value. It is the inverse of darken. Only areas where the source is lighter than the destination will show the source color.

/* Lighten: keeps the lighter of two layers per channel */
.lighten-element {
    mix-blend-mode: lighten;
}

/* Use to add bright highlights without affecting dark areas */
.highlight-overlay {
    background-image:
        url("light-flare.png"),
        url("photo.jpg");
    background-blend-mode: lighten;
    background-size: cover;
}

/* Lighten text effect */
.lighten-heading {
    color: #ecf0f1;
    mix-blend-mode: lighten;
}

color-dodge

The color-dodge blend mode brightens the destination color to reflect the source color by decreasing contrast. It produces very bright, washed-out results, especially in lighter areas. Black in the source has no effect, while lighter source values produce increasingly bright results. Color-dodge is excellent for creating intense glowing and highlight effects.

/* Color-dodge: intense brightening effect */
.color-dodge-element {
    mix-blend-mode: color-dodge;
}

/* Create a glowing light effect */
.glow-effect {
    background-image:
        radial-gradient(circle, rgba(255, 255, 200, 0.6), transparent 60%),
        url("dark-photo.jpg");
    background-blend-mode: color-dodge;
    background-size: cover;
}

/* Intense highlight overlay */
.spotlight {
    position: relative;
}

.spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%,
        rgba(255, 255, 255, 0.4),
        transparent 50%);
    mix-blend-mode: color-dodge;
}

Contrast Modes: overlay, soft-light, hard-light

The contrast group of blend modes increases the overall contrast by combining darken and lighten behavior. Light areas become lighter and dark areas become darker, producing a result with enhanced visual punch. These are among the most commonly used blend modes in both design and CSS.

overlay

The overlay blend mode combines multiply and screen. It applies multiply to dark areas and screen to light areas of the destination. The result preserves the highlights and shadows of the destination while incorporating the colors of the source. Overlay is one of the most versatile and popular blend modes because it enhances contrast without completely overwhelming the underlying content.

/* Overlay: enhances contrast, combines multiply + screen */
.overlay-element {
    mix-blend-mode: overlay;
}

/* Classic use: color grading an image */
.warm-graded {
    background-image: url("photo.jpg");
    background-color: #e67e22;
    background-blend-mode: overlay;
    background-size: cover;
}

/* Add texture to a solid background */
.textured-panel {
    background-image:
        url("noise-texture.png"),
        linear-gradient(135deg, #2c3e50, #3498db);
    background-blend-mode: overlay;
    background-size: 200px 200px, cover;
}

/* Overlay text on dynamic backgrounds */
.overlay-heading {
    color: white;
    mix-blend-mode: overlay;
    font-size: 5rem;
    font-weight: 900;
}

soft-light

The soft-light blend mode is a gentler version of overlay. It applies a subtle darkening or lightening effect based on the source color. If the source is lighter than 50% gray, the result is lightened (like dodging in photography). If the source is darker than 50% gray, the result is darkened (like burning). The effect is much softer and more subtle than overlay, making it ideal for subtle color adjustments and natural-looking enhancements.

/* Soft-light: subtle contrast enhancement */
.soft-light-element {
    mix-blend-mode: soft-light;
}

/* Gentle color wash -- more subtle than overlay */
.subtle-tint {
    background-image: url("photo.jpg");
    background-color: #9b59b6;
    background-blend-mode: soft-light;
    background-size: cover;
}

/* Subtle texture overlay */
.subtle-texture {
    background-image:
        url("light-grain.png"),
        url("clean-photo.jpg");
    background-blend-mode: soft-light;
    background-size: 300px 300px, cover;
}

/* Soft highlight effect */
.soft-highlight {
    position: relative;
}

.soft-highlight::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top,
        rgba(255, 255, 255, 0.5),
        transparent 70%);
    mix-blend-mode: soft-light;
}

hard-light

The hard-light blend mode is like overlay but with the source and destination layers swapped. If the source is lighter than 50% gray, it applies screen to the destination. If the source is darker than 50% gray, it applies multiply. The result is a harsher, more intense contrast effect than overlay. Hard-light is useful when you want the source layer to dominate the blend.

/* Hard-light: intense contrast -- source dominates */
.hard-light-element {
    mix-blend-mode: hard-light;
}

/* Intense color grading */
.intense-grade {
    background-image: url("photo.jpg");
    background-color: #e74c3c;
    background-blend-mode: hard-light;
    background-size: cover;
}

/* Dramatic text effect */
.dramatic-text {
    color: #2c3e50;
    mix-blend-mode: hard-light;
    font-size: 6rem;
    font-weight: 900;
}

Comparative Modes: difference, exclusion

The comparative blend modes produce results based on the difference between the source and destination colors. They create unusual, often psychedelic effects that are useful for artistic compositions, detecting differences between images, and creating unique visual effects.

difference

The difference blend mode subtracts the darker color from the lighter color for each channel. If the two layers are identical, the result is black. If one layer is white, the other is inverted. If one layer is black, the result is the other layer unchanged. Difference creates high-contrast, colorful results that can look dramatic and eye-catching.

/* Difference: subtracts colors, creates high contrast */
.difference-element {
    mix-blend-mode: difference;
}

/* Dynamic text that is always readable on any background */
.adaptive-text {
    color: white;
    mix-blend-mode: difference;
    /* White + difference = inverted backdrop colors */
    /* Always creates contrast against any background */
}

/* Psychedelic color effect */
.psychedelic {
    background-image: url("photo.jpg");
    background-color: #8e44ad;
    background-blend-mode: difference;
    background-size: cover;
}

/* Reveal differences between overlapping elements */
.comparison-overlay {
    position: absolute;
    inset: 0;
    mix-blend-mode: difference;
    /* Identical areas will appear black */
    /* Different areas will appear as colored pixels */
}

exclusion

The exclusion blend mode is similar to difference but produces a lower-contrast result. Where difference creates stark, high-contrast color inversions, exclusion creates softer, more muted results. Gray areas in either layer produce a mid-gray result, making exclusion less dramatic and more usable for subtle artistic effects.

/* Exclusion: softer version of difference */
.exclusion-element {
    mix-blend-mode: exclusion;
}

/* Subtle inversion effect */
.subtle-inversion {
    background-image: url("photo.jpg");
    background-color: #95a5a6;
    background-blend-mode: exclusion;
    background-size: cover;
}

/* Exclusion with gray produces interesting muted tones */
.muted-blend {
    background-image:
        linear-gradient(45deg, #666, #999),
        url("photo.jpg");
    background-blend-mode: exclusion;
    background-size: cover;
}

Component Modes: hue, saturation, color, luminosity

The component blend modes separate color into its HSL (Hue, Saturation, Luminosity) components and selectively take components from either the source or destination layer. These modes give you precise control over color manipulation without affecting other aspects of the image.

hue

The hue blend mode takes the hue from the source and combines it with the saturation and luminosity of the destination. This means you can change the color of an image while preserving its light/dark values and color intensity.

/* Hue: takes color from source, luminosity + saturation from destination */
.hue-blend {
    mix-blend-mode: hue;
}

/* Recolor an image while preserving its tones */
.recolored-image {
    background-image: url("photo.jpg");
    background-color: #e74c3c; /* Red hue will be applied */
    background-blend-mode: hue;
    background-size: cover;
}

/* Create color variations of a product photo */
.product-red    { background-color: #e74c3c; background-blend-mode: hue; }
.product-blue   { background-color: #3498db; background-blend-mode: hue; }
.product-green  { background-color: #2ecc71; background-blend-mode: hue; }
.product-purple { background-color: #9b59b6; background-blend-mode: hue; }

saturation

The saturation blend mode takes the saturation from the source and combines it with the hue and luminosity of the destination. This lets you control how vivid or muted the colors appear without changing what those colors are or how light/dark the image is.

/* Saturation: takes saturation from source, hue + luminosity from destination */
.saturation-blend {
    mix-blend-mode: saturation;
}

/* Desaturate an image using a gray overlay */
.desaturated {
    background-image: url("photo.jpg");
    background-color: #808080; /* Gray = no saturation */
    background-blend-mode: saturation;
    background-size: cover;
}

/* Boost saturation with a vivid color */
.super-saturated {
    background-image: url("photo.jpg");
    background-color: hsl(0, 100%, 50%); /* Maximum saturation */
    background-blend-mode: saturation;
    background-size: cover;
}

color

The color blend mode takes the hue and saturation from the source and combines them with the luminosity of the destination. This is one of the most useful component modes because it lets you completely recolor an image while preserving all of its light and dark details. It is commonly used for colorizing grayscale images or creating monochromatic color schemes.

/* Color: takes hue + saturation from source, luminosity from destination */
.color-blend {
    mix-blend-mode: color;
}

/* Monochromatic colorization of a photo */
.monochrome-blue {
    background-image: url("photo.jpg");
    background-color: #2980b9;
    background-blend-mode: color;
    background-size: cover;
}

/* Colorize a grayscale image */
.colorized {
    position: relative;
}

.colorized img {
    filter: grayscale(1); /* Make image gray first */
}

.colorized::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #e74c3c;
    mix-blend-mode: color;
    /* Applies red hue/saturation to the grayscale image */
}

/* Duotone-like effect using color blend */
.warm-mono {
    background-image: url("photo.jpg");
    background-color: #d35400;
    background-blend-mode: color;
    background-size: cover;
}

luminosity

The luminosity blend mode is the inverse of color. It takes the luminosity from the source and combines it with the hue and saturation of the destination. This means the light/dark values come from the top layer while the colors come from the bottom layer. Luminosity is useful when you want to preserve a specific color palette while applying the tonal range of another image.

/* Luminosity: takes lightness from source, color from destination */
.luminosity-blend {
    mix-blend-mode: luminosity;
}

/* Apply the tonal range of an image to a colored background */
.luminosity-effect {
    background-image: url("photo.jpg");
    background-color: #2ecc71;
    background-blend-mode: luminosity;
    background-size: cover;
    /* Result: green-toned image using the photo's light/dark values */
}

/* Preserve color while changing brightness patterns */
.brightness-texture {
    background-image:
        url("noise-pattern.png"),
        linear-gradient(to right, #e74c3c, #3498db);
    background-blend-mode: luminosity;
    background-size: 200px 200px, cover;
}

isolation: isolate -- Controlling Blend Scope

By default, mix-blend-mode blends an element with everything behind it, all the way down the stacking context. The isolation property allows you to create a new stacking context that limits the scope of blending. When you set isolation: isolate on a parent element, its children's blend modes will only blend with content inside that parent, not with content behind the parent.

/* Without isolation: element blends with EVERYTHING behind it */
.background {
    background: url("complex-bg.jpg");
}

.container {
    background: white;
}

.container .blended {
    mix-blend-mode: multiply;
    /* Blends with .container AND .background behind it */
}

/* With isolation: element only blends within its parent */
.container-isolated {
    background: white;
    isolation: isolate; /* Creates a new stacking context */
}

.container-isolated .blended {
    mix-blend-mode: multiply;
    /* Only blends with .container-isolated's white background */
    /* Does NOT blend with .background behind it */
}

/* Common use: prevent unwanted blending with page background */
.card {
    isolation: isolate;
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

.card .blend-element {
    mix-blend-mode: screen;
    /* Only blends within the card, not the page */
}

Creative Text Effects with Blend Modes

Blend modes open up a world of creative possibilities for text styling. You can make text that reveals images, text that adapts to any background, knockout text effects, and more -- all without using images or canvas.

/* Text that reveals the background image */
.image-reveal-text {
    position: relative;
    background: url("landscape.jpg") center/cover;
}

.image-reveal-text h1 {
    color: white;
    mix-blend-mode: screen;
    font-size: 8rem;
    font-weight: 900;
    background: black;
    /* White text + screen mode on black bg = text reveals the image */
}

/* Text that is always readable on any background */
.adaptive-contrast-text {
    color: white;
    mix-blend-mode: difference;
    font-weight: bold;
    /* Always creates high contrast against any backdrop color */
}

/* Gradient text with blend mode */
.gradient-blend-text {
    position: relative;
    color: #333;
}

.gradient-blend-text::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #e74c3c, #3498db, #2ecc71);
    mix-blend-mode: color;
    pointer-events: none;
}

/* Textured text effect */
.textured-text {
    position: relative;
    font-size: 6rem;
    font-weight: 900;
    color: white;
}

.textured-text::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("grunge-texture.jpg") center/cover;
    mix-blend-mode: multiply;
    pointer-events: none;
}

Creating Duotone Images

Duotone is a popular design effect where an image is rendered using only two colors -- typically a dark color for shadows and a bright color for highlights. This effect is widely used in modern web design for hero images, feature sections, and branding. CSS blend modes make it possible to create duotone effects without any image editing software.

/* Method 1: Using background-blend-mode with a gradient */
.duotone-v1 {
    background-image: url("photo.jpg");
    background-color: #2c3e50;
    background-blend-mode: luminosity;
    background-size: cover;
    position: relative;
}

.duotone-v1::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #e74c3c, #f39c12);
    mix-blend-mode: color;
}

/* Method 2: Simpler duotone using multiply + screen layers */
.duotone-v2 {
    position: relative;
    overflow: hidden;
}

.duotone-v2 img {
    display: block;
    width: 100%;
    filter: grayscale(1) contrast(1.2);
}

.duotone-v2::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0c0c5e, #e91e63);
    mix-blend-mode: color;
}

/* Method 3: Pure background approach */
.duotone-v3 {
    background:
        linear-gradient(#7b2ff7, #ff2975),
        url("photo.jpg") center/cover;
    background-blend-mode: color;
}

/* Duotone presets */
.duotone-ocean {
    background: linear-gradient(#004e92, #00d2ff), url("photo.jpg") center/cover;
    background-blend-mode: color;
}

.duotone-sunset {
    background: linear-gradient(#c33764, #f8b500), url("photo.jpg") center/cover;
    background-blend-mode: color;
}

.duotone-forest {
    background: linear-gradient(#134e5e, #71b280), url("photo.jpg") center/cover;
    background-blend-mode: color;
}

.duotone-neon {
    background: linear-gradient(#12c2e9, #f64f59), url("photo.jpg") center/cover;
    background-blend-mode: color;
}

Practical Examples

Let us explore several real-world applications of blend modes that you can use directly in your projects.

Image Overlay with Text

/* Hero with color overlay and blended text */
.hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: url("hero-photo.jpg") center/cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(44, 62, 80, 0.9),
        rgba(52, 152, 219, 0.7));
    mix-blend-mode: multiply;
}

.hero-content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
}

.hero-content h1 {
    font-size: 4rem;
    font-weight: 900;
    mix-blend-mode: overlay;
    /* Subtle blend with the overlay behind */
}

Interactive Card with Blend Effects

.blend-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
}

.blend-card img {
    display: block;
    width: 100%;
    transition: filter 0.4s ease;
}

.blend-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #667eea, #764ba2);
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.blend-card:hover img {
    filter: grayscale(1);
}

.blend-card:hover::after {
    opacity: 1;
}

.blend-card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    color: white;
    z-index: 1;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.blend-card:hover .blend-card-title {
    transform: translateY(0);
}

Textured Backgrounds

/* Noise texture on a gradient */
.noisy-gradient {
    background-image:
        url("noise.png"),
        linear-gradient(135deg, #2c3e50, #3498db);
    background-blend-mode: overlay;
    background-size: 200px 200px, cover;
}

/* Paper texture on a colored surface */
.paper-surface {
    background-image:
        url("paper-texture.jpg"),
        linear-gradient(to bottom, #f9f3e8, #e8dcc8);
    background-blend-mode: multiply;
    background-size: cover;
}

/* Halftone dot pattern */
.halftone-bg {
    background-image:
        radial-gradient(circle, #000 1px, transparent 1px),
        linear-gradient(135deg, #e74c3c, #3498db);
    background-size: 8px 8px, cover;
    background-blend-mode: screen;
}

/* Cross-hatch pattern */
.crosshatch {
    background-image:
        repeating-linear-gradient(45deg,
            transparent, transparent 5px, rgba(0,0,0,0.1) 5px, rgba(0,0,0,0.1) 6px),
        repeating-linear-gradient(-45deg,
            transparent, transparent 5px, rgba(0,0,0,0.1) 5px, rgba(0,0,0,0.1) 6px),
        linear-gradient(to right, #3498db, #2ecc71);
    background-blend-mode: multiply, multiply, normal;
}

Dynamic Color Themes

/* Use CSS custom properties with blend modes for theming */
:root {
    --theme-color: #3498db;
    --theme-blend: overlay;
}

.themed-hero {
    background-image: url("hero.jpg");
    background-color: var(--theme-color);
    background-blend-mode: var(--theme-blend);
    background-size: cover;
}

/* Switch themes by changing custom properties */
.theme-warm {
    --theme-color: #e67e22;
    --theme-blend: soft-light;
}

.theme-cool {
    --theme-color: #2980b9;
    --theme-blend: overlay;
}

.theme-dramatic {
    --theme-color: #c0392b;
    --theme-blend: color-burn;
}

.theme-muted {
    --theme-color: #7f8c8d;
    --theme-blend: saturation;
}

Browser Support and Fallbacks

Blend modes have good browser support in all modern browsers. However, when targeting older browsers or providing a degraded experience, you should consider providing fallbacks.

/* Feature query fallback */
.blended-hero {
    /* Fallback: simple dark overlay without blending */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                url("hero.jpg") center/cover;
}

@supports (mix-blend-mode: multiply) {
    .blended-hero {
        background: url("hero.jpg") center/cover;
        position: relative;
    }

    .blended-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: #2c3e50;
        mix-blend-mode: multiply;
    }
}

/* background-blend-mode fallback */
.color-washed {
    /* Fallback: just show the image */
    background: url("photo.jpg") center/cover;
}

@supports (background-blend-mode: overlay) {
    .color-washed {
        background-image: url("photo.jpg");
        background-color: #e74c3c;
        background-blend-mode: overlay;
        background-size: cover;
    }
}

Performance and Best Practices

Blend modes are generally performant because they are handled by the browser's compositor. However, there are some best practices to keep in mind for optimal performance and predictable behavior.

/* 1. Use isolation to prevent unexpected blending */
.card-grid {
    isolation: isolate;
}

/* 2. Prefer background-blend-mode when blending backgrounds */
/* It is more contained and predictable than mix-blend-mode */
.contained-blend {
    background-image: url("photo.jpg");
    background-color: #3498db;
    background-blend-mode: multiply;
    /* Only affects this element's own backgrounds */
}

/* 3. Be careful with mix-blend-mode on positioned elements */
.positioned-blend {
    position: relative; /* Creates stacking context */
    z-index: 1;
    mix-blend-mode: multiply;
    /* Stacking context may affect blend behavior */
}

/* 4. Test blend modes across different background colors */
/* The same blend mode can look very different on white vs dark */

/* 5. Avoid blending large elements over complex backgrounds */
/* This can be expensive on lower-powered devices */
.performance-aware {
    will-change: mix-blend-mode; /* Hint for GPU compositing */
}