The Challenge of Adding Text on an Image

Adding text on an image is a common practice for web designers and developers, but one of the biggest challenges is ensuring that the text is visible and legible, especially when the image itself is busy or has contrasting elements. In this blog post, I’ll walk you through how I solved this problem by using a gradient overlay. I’ll explain the process step by step, show the before and after, and provide the exact code I used.

The Problem: Making Text Readable on an Image

When working on a section of my website, I needed to add text over an image. However, when I placed the text on top, it became difficult to read due to the complex nature of the image background. Here’s what I initially tried:

Before:

<div className="relative">
  <img src="your-image.jpg" alt="Image Description" className="w-full h-auto"/>
  <p className="absolute bottom-4 left-4 text-white">Your text here</p>
</div>

The text was barely visible due to the background of the image. Even with white text, it was hard to make out, especially if the background contained bright or similar hues to the text color.

The Solution: Gradient Overlay for Improved Visibility

To solve this problem, I added a gradient overlay between the image and the text. The gradient not only enhanced the readability of the text but also gave a professional, polished look. Here's the solution I implemented.

After:

<div className="inset-0 bg-gradient-to-b from-black/15 to-black/60">
  <div className="h-96 flex flex-col-reverse w-[90%] mx-auto px-5 pb-5 ">
    <p className="">
      Ultrices massa fells dolor imperdiet penatibus magna voutpat
dis etiam condimentum feugiat habitant
    </p>
    <p className="text-xl py-4">Commercial Litigation</p>
  </div>
</div>

Explanation of the Code

Here’s a breakdown of what I did in the code:

1. Gradient Overlay: The bg-gradient-to-b from-black/15 to-black/60 class creates a gradient effect that starts with a transparent black (from-black/15) and gradually turns into a darker black (to-black/60). This subtle gradient ensures that the text stands out without overpowering the image.

2. Text Styling: I used the text-xl and py-4 classes to style the text and create sufficient spacing around it. This enhances the overall design and makes the text more readable, even on a busy background.

3. Responsive Layout: By using h-96 (for a fixed height) and w-[90%] (for responsiveness), the layout ensures that the text remains properly aligned and doesn’t overflow or appear too cramped.

Before and After Comparison

Before:

Without the gradient overlay, the image appeared busy, and the text wasn’t clearly visible:

After:

With the gradient overlay, the text now stands out, ensuring readability while maintaining the beauty of the image background:

Why This Method Works

Using a gradient overlay is a simple yet effective technique for enhancing text visibility on images. The gradient darkens or lightens the image just enough to create a contrast between the text and the background, improving legibility. This method is especially useful when working with complex or colorful images that can make text hard to read.

Conclusion

Incorporating text over images is a powerful tool for web design, but ensuring that your text is readable is just as important. By using a gradient overlay, I was able to maintain the aesthetics of the image while ensuring the text remained clear and legible.

If you’re working on your website or any project that involves text on images, try this simple yet effective technique to improve the user experience.