Instagram Story Generator (Fake)

About the Instagram Story Generator

Choose a background gradient or pick a custom color, write a headline, and adjust its size and color with the sliders while the vertical story frame updates live. When it looks right, download it as a high-resolution PNG, handy for mockups, promos, or just messing around.

The 270×480 frame matches Instagram's real 9:16 story ratio exactly

270 divided by 480 works out to 0.5625, which is precisely 9:16 — the same aspect ratio Instagram stories are actually shot and displayed in (native story resolution is commonly 1080×1920, also a 9:16 ratio scaled up). That's why the preview looks correct as a phone-shaped vertical card rather than an arbitrary rectangle: the frame dimensions were chosen to mirror the real format, not just picked for visual balance.

Why the export uses scale: 3 instead of scale: 2

This site's DM and post generators export at scale: 2 through html2canvas, but the story generator uses scale: 3. Since the on-screen frame is only 270×480 to begin with, tripling it during capture produces an 810×1440 PNG — noticeably closer to a real story's native 1080×1920 resolution than doubling would give. The smaller the source frame, the more scale multiplier is needed to reach a resolution that still looks sharp when viewed at full size or reposted.

Swatches and the custom color picker write to the same property, so the last one used wins

Clicking a background swatch and adjusting the custom color picker both do the same thing under the hood: they set isPreview.style.background to a new value and store it in a shared variable. There's no separate "mode" being tracked — picking a swatch after using the custom color simply overwrites it with a gradient, and moving the color picker after clicking a swatch overwrites the gradient with a flat color. Whichever control you touched most recently determines what shows in the exported image.

The progress bar and "Tap to vote!" sticker are fixed decoration, not functional elements

The thin bar under the story's top edge is a static two-layer div — an outer track and an inner fill locked at a fixed 60% width — meant to visually reference the segmented progress indicator real Instagram stories show while auto-advancing, but it never actually animates or updates. Likewise, the "📊 Tap to vote!" sticker at the bottom is a hardcoded label with no interactive poll behind it. Both exist purely to make the mockup read as an authentic story screenshot at a glance, not because the tool simulates Instagram's actual story mechanics.

Headline text is rendered safely and wraps to fit the frame

The headline is written into the preview with textContent, not innerHTML, so typing HTML or script tags into the field just displays those characters literally rather than being parsed as markup. Because the input is a single-line text field, it can't hold an actual typed line break — but the headline element's CSS still sets white-space: pre-wrap alongside word-wrap: break-word, which matters once the font-size slider is pushed up: long headlines wrap cleanly across multiple lines inside the fixed-width frame instead of overflowing or getting clipped at the edges.

The avatar circle and color pickers rely on the browser's native controls

The small avatar circle in the top-left doesn't accept its own separate input — it derives its letter automatically from whatever username is typed, taking just the first character with charAt(0).toUpperCase(), the same pattern used across this site's other fake-post and chat generators for visual consistency. The custom background and text color pickers are both plain <input type="color"> elements, which means the actual color-selection UI (the swatch grid or eyedropper, depending on your browser) is supplied by the operating system or browser itself rather than built into the page, and every change fires instantly on the input event rather than waiting for a confirm click.