Add Text to Image
Add one or more text layers to a photo and drag each one exactly where you want it — resize and rotate with on-canvas handles, live, with no Apply button anywhere. Works the same way with a mouse on desktop or your finger on a phone. Everything runs in your browser, nothing uploaded.
How to Add Text to an Image
Features
Beyond a Basic Caption Box
An add-text tool overlays custom text on top of a photo or graphic — a caption, a title, a label, a quote — without needing a full design application. This version is built around direct manipulation: instead of configuring position and dimensions through form fields and clicking an Apply button to see the result, you place, size, and angle each text layer by interacting with it directly on the image, the same way you would in a slide or document editor.
This is different from a repeating watermark pattern, which stamps the same mark across an entire image for copy protection — that's the job of the Watermark tool. Add Text to Image is for composing one or more pieces of text exactly where you want them, as a creative or informational overlay rather than a repeated protective mark.
How the Live Preview and Export Work Together
Each text layer is rendered by the same Canvas drawing code both while you're editing and when you download — there is no separate DOM/CSS approximation for the live preview. While you edit, every layer draws into its own small canvas sized to fit its text, positioned on top of your image; dragging, resizing, and rotating feel instant because moving that canvas is just a position and rotation update, not a re-render of the text itself. Position, size, and rotation are all stored as proportions of the image itself, not fixed pixel values, so the editor stays accurate regardless of your screen size or zoom level.
When you click Download, the tool draws your original image at its full natural resolution, then runs each layer through that identical drawing function again — same font, same color, same effect logic — just at a much higher pixel resolution than the on-screen preview used. Because font, shadow, outline, and background are computed by one shared function rather than two separate implementations, the exported file is a sharper version of exactly what you saw, never a different-looking reinterpretation of it.
Who Actually Needs Multiple Text Layers
Social media creators adding a quote, hook, or caption directly onto a photo for a post, Story, or Reel cover.
Small businesses and sellers labeling a product photo with a price, feature callout, or promotional message for a listing or ad.
Anyone documenting a comparison — adding "Before" and "After" labels to two photos, or numbered steps across a tutorial image.
Presenters and educators adding a caption or source attribution to an image before dropping it into a slide deck or document.
From Memes to Product Labels
Adding a quote overlay to a photo: Upload the photo, type the quote into the default text layer, drag it to the lower third of the image, and turn on a semi-transparent background box so it stays readable over the busy part of the photo underneath.
Labeling a before/after comparison: Add two text layers — "Before" dragged to the left half, "After" dragged to the right half — each with a bold outline effect so the labels stay visible regardless of the photo's colors underneath.
Building a multi-line event graphic: Add separate layers for the event name, date, and location, each sized and positioned independently, then rotate one slightly for a more dynamic, hand-placed look.
Every Layer Renders Right There in Your Browser
Because both the live preview and the final export happen locally, your image is never sent to a server while you experiment with text placement — useful for anything from a personal photo to an unreleased product shot you don't want touching a third-party service. It also means the editor responds instantly to every drag, resize, and rotation, with no network round trip standing between your action and the result.
Getting Text That Reads Clearly on Any Photo
- Use a background box or outline over busy areas — plain text with no effect can disappear against a complex photo background.
- Keep font size proportional to the image — the Size value scales with image width, so the same number looks appropriately sized whether your source photo is small or huge.
- Use the layer list once you have several layers — it's the easiest way to select a specific layer that's hidden behind another one on the canvas.
- Try a small rotation for a less rigid look — a few degrees of rotation on a single layer can make an overlay feel more hand-placed than perfectly aligned text.
- Duplicate a layer instead of starting from scratch — it copies every style setting, so you only need to change the text and reposition it.
- Resize your image first if you need an exact final size — use the Image Resizer before or after adding text, depending on whether you want the text scaled with the resize.
Fixing the Most Common Text Overlay Issues
I can't select the layer I want because another one is on top of it. Use the layer list below the canvas — it lists every layer by its first line of text, and clicking one selects it regardless of what's currently on top visually.
Does the downloaded image really match what I saw while editing? Yes — the live preview and the final export both use the exact same drawing code (the Canvas API), just at different resolutions: the preview renders each layer at your screen's display size, and the export re-renders the identical layers at your source image's full resolution. Font, color, size, rotation, and every effect are computed by the same function in both places, so the download is a sharper version of exactly what you saw, not a separate re-interpretation of it.
The resize, rotate, or delete handle isn't showing. Handles only appear on the currently selected layer — click directly on the text (not just near it) to select it first, and the green square (resize), blue circle (rotate), and red circle (delete) will appear around it.
Dragging on my phone scrolls the page instead of moving the text. This shouldn't happen — touch interaction on a layer or its handles is captured directly. If it does, make sure you're starting the drag precisely on the text or a handle, not on the empty area around it.
When a Simpler Tool Fits Better
Don't use this tool if you need a repeated, tiled watermark pattern across an entire image for anti-theft protection — that's a different job handled by the Watermark tool.
Don't use it for a quick classic meme format specifically — the Meme Generator is a faster path to the standard top/bottom white-text-black-outline meme look.
Don't rely on it for print-ready typography with kerning and tracking control — this is a browser-based overlay tool, not a full typesetting application.