Preview text overlaid on images with adjustable font, size, color, and position.
Select the background image for your text overlay.
Type the text you want to display on the image.
Adjust font, size, color, position, and shadow.
Save the image with your text overlay applied.
Upload an image, type a line of text, and the tool draws that text over the picture with the font, size, color, and position you choose. It exists so the overlay can be judged against the real image instead of imagined: every adjustment re-renders the preview in place, and the compositing happens in the browser, so the picture never leaves your machine. What surprises people: text that looks fine on its own can vanish over a busy photo. Legibility is a property of the text-plus-image combination, and the purpose of the preview is to catch that before the text is baked into the final graphic.
A concrete input and expected output from the current implementation.
Input
Image: a 1600 x 1000 px beach photo. Text: 'SUMMER SALE'. Settings: Arial, 50 px, white, bottom-center.
Expected output
The preview shows 'SUMMER SALE' in white Arial at 50 px, centered along the bottom edge of the photo. The image is 1000 px tall, so the text height is 5% of the frame - a compact band near the bottom, small enough that the subject stays visible.
The preview renders the text at the chosen size against the image's actual pixel dimensions, so the ratio between text size and picture size is what determines prominence. 50 px is one twentieth of a 1000 px-tall image, which is why the text reads as a strip rather than a headline.
The image and text are composed together in the browser, and each of the four controls - font, size, color, position - redraws the preview the moment it changes. There is no commit step between choosing a setting and seeing it, so the overlay is judged directly against the pixels it will sit on and combinations can be compared quickly.
Font size is measured in the image's own pixels, not screen pixels. The same 50 px text covers 5% of a 1000 px-tall image but 25% of a 200 px-tall one, so one numeric size means different things for different uploads. Judge the effect by the text-to-image ratio the preview shows, not by the number itself.
Move it to a quieter part of the picture - sky, wall, or other plain area - since busy detail behind the letters is the usual culprit. Also try a larger size and a color that contrasts with what sits directly behind the text. The preview redraws on every change, so combinations can be compared in seconds.
Not guaranteed. The preview shows the browser's rendering of that font at that size over the image; the final look also depends on which fonts and rendering the tool that produces your actual image uses. Use the preview to settle layout, size, color, and placement, then confirm the result in the final step.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Count words, characters, sentences, and paragraphs in any text instantly.
Convert text between uppercase, lowercase, title case, sentence case, and more.
Paste text and hear it read aloud using Web Speech API. Adjust voice, speed, and pitch in real time.
Compare two blocks of text side-by-side and highlight differences instantly.
Paste text and instantly remove duplicate lines while preserving order.
Strip extra whitespace, fix line breaks, and normalize text for clean output.