How to Add Text to an Image Online (Free, No Signup)

· Javed Iqbal · 6 min read

Last week I needed a quote card for a post, at about 11pm, and I did not want to open a 1GB design app or make yet another account just to type six words over a photo. That is a surprisingly common little chore. A caption on a screenshot, a title on a thumbnail, a meme, a story slide. You do not need Photoshop for it. You need a text box and an image.

So here is the quick, honest version of how to add text to an image online, what to do when the text disappears into a busy photo, and, for the developers reading, how the same thing works in a few lines of canvas code.

The fast way

Open the Add Text to Image tool and it is four steps:

  1. Type your text in the Text box. Hit Enter for a second line.
  2. Pick a background: upload your own photo, choose a gradient, or set a solid color.
  3. In the Font tab, set the font, size, and color. Toggle bold, italic, or a shadow.
  4. Drag the text where you want it, then Download the PNG (or Copy it straight to your clipboard).

It runs entirely in your browser. Your photo is never uploaded to a server, and the file you download has no watermark on it. That second part matters more than it sounds: a lot of free "text on image" sites stamp their logo across the corner of your export.

The real problem: readable text on a busy photo

White text over a bright sky vanishes. Black text over a dark forest vanishes. This is the thing people actually struggle with, and there are three fixes that stack:

  • Dim the background. The brightness slider darkens the whole image behind the words. Drop it to around 60% and white text pops immediately.
  • Turn on the text shadow. A soft shadow gives the letters an edge so they separate from whatever is behind them, even over a photo with both light and dark areas.
  • Contrast, not just color. Light text on a darkened photo, or dark text on a light one. If the text and the spot behind it are similar brightness, no font size will save it.

If you want more control over the photo itself first (crop it, straighten it, blur out a face or a license plate), run it through the image cropper or the image annotator, then bring it here for the text.

Pick the size before you start, not after

The most common mistake is making the image at the wrong shape and cropping it later, which chops your text. Choose the size up top first:

  • Square (1:1) for a standard Instagram or LinkedIn post.
  • Portrait (4:5) for feed posts that take up more vertical space.
  • Story (9:16) for Instagram or TikTok stories.
  • Landscape (16:9) for YouTube thumbnails and blog covers.
  • Wide (1200x630) for the link preview that shows when you share a URL.

A note on fonts (and a small honesty)

There are 11 fonts, from clean sans like Inter and Montserrat to poster faces like Bebas Neue and Anton to handwriting like Caveat and Pacifico. For a quote card, a serif like Playfair Display reads elegant. For a loud thumbnail, Anton in uppercase is hard to beat.

Here is the honest bit. For the display and script fonts, the bold and italic toggles are limited, because those fonts only ship one weight. The browser fakes a slant or thickness on the canvas, and faux styling never looks as good as a true weight. So on a script font, leave italic off. On Inter or Roboto, bold is real and it looks right.

For developers: doing it in code

If you would rather script this (batch a hundred cards, generate them on the fly), it is just the Canvas API. The tool is a friendlier wrapper around exactly this:

const canvas = document.createElement('canvas');
canvas.width = 1080;
canvas.height = 1080;
const ctx = canvas.getContext('2d');

// background
ctx.fillStyle = '#0f172a';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// text
ctx.fillStyle = '#ffffff';
ctx.font = '700 120px Inter, sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// a soft shadow so it stays readable
ctx.shadowColor = 'rgba(0,0,0,0.55)';
ctx.shadowBlur = 14;

ctx.fillText('Your text here', canvas.width / 2, canvas.height / 2);

// export
canvas.toBlob((blob) => {
  const url = URL.createObjectURL(blob);
  // download or upload url...
}, 'image/png');

The one gotcha: if you use a web font, wait for it to load before you draw, or the first render falls back to a system font. await document.fonts.load('700 120px Inter') before the fillText call. Multi-line text is not automatic either; you split on spaces, measure with ctx.measureText, and draw line by line.

When this tool is the wrong tool

It does one job well: text on an image, fast and private. It does not do curved text, stacked layers, stickers, or drawing. If you are building a full poster with a dozen elements, a heavier editor like Photopea or Canva is the right call. For a caption or a quote card, opening one of those is overkill, and that gap is exactly why this exists.

FAQ

Is it really free with no signup?

Yes. No account, no upload, no watermark. It runs in your browser and your image stays on your device.

Can I add text to my own photo?

Yes. Set the background to Image and upload a PNG, JPG, or WebP. It is drawn locally and never sent anywhere.

How do I move the text?

Drag it on the image. You can also set left, center, or right alignment, or use Reset text position to recenter it.

What format does it download?

A high-resolution PNG at the size you picked. You can also copy the image straight to your clipboard.

Try it now with the free Add Text to Image tool. Need to prep the photo first? Crop it in the image cropper or clean it up in the annotator.