Ever put a beautiful hero image on your site, only to realize that when you add text over a background image, the text becomes unreadable (and the image looks terrible, too!) It's a common issue, especially when you're working with bold, dramatic images. You want text that pops against the background, but you also don’t want to cover up the stunning visuals. In today's quick tip, you’ll learn how to keep your text legible while preserving your background’s impact — all by using gradient overlays.
Let’s walk through a practical solution to this design challenge, which will not only make text stand out but also maintain a professional, sleek look for your site.
Affiliate Disclosure: This post may contain affiliate links, which means I receive a small commission at no cost to you when you make a purchase. Please note that I only get affiliate links for products that I use.
The Problem: Text Disappears Over a Background Image
You’ve probably been here before: you’ve got a strong background image, and you place text over it. But the text blends in too much and becomes hard to read. The quick and obvious fix is to change the text color to white or add a solid box behind the text, but what if you don't want to hide too much of your image?
Rather than compromise on font color or ruin the image with harsh overlays, a better option is to manipulate the background itself — but in a way that doesn’t destroy the aesthetics.
I find that using the Kadence Theme with Kadence Blocks gives me the design control that I need.
First Step: Accessing Background Overlay Options
Start by heading over to your page. Click on the row layout where you’ve got your background image and text. You’ll be looking for background styling options, which can be found under the style tab. Once there, scroll down to find Background Overlay Settings. This is where the magic happens.
At first, the overlay might be set to “none.” You could add a solid color as a quick fix, but as you’ve probably noticed, solid overlays often take away from the image’s dramatic appeal. Instead, let’s go with something more flexible: a gradient overlay.
Adding a Gradient Overlay over a Background Image: Balancing Legibility and Style
Here’s where we bring in color blending! Switch your overlay type from “classic” to gradient. You’ll notice the ability to use multiple colors and control how they blend across your image. Gradients are powerful because they allow you to selectively reduce the intensity where it matters most.
For this example, let’s keep things simple: start with two colors. You could default to your customizer’s colors, but in this case, let’s work with white to maintain a clean, modern look.
- Set two points in your gradient, left and right.
- Adjust the opacity of these colors. For the left point, take the opacity all the way to zero — making it transparent. Now, the right side should remain more opaque, but you can reduce its opacity to your preferred level.
You’ll see how this begins to fade the text area into clarity while leaving the rest of the image untouched. It’s all about balance here — give the text room to breathe without covering your whole background.
Finer Control With Additional Gradient Points
Need more customization? You’re not limited to just two gradient points. Feel free to add more control points along the gradient bar. Each point gives you flexibility to adjust color and opacity, letting you control which parts of your image gain or lose visibility.
Want the middle of your image to show up more? Move the gradient handles around. By placing them just right, you can reveal important parts of your image (like a person’s face or a focal object) while still making the area where your text sits stand out more.
For example, in a design where you want the person in the middle of the image to remain visible, align your gradient and make it more transparent in the center and more opaque on the edges. Gradually lowering opacity on certain gradient points can make it look natural, rather than forced.
Aligning Text for Maximum Impact
Great design doesn't just rely on background adjustments. When placing text on images, strategic alignment can save you from some common headaches. In this example, aligning text to the right helped. Why? The bold detail of the image — the person in the middle — wasn’t obstructed. By shifting the text out of the way, both the subject and the message can shine.
Always consider where you're placing your text. If your image has a clear focal point, avoid dropping text right over it. Instead, move it to a less noisy area of the image. This way, neither the text nor the image compete with each other.
Experiment, Adjust, and Have Fun
The ideal balance of text readability and image clarity depends on your specific design. Play around with your gradient settings, move the points, tweak the opacity, and don’t be afraid to experiment. There’s no one-size-fits-all rule here. The goal is to find a sweet spot where your text pops without drowning out the visuals.
Small adjustments like these can make a huge difference in how your website looks and feels. Overlays, when used properly, almost feel invisible, but they have a big impact.
Elevating Your Design Game
There’s no need to sacrifice design for readability. By using the right gradient overlays, you can maintain the beauty of your background images while ensuring your text is clear and readable. In just a few steps, you’ve transformed a simple background-text mix into a polished, professional design.
Share the love! Pin these images ⤵️
