A poster tool that never uploads your picture

There is a page on this site at /poster that puts words on a picture. You open your own image, drop text boxes on it, drag them where you want them, and style the lettering the way an image editor does layer styles. It is free, it needs no account, and there is no paid tier sitting behind it.

It exists for the job that falls between a phone and a design application: one social post, one event flyer, an album cover mock-up, a quote card. Work that needs to look set rather than typed, once, today — and does not justify opening a design application or signing up for anything.

The part worth explaining first is not a feature. It is where your picture goes, which is nowhere.

The picture stays in the browser because there is nowhere to send it

When you choose an image, the browser reads the file off your disk and draws it. There is no endpoint on this site that accepts an image. Not one that deletes the file afterwards — there is no upload at all, because there is nothing at the other end to receive it.

The same is true of the words. The text you set, the colours you pick, the positions you drag things to: all of it lives in the page while the page is open. The export is assembled in the browser too, so the finished poster never makes a round trip either.

The usual version of this promise is a policy, and a policy describes what a company intends to do with a file it already holds. A file that was never sent is not covered by a policy — it is covered by the architecture. You can check it yourself: open the network panel, load a picture, make a poster, export it, and count the requests carrying your image.

What you can actually do with it

Each text box carries a full set of layer styles. The fill is a solid colour or a two-stop gradient at an angle you set. Behind it you can stack up to three outlines, each with its own width and colour. There is a drop shadow with an angle, a distance and a blur, an outer glow, and an opacity for the whole box.

The type itself has a size, letter-spacing, and a weight control that is not font-weight — more on that below. Behind the words you can put a plate with its own colour, corner radius and outline, which is how a caption stays readable over a busy photograph.

You can set the words in any of our eight faces, or in a set of open-licensed faces bundled with the tool. Everything in it is licensed for commercial work: our own faces by the site's terms, and the free ones under the SIL Open Font License, which permits commercial use of the type and of anything set in it.

The export is a PNG at the pixel size of the picture you opened. A 4000px photograph comes back out at 4000px.

Why the outlines are not text-shadows

The first version drew each outline as a ring of twenty hard-edged text-shadow copies around the glyph, one every eighteen degrees. This is the standard trick and it is wrong.

Twenty offset copies of a shape do not add up to that shape grown outwards. On a curve the copies fall short of one another between steps and the edge scallops; at a sharp corner the copy nearest the corner's bisector reaches further than its neighbours and throws a spike. On a face with fine terminals the result reads as a printing fault rather than as an outline.

A real outline comes from -webkit-text-stroke, which is drawn along the glyph's own path. The catch is that CSS gives you exactly one stroke per element, and the tool offers three. So each outline is its own copy of the text, stacked behind the fill, widest at the back — three outlines is three copies of the same string.

<span class="stack">
	<span class="layer"     style="-webkit-text-stroke: 20px #8a8375">Poster</span>
	<span class="layer"     style="-webkit-text-stroke: 12px #b3832a">Poster</span>
	<span class="layer"     style="-webkit-text-stroke:  6px #d8b25c">Poster</span>
	<span class="layer top" style="color: #f4efe3">Poster</span>
</span>

.stack { position: relative; display: inline-block; line-height: 1.2; }
.layer { display: block; white-space: pre-wrap; }

/* The stroked copies are pinned to the filled one, which is the copy
   that stays in the flow and gives the stack its size. */
.layer:not(.top) {
	position: absolute;
	inset: 0;
	/* Without this the stroke paints over the letter it belongs to,
	   and a thick stroke swallows the glyph entirely. */
	paint-order: stroke fill;
}

/* Positioned as well, so that it paints last. */
.layer.top { position: relative; }

Two things in that block are worth keeping. The first is paint-order: stroke fill, which SVG has always had and which applies to HTML text too — without it the stroke lands on top of the fill and a 20px stroke leaves nothing of the letter behind.

The second is the last rule. A positioned element paints above an in-flow one whatever the source order says, so leaving the filled copy static puts every absolutely positioned outline above it. Making the fill positioned too puts the copies on equal footing, and then being last in the markup is what decides.

The widths in the markup are doubled on purpose. A text stroke straddles the contour, half inside the letter and half outside, so an outline meant to read 3px thick outside the letter is set 6px wide and the fill on top covers the inner half.

Why the weight control is not font-weight

Our faces are one weight each. A browser asked for bold on a single-weight font will not refuse — it invents one by smearing the glyph sideways, and on a face with hairlines and sharp terminals that looks like ink spread on damp paper.

So the weight control grows the real contour outwards, using the same mechanism the outlines use, painted in the fill colour:

.heavier {
	/* Reads as 2px heavier: half the stroke lands inside the letter. */
	-webkit-text-stroke: 4px currentColor;
	paint-order: stroke fill;
}

The shape stays the shape and only gets fatter — a different operation from a synthetic bold, and a far better-behaved one.

The control only goes up. A contour can be grown outwards and it cannot be eaten into — there is no negative stroke — so there is no lighter setting, and a face too heavy for a layout has to be set smaller or swapped.

What it is not

It is not a design application. There is no layers panel, no grouping, no masking, no blend modes, no multi-page document, and no vector export. There is no SVG or PDF out of it: the export is a PNG and only a PNG, at the size of the picture you brought.

It does not keep your work between visits, because keeping it would mean sending it somewhere. It has no templates and it will not lay out a brochure. Anything that needs revising six months from now should be built in a tool that keeps a file.

What it does is put well-set type on one picture, quickly, in faces that are cleared for commercial use, without asking you for an account or for the picture itself.

The tool is at /poster, and there is nothing to sign up for before you use it.