Multiply overlay effect
Layer a brand color over a photo using mix-blend-mode: multiply — no image editing, no filter. The photo's contrast shows through while the hue shifts to match your palette.
Quick implementation
/* Multiply overlay — requires a containing block with isolation */
.hero-image {
position: relative;
isolation: isolate; /* creates stacking context so blend stays local */
}
.hero-image img {
display: block;
width: 100%;
filter: grayscale(100%); /* convert to grayscale for clean tinting */
}
/* The tint layer */
.hero-image::after {
content: '';
position: absolute;
inset: 0;
background: oklch(0.52 0.22 265 / 0.85); /* brand color at ~85% */
mix-blend-mode: multiply;
}
/* Variant: CSS-only without a pseudo-element
Use when you can't add ::after (e.g. inside a grid or flex cell) */
.hero-tint {
background-color: oklch(0.52 0.22 265);
background-blend-mode: multiply;
/* bg-image and bg-color blend together: */
background-image: url('photo.jpg');
filter: grayscale(100%) /* optional: desaturate the image */;
}Prompt this to your LLM
Includes role, constraints, framework variants, and edge cases.
You are a senior frontend engineer creating a brand-tinted hero
image effect using CSS blend modes.
Goal: Overlay a brand color onto a photo using mix-blend-mode:
multiply so the photo's texture shows through the tint.
Show two approaches:
1. Absolute-positioned ::after overlay with mix-blend-mode: multiply
on a relatively positioned container with isolation: isolate
2. background-blend-mode: multiply on the image element itself,
combining background-image and background-color
Explain:
- Why isolation: isolate is necessary (stacking context scope)
- Why grayscale(100%) on the photo gives cleaner color tinting
- How multiply math works: black stays black (0×anything=0),
white becomes the overlay color (1×color=color), midtones blend
- The difference between mix-blend-mode (element-to-element) vs
background-blend-mode (within a single element's layers)
Show hover effect: transition the overlay opacity or hue-rotate
on card hover for an interactive version.
Return only the CSS with inline comments.How multiply blending works
Multiply blending multiplies the normalized values of each channel: result = source × destination. This means black (0) always stays black — any color multiplied by zero is zero. White (1) becomes the overlay color — the destination color multiplied by 1 is itself. Midtones darken toward the overlay color. The practical effect: a grayscale photo tinted with a brand color shows the photo's full tonal range, shifted to the brand hue. Dark shadows in the photo become very dark brand color; highlights become the brand color at near-full saturation.
isolation: isolate
Without isolation: isolate on the container, mix-blend-mode: multiply on the overlay blends against everything below it in the stacking context — including the page background. This causes the tint to affect elements behind the hero section. isolation: isolate creates a new stacking context that contains the blend: the overlay blends against its siblings within the container, not against the entire page. Always set this on the wrapper element when using blend modes.