What Is Text Overlay? Definition, Types, Examples, and How to Make One (2026)

Text overlay is any text that is layered onto an image or video so that the words and the visual are read together as a single piece of content. That single sentence covers everything from a caption on a meme to a cinematic title that appears to sit behind a person in a photo. If you have scrolled a social feed, browsed YouTube, or looked at an ad in the last decade, you have seen thousands of text overlays without thinking about them. This guide explains what text overlay means in practice, the three main types you will encounter, where each one is used, the readability principles that separate professional overlays from amateur ones, the mistakes almost everyone makes at first, and how to build your own in a browser in about three steps using a free text overlay tool.

What Does Text Overlay Mean?

In graphic design and video editing, to "overlay" something is to place one layer on top of another. A text overlay is therefore the typography layer that sits above (or is woven into) your base image or footage. The word "overlay" is doing real work here: the text is not beside the picture, in a caption field, or in the description. It is part of the picture itself, and it travels with the image wherever it is shared, embedded, screenshotted, or reposted. That distinction matters because a caption depends on the platform. Instagram truncates it, Pinterest hides it, a screenshot drops it entirely. Text that is baked into the image survives all of that. It also changes how the image is read. A photo of a beach is just a beach; the same photo with the words "5 Hidden Beaches in Bali" becomes a promise, a headline, and a reason to click. The overlay gives the visual a job. Text overlays show up in still images (posts, thumbnails, ads, slides) and in video (titles, lower thirds, subtitles, animated captions). The same design principles apply to both, so this article focuses on stills, where you can practice the fundamentals quickly. If you want to go straight to a hands-on walkthrough, see how to overlay text on an image.

The Three Main Types of Text Overlay

Almost every text overlay you will see falls into one of three categories. They look very different, but they are all built from the same ingredients: an image, a text layer, and a decision about how the two interact.

1. Text on Top of an Image (Standard Overlay)

This is the classic form and what most people mean when they say "text overlay." The text sits fully in front of the photo: a title across the top third of a blog header, a quote centered on a gradient, a price label in the corner of a product shot, subtitles along the bottom of a video frame. Because the text covers part of the image, the main craft is choosing where to put it and how to keep it legible, usually with contrast, a drop shadow, an outline, or a semi-transparent box behind the letters. It is the fastest type to make and the right choice for most everyday posts. You can make one in seconds with our add text to photo tool.

2. Text Behind Image (Text Behind Object)

Text behind image, also called text behind object or text behind person, is an overlay where the words appear to sit behind the main subject but in front of the background. A person's head and shoulders partially cover the letters, which instantly reads as depth, as if the text were a sign standing in the scene. Traditionally this required cutting the subject out by hand in Photoshop and stacking three layers. Today, AI subject detection does the cut-out automatically: our text behind image tool runs a segmentation model in your browser to separate the subject from the background, so the photo is processed on your device for that step. It is popular for YouTube thumbnails, portraits, and product photography. For a deeper look at the mechanics, read how to create the text behind image effect.

3. Knockout Text (Cutout or Transparent Text)

Knockout text flips the relationship between text and image. Instead of colored letters on top of a photo, a solid block of color covers the photo and the letters are "punched out" of that block, so the image shows through only inside the letter shapes. The result feels editorial and premium, and it solves readability permanently because the letter edges are defined by a solid color rather than by whatever happens to be in the photo. A related variant exports the letters themselves as a transparent PNG so you can drop image-filled type onto any background. Try the knockout text generator or the transparent text generator, and see the full walkthrough in our knockout text guide.

Which type should you start with?

Start with text on top. It teaches contrast and placement, which every other type depends on. Move to text behind image when you have a clear subject with an uncluttered background, and use knockout text when you want a bold, poster-like headline and the photo is more texture than content.

Where Text Overlays Are Used

Text overlay is not a niche design trick. It is the default way words and pictures are combined online. A few of the most common places you will use it:

Social media posts: Quote graphics, tips, announcements, carousels, and Reels or TikTok covers. The overlay is the hook that stops the scroll; the caption fills in the details for people who stopped.
YouTube thumbnails: Three to five bold words that tell viewers what the video is about at a glance. Thumbnails are viewed small, so oversized type and strong contrast matter more here than anywhere else.
Ads and promotions: Offers, discounts, and calls to action placed directly on the creative so the message lands before anyone reads the ad copy. Platform guidance generally favors clean, minimal text on ad images, so keep it to one headline and one CTA.
Presentations and slides: Section titles over full-bleed photos, key numbers set large over a darkened image, and lower-third labels. The same contrast rules that work for social apply on a projector.
Product photos and e-commerce: Product names, prices, "new" or "sale" badges, and short benefit statements layered onto product shots. Knockout and text-behind styles are common in lifestyle product imagery.
Blog headers, Pinterest pins, and email banners: A headline on the image gives the reader context before a single line of body copy loads.

Readability Principles for Text Overlays

A text overlay only works if it can be read in about a second, on a phone, by someone who was not planning to read anything. Four principles do most of the work.

Contrast

Contrast is the difference in lightness between your letters and whatever sits directly behind them. Light text needs a dark area; dark text needs a light area. When the photo will not cooperate, manufacture contrast: add a soft drop shadow, a thin outline, a semi-transparent box, or a gradient "scrim" that darkens one edge of the image. Our guide to making text readable walks through each of these fixes with examples.

Hierarchy

