Edit the URL and the controls follow it. Paste one in from anywhere.
Examples
Every image below is the URL under it. Hover one to copy the URL or view the image.
The URL
| Form | Gives you |
|---|---|
/600x400 | An explicit size. |
/600 | A square. |
/16:9?w=800 | A ratio scaled to a width. Use ?h= to scale from the height instead. With neither, the width is 1200. |
/600x400.png | Format as a file extension, for tools that insist on one. |
The path holds the size and nothing else. Everything else is a named parameter, so you never have to remember which of two colours came first.
Parameters
| Parameter | Values | Default |
|---|---|---|
text, t | Any text. \n starts a new line, up to 8. text= leaves it blank. | the size |
bg | Hex with or without the #, a name, or transparent. | e2e8f0 |
color, fg | Same, for the text and iconography. Left out, it picks whichever of four inks clears WCAG AA against your background. | auto |
icon | Any Lucide name, e.g. shopping-cart. The full list is at /icons.json. | none |
iconsize, is | Pixels, or a percentage of the shorter side (40%). Capped at the shorter side. | 30% of the shorter side |
type | image, avatar, card, product, video, text. Presets: an icon, plus behaviour a bare icon name cannot carry (avatar rounds itself). | none |
radius, r | Pixels, 50% of the shorter side, or full. | 0, or full for type=avatar |
border, b | 2, 2,cbd5e1, or a bare colour for a 1px rule. | none |
opacity, o | 0 to 100, as a percentage of the whole image. | 100 |
blur | 0 to 100. Gaussian, clipped to the corner radius. | 0 |
font | sans, serif, mono, or any of the 14 bundled families by name: inter, lato, montserrat, noto-sans, open-sans, oswald, poppins, pt-sans, raleway, roboto, source-sans, lora, playfair, jetbrains-mono. Any other family works in SVG if the viewer has it. | sans |
fs, fontsize | Pixels. | fitted to the box |
fw, weight | 100 to 900. | 600 |
format, f | svg, png, webp. | svg |
scale, dpr | 1 to 4. Raster only. | 1 |
q, quality | 1 to 100. WebP only. | 82 |
Colour names use the Tailwind 500 scale, not the CSS one, because CSS
red is
#ff0000 and nobody wants that behind a caption. Available:
transparent white black slate gray grey zinc stone red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose navy brown silver light dark.
Notes worth reading once
- SVG is the default on purpose. It is a few hundred bytes, stays sharp at every zoom, and costs the server no pixel work.
- 14 fonts are bundled for PNG and WebP, subset to Latin,
so
?font=means the same thing in every format. The renderer has no system fonts to fall back on, so a family that is not on that list still works in SVG, where the viewer's own machine resolves it, and falls back to a generic in raster. - A transparent gradient stop keeps its neighbour's colour. Fading
blue to
transparentfades blue to nothing, not to transparent black, which is the grey bruise you get from the naive reading. - The icon set is all of Lucide, ISC licensed, bundled rather than fetched. A name that does not exist is a 400 listing near misses, not a blank image.
- Every URL is immutable. Same URL, same bytes, cached for a year. Change a parameter to get a different image.
- Sizes are capped at 5000px per side, and raster output at 4 million pixels after scaling.
- Nothing is stored and nothing is tracked. There is no database and no account, because a URL is the whole input.
- CORS is open and
Cross-Origin-Resource-Policyis set, so you can draw these into a<canvas>without tainting it.