What is a story ring?
On Instagram, a colourful ring appears around someone’s profile picture when they have an active Story. The yellow-orange-pink-purple gradient has become one of the most recognisable visual cues on social media — it says “there’s something new to see here”. A green ring signals a Close Friends Story.
Creators use the same look on thumbnails, YouTube channel art, presentation slides, websites and “follow me” graphics to make an avatar feel clickable and current. This story ring generator recreates the effect around any photo, with full control over the colours, ring thickness and the white gap.
How to add a story ring to your photo
- Upload your profile photo and drag it to centre your face; use the zoom slider to fill the circle.
- Pick a ring preset — Instagram classic, Close friends, Sunset, Ocean, Candy, Neon or Royal.
- Fine-tune the colours with up to five colour stops, or add and remove stops to build your own gradient.
- Adjust thickness and gap so the ring looks bold on small screens, and choose a white, black (dark mode) or transparent gap.
- Download the PNG — the area outside the ring stays transparent, ready to drop into any design.
Where to use a story ring avatar
A ring-framed avatar works anywhere you want people to recognise you and click: as the face on a YouTube thumbnail, the author photo on a blog, a “find me on Instagram” slide at the end of a Reel, a speaker card for an event, or the profile image on Discord, Twitch or Threads.
Because the PNG has a transparent background, you can place it over photos, coloured backgrounds or video without a white box around it. Export is 1080×1080 pixels, so it stays sharp even when scaled up.
Design tips
- Thicker rings read better small. At avatar size, 4–6% thickness is easier to see than a hairline ring.
- Use the gap. A white gap between ring and photo is what makes the Instagram look instantly recognisable.
- Go dark for dark mode. If your graphic sits on a black background, switch the gap colour to black.
- Brand it. Swap the classic gradient for your brand colours to keep the effect on-message.
💡 Want a full background or a solid ring instead? The Profile Picture Maker adds gradient backgrounds and borders too.
Related tools
Pair your ring avatar with matching highlight covers, create a scannable QR code card for your profile, or plan your feed with the Grid Planner.