Hierarchy tells the eye what to read first. Your headline should be clearly larger and heavier than any supporting text; a good rule of thumb is that the primary line is at least twice the size of the secondary line. If everything is the same size and weight, nothing is important. One dominant message per image, with at most one supporting line, is the safest structure for social and thumbnails.

Safe Zones

Every platform draws its own interface over your image: usernames, captions, like buttons, progress bars, the video duration badge. Keep essential text away from the outer edges, and for vertical formats avoid the bottom quarter and the very top of the frame, where UI overlays are heaviest. When in doubt, keep critical words inside the central area of the image so they survive cropping and interface clutter.

Font Pairing

Use one or two typefaces, never more. A common pairing is a heavy condensed or geometric sans-serif for the headline and a lighter, simpler sans-serif for a supporting line. Thin, script, and highly decorative fonts break down at small sizes and disappear when part of the letter is hidden behind a subject, so reserve them for large, uncluttered layouts. For specific recommendations, see the best fonts for adding text to photos.

Common Text Overlay Mistakes

Most weak overlays fail for one of a handful of reasons. Check your design against this list before you export:

Low contrast: White text over a bright sky or dark text over shadows. If you have to squint, so will everyone else.
Text covering the subject: Placing words across a face or the product you are trying to sell. Move the text, or switch to text behind image so the subject stays fully visible.
Too many words: An image is a headline, not a paragraph. Aim for three to seven words for the main line and move the rest to the caption.
Too many fonts and colors: Three typefaces and four colors read as noise. Limit yourself to two fonts and a small palette drawn from the photo.
Ignoring the phone: Text that looks fine on a desktop monitor is often unreadable at feed size. Always preview at actual mobile size before posting.
Forgetting safe zones: Critical text hidden under a caption, a progress bar, or a duration badge.
Heavy-handed effects: Harsh, fully opaque shadows and thick neon outlines look dated. Keep shadows soft and outlines thin.

How to Create a Text Overlay in Your Browser (3 Steps)

You do not need Photoshop or a design background. Everything below happens in a normal web browser on a laptop or phone, and you can edit and download without creating an account.

1. Upload your photo. Open the Overlay Text editor and drop in a JPG, PNG, or WEBP. Photos with a clear subject and a simple background give you the most flexibility, especially if you plan to try the behind-subject effect.
2. Add and style your text. Type your headline, choose a bold font, and set a color that contrasts with the area behind it. Add a soft shadow or outline if the background is busy. Then pick a mode: text on top, text behind the subject (the AI detects the subject automatically), or knockout. Adjust size, position, and opacity until the message reads instantly at a small size. Stuck on wording? The AI image caption generator suggests short lines based on your photo.
3. Download. Export your image. Free downloads are 720p and include a small "Made with Overlay Text" watermark; Pro exports at the original resolution with no watermark. The same editor is also available as an iOS and Android app if you prefer working on your phone.

Looking for ideas?

If you know how to make an overlay but not what to make, browse our roundup of text overlay ideas and design inspiration for layouts you can copy.

Text Overlay vs. Caption vs. Watermark

These three terms get mixed up, so here is the short version. A caption is text stored alongside the image by the platform; it can be edited later and is not part of the file. A text overlay is text rendered into the image itself; it cannot be separated from the picture once exported. A watermark is a specific kind of overlay, usually small, semi-transparent, and placed in a corner, whose purpose is attribution or protection rather than communication. In practice a single image often has all three: a headline overlay, a small brand watermark, and a longer caption underneath.

Frequently Asked Questions

What is text overlay in simple terms?

Text overlay is text placed directly on an image or video so the words become part of the visual. Unlike a caption, which lives in a separate field, an overlay is rendered into the picture itself and stays with the image when it is shared, embedded, or screenshotted. Titles on thumbnails and quotes on photos are everyday examples.

What is the difference between text overlay and text behind image?

Text behind image is one type of text overlay. In a standard overlay the text sits fully in front of the photo. In text behind image, the subject is separated from the background so the letters appear behind the person or object and in front of the scenery, which creates a sense of depth. Both are overlays; they differ in layer order.

Is text overlay free to make?

Yes. Browser tools like Overlay Text let you upload a photo, add and style text, and download the result without paying or creating an account. Free exports are 720p with a small watermark; a Pro plan removes the watermark and exports at original resolution. Traditional desktop software can do the same job but usually requires a subscription.

What makes a text overlay readable?

Strong contrast between the letters and the area directly behind them, a clear size hierarchy so one message dominates, placement away from platform interface elements, and a bold, simple font. When the photo is busy, add a soft shadow, a thin outline, a semi-transparent box, or switch to knockout text so the letter edges are defined by a solid color.

Can I create text overlays on my phone?

Yes. Browser-based editors work in mobile Safari and Chrome, so you can upload a photo, add text, and download the result on a phone without installing anything. Overlay Text is also available as an iOS and Android app. On mobile, keep text large and preview at actual size, since that is how most viewers will see it.

Conclusion

Text overlay is the bridge between a picture that looks nice and a picture that says something. Once you understand the three types, where each is used, and the handful of readability rules that make them work, the rest is practice. Start simple: open the free text overlay app, put one bold line on a photo, and check it at phone size. When that feels easy, try text behind image for depth or knockout text for a poster-style headline, and use our step-by-step guide to overlaying text on an image whenever you want a refresher.

Written by

Vikram Hegde

Vikram builds Overlay Text, the browser-based text-behind-image and knockout text editor, and writes the tutorials on this blog based on how the editor actually works.

Try the steps in this article in the free Overlay Text editor.