Generate a 1×1 Pixel PNG
Make a single-pixel PNG — transparent or any colour — the smallest valid image, for spacers, beacons and CSS fills.
Describe the edit — the AI assistant does it on the canvas.
Free preview · No signup · ~10 seconds
Free downloads are 60% size. Create a free account for the full-resolution, lossless file.
Get the full-quality fileThe account is free. Exporting at full quality uses one credit — packs start at €0.99 for 3, with no subscription.
The smallest useful image there is
About seventy bytes
A one-pixel PNG is close to the smallest valid image a browser will accept. That size is the whole point — it is used in places where an image element must exist but must not cost anything to fetch.
Spacers and stretched fills
The classic use is a transparent spacer forced to a given width and height by the markup. A coloured one stretched with CSS is also the cheapest possible way to paint a solid block without adding a background rule.
Beacons, and the honest caveat
Single-pixel images are what tracking beacons are made of. If that is the use, disclose it — a pixel that reports back without the reader knowing is the thing privacy rules exist about, and it is trivial to detect.
Transparent by default
The default is fully transparent, which is what a spacer needs. Pick a colour if you want a fill, and it comes out as an exact lossless value.
Or inline it
At this size the file is often better inlined as a data URI than served as a request. Generate it here and run it through the image-to-data-URI tool if that is what you need.
Serve it or inline it
Data URI
Inlined in the markup
- No HTTP request at all
- About a third larger as text
- Cannot be cached separately
- Works offline
A pixel used once, in one document
A beacon that has to reach a server
Hosted file
A real request
- Cached across pages
- Roughly seventy bytes
- Costs one round trip
- Server sees the request
Reuse across many pages, or a disclosed beacon
Avoiding a network round trip
How to generate a 1×1 pixel png
Pick a colour
Leave it transparent for a spacer, or choose a fill.
Take the pixel
One pixel, around seventy bytes.
Download
Free preview, or the full-resolution file in the app.
Where a single pixel is the tool
HTML spacers
Force layout spacing where CSS support is unreliable.
Stretched CSS fills
Paint a solid block from the cheapest possible image.
Test fixtures
Use the smallest valid PNG in a test suite.
Disclosed beacons
Build an open-tracking pixel — and tell people it is there.
Used by designers, indie devs & students at
What people use it for
The jobs the editor was built around — and what it does differently on each one.
Colourways you can revisit
Every edit is a layer, not a bake. When the brand shifts, reopen the file and change the colour rather than rebuilding the variant from the original.
Cutouts with awkward edges
AI background removal that keeps hair, foliage and soft shadows instead of stamping a hard outline around them. The output is a transparent PNG, ready to place.
No export, edit, re-import loop
The Framer plugin runs on the canvas you are already working in, so a recolour or a cutout does not mean a round trip through a second application.
Ten options in the time one used to take
Recolour once and step through the alternatives, so a client review can look at the whole range instead of the one version there was time to make.
Brand colours matched exactly
Pick a colour straight off an existing asset and get the hex, rather than eyeballing it against a screenshot and hoping it is close enough.
Free to preview, priced per export
Previewing is unlimited and costs nothing. A credit is spent only when you download a full-resolution file, so exploring an idea is never the expensive part.
Frequently Asked Questions
Related Tools
Guides worth reading
How to Fix Blurry or Fringed Edges on a Transparent PNG
Why your transparent PNG has a white halo, a grey fringe or soft edges — the four real causes, how to tell them apart in seconds, and the fix for each.
SVG vs PNG for Logos: Which File Do You Actually Need?
What SVG and PNG really are, where each one wins, why your developer keeps asking for the SVG, and the three files that cover almost every request.
How to Replace a Color in Photoshop (4 Methods, and Why the Edges Go Wrong)
Replace Color, Hue/Saturation on a targeted range, Color Range plus a fill layer, and Selective Color — which to use when, and why a recolored logo keeps a halo of the old color along its edges.
Generate a 1×1 pixel
The smallest valid PNG there is.