Overlay
A semi-transparent layer placed over content to dim it, improve text contrast, or indicate inactive state.
Plain English
An overlay is a semi-transparent sheet placed on top of content. It has three main jobs: (1) Modal backdrop — dims the page behind a dialog so users focus on the modal. (2) Image text overlay — ensures white text stays readable over any photo. (3) Disabled state — dims a section to signal it is inactive. The key decision is how dark: too light and the overlay does not do its job; too dark and the context disappears entirely.
Technical
Typically implemented with a position: fixed or position: absolute element with background: rgba(0,0,0,N) or a CSS pseudo-element (::before/::after). For modal backdrops: z-index must be between the page content and the modal. For image text overlays: position: absolute on the overlay with gradient (to top, rgba(0,0,0,0.6) 0%, transparent 60%) so it fades naturally. combine with backdrop-filter: blur() for frosted overlays.
Live Demo
No overlay
Headline text
text unreadable
bg-black/40 overlay
Headline text
readable, bg visible
bg-black/70 overlay
Headline text
strong contrast
Overlays make text on images readable. Test contrast ratio, not just visual comfort.
Usage
✓ Good usage
Place a linear-gradient(to top, rgba(0,0,0,0.65), transparent) overlay over hero images so white headline text passes WCAG AA contrast at any image.
✗ Bad usage
rgba(0,0,0,0.9) modal backdrop — nearly opaque, making the user feel trapped in the modal with no sense of the page context they came from.
Recommended values
- Modal backdrop: rgba(0,0,0,0.5) to rgba(0,0,0,0.7)
- Image text readability: linear-gradient(to top, rgba(0,0,0,0.65), transparent)
- Disabled section: rgba(255,255,255,0.6) on light surfaces
- Hover overlay on cards: rgba(0,0,0,0.04) — very subtle
- Dark mode modal backdrop: rgba(0,0,0,0.8) — darker needed on dark backgrounds
Common mistakes
- Forgetting pointer-events: none on purely visual overlays — invisible overlays can block clicks.
- Backdrop too dark (> 0.8 opacity) — disorienting; too light (< 0.4) — not enough focus.
- Not handling overlay stacking carefully — multiple overlays stacking create unintended darkness.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Modal backdrop: position fixed, inset 0, background rgba(0,0,0,0.55), z-index 300. Image text overlay: pseudo-element, linear-gradient(to top, rgba(0,0,0,0.65), transparent 60%). Both use pointer-events: none unless they need to catch clicks.