CodeKitHubWhat Is This Tool?
Facebook Story Generator recreates the vertical, full-screen look of a real Facebook Story — profile ring, name and timestamp header, a background photo or gradient, bold overlay text, and the reply-bar strip at the bottom.
It must never be used to fabricate fraudulent evidence, harass or defame someone, or impersonate a real person's actual posts or stories — doing so may be illegal depending on your jurisdiction.
Everything is generated locally in your browser using the HTML Canvas API; nothing is ever uploaded to a server.
Why Use It?
- You're designing a social app feature and need a realistic vertical Story mockup to put in a slide deck for stakeholders, before any of the real UI or backend exists.
- You're building a meme format that plays on the look of a Story update — the reply bar, the timestamp, the bold overlay text — and want it to read as genuinely Facebook-styled rather than a plain image with text slapped on top.
- You're teaching a social media marketing class and want a clean example of a Story post's anatomy (avatar ring, timestamp, overlay text, reply bar) to walk students through without screenshotting someone's real account.
- You're putting together a design portfolio piece that shows a Story concept and need the 9:16 vertical format and layout details to actually match Facebook's real proportions.
- You want to try several background gradients or overlay-text placements quickly, since everything updates live in the preview and there's no account or watermark slowing you down.
How to Use
- Set the name, timestamp and avatar color (or upload a photo).
- Pick a background gradient or upload your own image.
- Type the overlay text that appears near the bottom of the Story.
- Watch the live vertical preview update, then click "Download PNG" to save the image.
Example
Input
Name: "Sam Whitfield" · Time: "4h" · Background: blue-to-pink gradient · Text: "Sunday morning coffee ☕"Output
A 360×640 PNG styled like a real Facebook Story: profile ring avatar, name and timestamp, a full-bleed gradient background, bold centered overlay text, and a reply-bar strip with a heart icon at the bottom.The image renders instantly in the live preview canvas and downloads with a single click — no waiting, no server round-trip.
What you can customize
- Profile name, timestamp, and avatar color or photo.
- The background: a two-color gradient or an uploaded image.
- The bold overlay text shown near the bottom of the Story.
- Layout details matching Facebook's real Story visual style.
Responsible use
This generator exists to make it easy to create clearly fictional mockup images for humor, storytelling and design work. If you share an image made with this tool, consider adding context so viewers understand it is not a real Story.
What each field controls
| Field | What it changes |
|---|---|
| Name | Display name shown in the header next to the avatar ring |
| Timestamp | Free-text time shown next to the name (e.g. "4h", "2d") |
| Avatar color / upload | Colored-initials avatar, or your own uploaded photo |
| Background gradient / upload | Two-color gradient, or your own uploaded background image |
| Overlay text | Bold text shown near the bottom of the Story |
Frequently Asked Questions
Is it legal or ethical to use this tool?
The tool itself is legal to use for entertainment, mockups, presentations and design work. What is not legal or ethical is using the generated image to deceive someone. Please only use this for clearly fictional or illustrative purposes.
Does the tool upload my content anywhere?
No. Everything you type or upload stays in your browser's memory and is drawn directly onto a canvas element with JavaScript. The PNG is generated and downloaded on your device — nothing is ever sent to a server.
Can I upload my own photo as the Story background?
Yes — click the upload link under "Video background" to use your own image as the full-bleed Story background instead of the gradient.
What image size does it export?
The exported PNG is 360×640, matching the vertical 9:16 aspect ratio used by real Facebook Stories.
Should I use this or one of the other Facebook mockup generators?
If you're mocking up a full-screen vertical Story, use this Story generator. If you need a comment thread instead, use the Facebook Comment Generator; if you need a full profile page with cover photo and bio, use the Facebook Profile Generator.
Can I control where the overlay text sits on the Story, like top vs. bottom?
The overlay text is positioned near the bottom of the Story by default, matching the most common real Facebook Story text placement. Positioning isn't freely draggable, so if you need text elsewhere, that's a layout constraint of the current tool.
What file format does the background image upload accept?
Standard web image formats like JPG and PNG work for the background upload. If you skip uploading, the tool falls back to a two-color gradient you can pick with the color controls.
Does the timestamp update automatically, or is it something I type in?
It's free text you type in yourself — enter Facebook-style relative time like "4h" or "2d" to match the context of your mockup; it doesn't pull the actual current time.
Can I add multiple lines of overlay text, or just one line?
You can type as much text as you want into the overlay field, but since real Stories keep text short and bold for readability, very long text may wrap awkwardly — shorter phrases render closest to how a real Story looks.
Does the exported image include video, or is it a static image only?
Static image only — the tool exports a single PNG frame styled like a Story, it does not create an animated or video Story.