A transparent overlay is a semi-transparent colour layer placed over an image or video so text on top stays readable. It is one of the most common website design patterns, especially in hero sections. In 2026 you rarely need a special template for it: WordPress’s Cover block and a few lines of CSS do the job. What matters is contrast, speed and accessibility.
The short answer
You do not need a dedicated “overlay template” in 2026. In WordPress, the Cover block adds an image or video background with an adjustable colour overlay and opacity. In custom code, a pseudo-element or a gradient over the background does the same. Make sure text over the overlay meets WCAG contrast of at least 4.5:1, keep the image file small, and never put key information only in the image.
When I first wrote this post in 2015, it listed paid templates that used overlays. Those templates are long gone. The pattern is now built into WordPress itself, which is a good example of how much the platform has matured.
What is a transparent overlay in web design?
A transparent overlay in web design is a layer of colour or gradient with partial opacity, placed between a background image or video and the content on top. It darkens, lightens or tints the background so headings and buttons stand out. It also helps a set of different photos look consistent with the brand colours.
Common uses:
- Hero sections with a headline over a photo or video.
- Cards and tiles that show text when you hover over an image.
- Section backgrounds that tie photography to brand colours.
- Modal windows that dim the page behind them.
How do you add a transparent overlay in WordPress?
Add a transparent overlay in WordPress with the Cover block. Insert a Cover block, choose an image or video, then set the overlay colour and opacity in the block settings. Add your heading and button inside the block. Most block themes also include ready-made patterns that use the Cover block with an overlay.
- In the block editor, add a Cover block.
- Upload or choose a background image or video.
- In the block settings, pick an overlay colour or gradient.
- Adjust the overlay opacity until the text is easy to read.
- Add a heading, short text and a button inside the block.
- Preview on a phone and check the text is still readable.
The WordPress Cover block documentation covers every setting, including focal point and fixed backgrounds.
A simple CSS overlay example
For a custom theme, a gradient can sit above a decorative background image while leaving real text fully opaque. Replace the example image path with an asset you have permission to use. Do not put opacity on the whole section: that also fades its text and controls. The MDN gradient documentation explains how gradients work as CSS images.
<section class="hero" aria-labelledby="hero-title">
<h2 id="hero-title">Plan your next project</h2>
<p>Describe the offer here in real text.</p>
</section>
.hero {
color: #fff;
padding: clamp(2rem, 6vw, 5rem);
background:
linear-gradient(rgb(0 0 0 / 70%), rgb(0 0 0 / 70%)),
url("/images/your-licensed-photo.webp") center / cover;
}The 70% value is an example, not an accessibility pass. Check the actual text, image crop, font sizes and button states at mobile and desktop widths. Use an image element with suitable alternative text if the image carries information; a CSS background should be decorative.
How do you make overlay text accessible?
Make overlay text accessible by ensuring it meets WCAG contrast guidelines against the darkest and lightest parts of the image behind it. Normal text needs a contrast ratio of at least 4.5:1, and large text at least 3:1. Increase the overlay opacity, use a gradient behind the text, or move text off busy parts of the image.
| Check | Target | Why it matters |
|---|---|---|
| Text contrast (normal text) | At least 4.5:1 (WCAG AA) | Readable for people with low vision |
| Text contrast (large text) | At least 3:1 (WCAG AA) | Headlines still need enough contrast |
| Alternative text | Describe meaningful images; mark decorative ones as decorative | Alt text is the text alternative screen readers announce, and search engines and many AI tools use it alongside the image itself |
| Key information | Always in real text, never only in the image | Real text works for everyone; text baked into a photo may be missed, misread or impossible to select or translate |
| Motion | Respect reduced-motion settings for video backgrounds | Avoids discomfort for some users |
Caption: Accessibility checks for overlay designs. Contrast targets from the W3C Web Content Accessibility Guidelines.
Readable text matters most when the stakes are highest. When my team started work with Sunwater, a government-owned Queensland water supplier, a UX and UI audit found contrast and readability problems on the home page and About section, plus mobile issues across the header, footer and key pages. That website is where communities check dam levels and safety alerts, often on a phone in bad weather. A good-looking hero that is hard to read in those conditions fails at its only job. Patching contrast one spot at a time would not have fixed it, so my team rebuilt whole sections for mobile and accessibility, with stronger contrast for important alerts.
My guide to WordPress and accessibility covers the wider checks.
Do image overlays slow down a website?
A simple colour or gradient overlay usually adds little work compared with the background asset. Complex filters, blending and animation can still add rendering cost. Measure the finished page, compress the image and avoid an oversized background video. If the hero is the Largest Contentful Paint element, prioritise when and how it loads.
- Size the image for the largest screen it will appear on, not bigger.
- Use WebP or AVIF and compress it.
- Do not lazy-load the hero image at the top of the page.
- Test with a website speed test before and after.
Where can you find good overlay images?
Find overlay background images on free stock sites such as Unsplash and Pexels, or better, use your own photography of your team, work and premises. Images with a calm area for text work best. My list of royalty free image sites covers where to find images and what their licences allow.
What to do next
- Review your hero sections on a phone and check the text is easy to read.
- Run a contrast check on any text that sits over an image.
- Compress and resize every background image.
- Rebuild old overlay sections with the Cover block if your theme supports it.
- For more layout guidance, see my guide to web design best practices.
Frequently asked questions
What is the best overlay opacity for text on images?
There is no single best opacity. Check the lowest contrast where text overlaps the finished image and overlay, across image crops and responsive sizes. Normal text needs at least 4.5:1 and large text at least 3:1 under WCAG AA. The problematic region depends on whether the text is light or dark; it is not always the lightest part of the image.
Can I add an overlay without a plugin in WordPress?
Yes. The Cover block in the WordPress block editor includes overlay colour, gradient and opacity settings, with no plugin needed. For custom designs, a developer can add an overlay with a few lines of CSS in the theme.
Should I use a gradient or a solid overlay?
A gradient often works better when text sits on one side or at the bottom of the image, because it darkens only where needed and keeps the rest of the photo vivid. A solid overlay is simpler and gives more consistent contrast across the whole area.
Do overlays affect SEO?
Not directly. Search engines read the text, not the overlay. Overlays help indirectly when they make content readable and keep visitors engaged. They can hurt if the background image is heavy and slows the page, or if key text is baked into the image instead of written as real text.
Are video backgrounds with overlays a good idea?
Use background video sparingly, with a still-image fallback and reduced-motion support. When moving content starts automatically, runs for more than five seconds and appears alongside other content, WCAG’s Pause, Stop, Hide criterion generally requires a way to pause, stop or hide it unless the movement is essential. Muting a video or respecting reduced motion alone does not replace that control.
