Social Profile Card Generator

About the Social Profile Card Generator

Fill in a name, handle, bio and follower counts, and the preview above updates instantly in whichever card style you pick (large numbers get shortened automatically, so 12500 becomes 12.5K and 1500000 becomes 1.5M, matching how real platforms display stats). The Twitter/X style stacks the stats as a list, the Instagram style spreads them across a bordered row with a gradient avatar ring, and the generic style keeps things platform-neutral. When it looks right, Download as PNG renders the card to an image in your browser and saves it, no account or upload required.

The K/M formatter handles its own rounding edge case

Shortening a count to "K" or "M" is done with basic division and toFixed(1), but that alone creates a rounding glitch right at the boundary: a value like 999,600 divided by 1,000 and rounded to one decimal comes out to "1000.0K" instead of correctly rolling over into millions. The formatter explicitly checks for that exact "1000.0" result and returns "1M" instead, catching the one case simple division-and-round math gets wrong at the K-to-M threshold.

Typing "@" into the handle field doesn't produce a doubled "@@"

The handle output always prepends its own "@" symbol, but before doing that it strips any leading "@" you may have already typed into the field with .replace(/^@/, ""). That means typing either mayarivera or @mayarivera into the Handle field produces the identical @mayarivera in the preview, so it doesn't matter which way you're used to writing a handle.

Instagram's gradient ring relies on a subtle CSS box-shadow fix

The Instagram avatar's ring effect is built from two stacked box-shadows: a 3px white shadow that creates the ring itself, and a second, wider shadow that's meant to stay invisible. The stylesheet actually declares box-shadow twice in a row on that rule — the first version leaves the second shadow's color unset, which in CSS defaults to currentColor (here, the avatar's own white text color), and would incorrectly render as a second solid white ring. The second, later declaration explicitly sets that shadow's color to transparent, overriding the first and fixing the unwanted extra ring — a small but real CSS gotcha around how unset shadow colors inherit.

Switching to Instagram style physically moves the avatar's text node, not clones it

The Instagram layout needs an extra wrapper div inside the avatar circle to support its gradient-ring styling, so switching to that style creates a new inner div and moves the existing letter/emoji <span> element into it with appendChild() — the same DOM node, relocated, not a copy. Switching away reverses that by re-appending the same span directly back into the outer avatar element. A quick parent-element check before doing this work skips redundant DOM operations if the avatar is already correctly structured for the current style, avoiding unnecessary reflows on every keystroke.

Card style switching replaces the whole class list at once

Rather than toggling individual style classes on and off, changing the Card Style dropdown sets the preview's entire className in one line: "spc-wrap " + spcPlatform.value. That wholesale replacement guarantees no leftover class from a previously selected style can linger and conflict with the new one, since the class list is rebuilt from scratch on every style change instead of being incrementally patched.

The emoji field's 4-character limit accounts for multi-part emoji

The Avatar Emoji field caps input at maxlength="4" rather than 1 or 2, because many emoji aren't a single character under the hood — a flag emoji is built from two regional-indicator code points, and skin-tone variants combine a base emoji with a modifier character, together spanning more UTF-16 code units than a simple face or symbol emoji. Capping too low would silently truncate those compound emoji into a broken half-symbol, so the limit is set generously enough to accommodate most common multi-part emoji while still stopping someone from pasting in a long string of text.