The popularity of placing text over background images in web design can hardly be overstated. Just browse through the nominations for best website of the day/week/month on Awwwards or CSS Design Awards and you’ll see a wide variety of imaginative examples. Look closely, and you’ll notice even more: some use gradients, overlays, font effects, or simply position text differently on seemingly similar photos. And it’s not just about chasing uniqueness.
The image can feature anything. But what about your user interface? Will the overlay effect always remain readable? Of course not — no designer wants users or clients to strain their eyes and think, “What does that say?” This becomes even more important when designing for mobile. Small screens mean smaller text, and that makes reading harder. Add a busy background image, and the result can be a mess.
However, there are a few techniques for combining or adjusting this effect to ensure the text stays visible and legible.
Text and Images in Web Design
Let’s start with some striking examples of text over background images: Indykpol, Ginetta, New Vista Behavioral Health, 100 Days of Winter, Harajuku Dacci Pasta Labo, A Little Italian Food Workshop, Peter Zilka, Family Legacy, purpleandgrey, catscarf, Hero Image.
Now let’s focus on a few more websites: laferme, storymarketing, foster-designs, Article Cards.
Is the text always easy to read? Take the last two examples — imagine if the waves were placed lower in the image. The text would no longer be as clear and quick to read.
A background image can vary, and designers must be prepared to work with many types of visuals. We're not saying it's all bad or needs to be completely reversed. Instead, we want to highlight that text and background images shouldn’t exist in isolation.
That’s why we’ll look at how to make overlay text more readable. There’s no one-size-fits-all solution. It depends on your personal taste — a method that works for one project might not suit another at all.
Canvas Effect
A canvas is a semi-transparent gradient placed between the image and the text. With this method, text can stay white, while the canvas gradient transitions from black at 40% opacity to white (or transparent). Of course, this depends on preference, but 40% black-to-transparent tends to work best. The image softens, contrast improves, and the text becomes more readable. For comparison, we created 30% and 69% opacity versions — and they didn’t look as good.
Advantages
Disadvantages
The canvas effect is widely used — especially when the gradient only covers part of the image. But there are also other techniques.
Toning
If the image isn’t crucial, you can tone it down completely using black at 40% opacity. Sometimes, using a canvas doesn’t help — the text still loses clarity. In such cases, you may need to add a solid background under the text.
Advantages
Disadvantages
Color Overlays
Similar to toning, but instead of black and white, you use color. This helps neutralize the complexity of the composition, blocks out most of the image’s color palette, and transforms it into a monochrome look.
What color should you choose? It depends on your brand. The goal remains: the text must be clear and readable.
Soft Gradients
Possibly the trickiest way to add contrast between text and background. Avoid bright, clashing colors — they may work individually but not in combination. Use tools like Coolors or Kuler to find color pairs that complement each other and fit the layout.
Compare the two gradients below and you’ll understand.
Advantages
Disadvantages
Blur
Gaussian blur helps soften the image and improve text visibility. If you use an iPhone, you're familiar with this technique. iOS design uses blur to convey depth, while Android uses shadows for that.
Don't overdo it — shapes in the background should still be recognizable.
Advantages
Disadvantages
Text Highlight
This technique changes the text background color, similar to highlighting with a marker. It works well with small text and lots of empty space. The highlight doesn’t have to be black — it can match the dominant color of the image or brand.
Black and White
Sometimes background images are desaturated to make the text pop. But it doesn’t have to be strictly black and white — try grayscale, muted tones, or pairing a colored background with a desaturated photo. See the examples below.
Glitch Effect
Sometimes for a homepage or a promo page, you want something unique and non-standard. You can combine text effects with overlays — not just soft shadows over white foam.
Try adding bold and artistic text styles.
Start by opening your image, duplicating it, and lightening it slightly using a Hue/Saturation Adjustment Layer. If the image is already bright, this step may be skipped.
Create a text layer with your title or message. Choose a bold font. Size doesn't matter much, but boldness is key — thin letters won’t create the desired effect.
Duplicate the background again and place the copy above the text. Right-click in the Layers Panel and choose “Create Clipping Mask”. You can rotate or reposition the image to make it look more interesting inside the text.
Create a new empty layer and place it between the text and the background. Ctrl + Click on the text layer to select its shape. Fill it with dark gray — this will become the shadow.
Use the Move Tool and nudge the shadow slightly. Apply Filter → Blur → Gaussian Blur to soften it. This creates subtle depth. If you skip this, the image will appear too flat.
Create another layer between the shadow and background. Draw a gray rounded rectangle behind the text.
Add one more copy of the background, place it above the rectangle, and set blending mode to “Soft Light”.
Select the text, shadow, and texture layers and duplicate them (Ctrl+J). Yes, it adds more shadows — we’ll fix that later.
Select two layers (e.g. “Sea” and “Background copy 8”), then use the Selection Tool to select a part of the word or letter. Use the Move Tool and nudge it in the direction of the shadow. If you go the other way, the shadow gets stronger. If you disable the shadow, it blends in. The result: broken, “glitchy” text.
You can break the entire word, or just part of it, or even just one letter. You can reduce the size of text and shadow layers, soften rectangle edges, or try a different texture.
Of course, this kind of effect isn’t for every project. But it can work well for categories, sections, or promotional pages.
There are many glitch-style websites out there, though most are personal projects: wmnvm, oxtral, michaelvillar, jigsaw, bobby.
You can also create text over forests or mountains and use rocks or leaves to distort the bottom of the letters, giving the illusion they emerge from the earth. But keep the effect subtle — too much contrast will overwhelm the visual focus.
Conclusion
We've explored different techniques for making text readable without compromising background imagery. Even with glitch effects, the text remains clear, while ocean waves and foam are still recognizable.
Good design is thoughtful design — balanced visuals, usability, and clarity. Sometimes, beauty alone isn’t enough. The key is to experiment, mix styles, and explore new ideas. Your creativity knows no limits.
The most important thing is proper visual balance and lightness of effect. Even if your text reveals the background, glitch or torn effects should feel airy. Any design style should feel clean — sharp and contrasty, yes, but never visually heavy. Even our example stays legible and clean thanks to soft shadows and delicate breaks.