Snippets / Layout /

Text over image with blend

Overlay text on images using mix-blend-mode and layered backgrounds for readable, polished hero sections.

Design without limits

CSS blend modes create stunning overlays without JavaScript

Card with overlay

Multiply blend mode

Widely supported

layoutcolorno-js

Quick implementation

/* HTML: 
<div class="hero">
  <img src="image.jpg" alt="Description">
  <div class="overlay"></div>
  <div class="content">
    <h2>Title</h2>
    <p>Description</p>
  </div>
</div>
*/

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  inset: 0;
  /* Gradient dark overlay + color tint */
  background:
    linear-gradient(to bottom, oklch(0 0 0 / 0.1) 0%, oklch(0 0 0 / 0.6) 100%),
    oklch(0.4 0.06 265 / 0.3);
  mix-blend-mode: multiply;
}

.content {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  z-index: 1;
  color: white;
}

.content h2 {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  margin: 0 0 0.5rem 0;
  text-shadow: 0 2px 8px oklch(0 0 0 / 0.5);
}

.content p {
  font-size: 1rem;
  text-shadow: 0 1px 4px oklch(0 0 0 / 0.5);
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer specializing in modern CSS layouts.

Goal: Create a hero section with text overlaid on an image using blend modes for readability.

Technical constraints:
- Use mix-blend-mode on an overlay layer between the image and text.
- Position the text absolutely within a relatively positioned container.
- Use oklch() for all colors including alpha channels (e.g. oklch(0 0 0 / 0.6)).
- Include a gradient overlay: dark at bottom for text contrast, lighter at top.
- Add text-shadow for additional readability without harsh backgrounds.

Framework variant (pick one):
A) Vanilla HTML + CSS only — return the .hero container with overlay and content divs.
B) React component — accept imageSrc, title, description, and optional className props.

Edge cases to handle:
- What if the image is too light or too dark? Provide a CSS custom property for overlay intensity.
- Ensure text remains readable on all images — suggest a minimum overlay opacity.
- ARIA: the overlay div is decorative; ensure alt text on the image describes the hero context.

Return HTML + CSS, clearly separated.

Why this matters in 2026

Hero sections and featured cards need text to pop over images without blocking them. The old approach — solid dark backgrounds or heavy drop shadows — feels dated. mix-blend-mode lets you tint and darken images non-destructively, preserving the photo while ensuring type remains readable. It's a pure-CSS solution that replaces the need for image editing or JavaScript overlays.

The logic

mix-blend-mode: multiply darkens the image where the overlay sits, making white text more legible. The overlay uses a gradient (light at top, dark at bottom) so the image stays vibrant near the top while text at the bottom gets enough contrast. Position absolute on the overlay and content layers keeps them stacked correctly within the relative hero container.

Why layered backgrounds? Combining linear-gradient(...) with a solid oklch() tint in one background property allows fine control: the gradient handles the fade, the tint adds a color cast (blue, purple, etc.) that matches your brand.

Accessibility & performance

Text on images must meet WCAG contrast ratios (4.5:1 for normal text). Test with real images — not all photos respond the same to the same overlay. Use text-shadow sparingly; it's a fallback enhancer, not a contrast fix. The overlay div is decorative — mark it empty or with aria-hidden="true". Performance-wise, blend modes are GPU-accelerated in modern browsers, but avoid animating them on scroll.

Tip: Make overlay intensity adjustable via CSS custom property: --overlay-opacity: 0.6; so designers can tune contrast per image.