Color-burn effect
Intensify contrast and saturation with mix-blend-mode: color-burn — create rich, vivid overlays that punch up colors and deepen shadows in a single CSS layer.
Original
Color-burn overlay
Before / After
Quick implementation
/* HTML: <div class="image-wrapper"><img src="photo.jpg" alt="..."><div class="color-burn"></div></div> */
.image-wrapper {
position: relative;
isolation: isolate; /* contain the blend to this element */
}
.image-wrapper img {
display: block;
width: 100%;
height: auto;
}
/* Color-burn overlay */
.color-burn {
position: absolute;
inset: 0;
background: oklch(0.65 0.20 25); /* warm amber-red */
mix-blend-mode: color-burn;
opacity: 0.7; /* adjust intensity */
}
/* Optional: transition on hover */
.image-wrapper:hover .color-burn {
opacity: 0.9;
}
/* Alternative: background-blend-mode variant */
.color-burn-bg {
background-image:
oklch(0.65 0.20 25), /* solid color to blend */
url('photo.jpg');
background-blend-mode: color-burn;
background-size: cover;
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer with expertise in CSS blend modes
and visual effects.
Goal: Implement a color-burn overlay effect using mix-blend-mode:
color-burn to intensify saturation and contrast on images or colored
elements — no JavaScript, no image editing.
Technical constraints:
- Use a pseudo-element or absolute-positioned overlay with
mix-blend-mode: color-burn on a containing block with isolation: isolate
- The color-burn formula: darken the destination by dividing it by
the inverse of the source — whites have no effect, darks intensify
- Set opacity between 0.5–0.85 to control intensity without crushing
highlights or creating banding
- Use oklch() for all color values — no hex or rgba
- The overlay color should be a saturated hue (chroma > 0.15) for
visible color-burn effect
- Include a transition on opacity for hover interaction
Framework variant (pick one):
A) Vanilla HTML + CSS only with a .color-burn-overlay utility class
that accepts --overlay-color custom property for reusability.
B) React component — <ColorBurnOverlay> that accepts color (string),
intensity (0–1), hoverIntensity (string), and children props.
Use inline styles for --overlay-color and opacity.
Edge cases to handle:
- Without isolation: isolate, the blend affects the entire stacking
context, potentially tinting sibling elements or the page background
- On low-contrast source images, color-burn may produce muddy results;
consider applying filter: saturate(1.2) before the blend as a
pre-enhancement step
- For accessibility, ensure any text overlaid on the color-burn result
still meets WCAG AA contrast (4.5:1); color-burn darkens midtones
which may reduce readability
- Mobile browsers may have slightly different compositing performance;
test on iOS Safari where blend modes can trigger GPU compositing
but also increased battery drain on long scrolls
- Color-burn behaves differently on dark vs light backgrounds: on dark
backgrounds it may produce near-black results; on light backgrounds
it creates rich saturation shifts. Consider the base image luminosity.
Return HTML + CSS with inline comments explaining the math.Why color-burn intensifies saturation in 2026
Color-burn is one of the most dramatic blend modes in CSS — it doesn't just tint an image, it actively intensifies both saturation and contrast. Unlike multiply (which darkens) or overlay (which boosts contrast), color-burn divides the destination by the inverse of the source, creating a mathematical operation that pushes colors toward their extremes. Whites in the overlay have no effect (since dividing by 1 - 1 = 0 would be undefined, the spec treats it as no change), but darks in the overlay intensify the destination colors. This makes color-burn perfect for creating rich, saturated overlays on portraits, landscapes, or product photography — the effect makes colors punch without requiring Photoshop adjustments.
The logic behind color-burn
The color-burn formula is result = 1 - (1 - destination) / source for each channel. When the source (overlay) is white (1), the formula becomes undefined, so browsers treat it as no change. When the source is dark (near 0), the division (1 - destination) / source produces a large value, which when subtracted from 1 gives a very dark result. The practical effect: dark overlay colors intensify the saturation of the underlying image, while light areas remain unchanged. This is why a saturated dark amber or deep blue overlay creates such vivid results — it pushes the image's existing colors toward their maximum saturation while preserving highlights. The isolation: isolate on the container is critical: without it, the blend mode affects the entire stacking context, causing the effect to bleed into sibling elements.
Accessibility & performance
Color-burn darkens and saturates, which can reduce text legibility on overlaid content. Always test contrast ratios on any text that sits on top of a color-burned image — the intensified saturation may shift colors in unexpected ways. Use isolation: isolate on the wrapper to contain the blend to a local stacking context; this prevents GPU compositing from affecting the entire page. On mobile, blend modes trigger GPU compositing but are generally well-optimized in 2026. For performance-critical pages, consider applying the effect only on hover or using will-change: mix-blend-mode to hint to the browser that the element will animate. Avoid color-burn on already-dark images — the effect can produce near-black results that lose detail. For those cases, try overlay or soft-light instead.