The short version
- A link in bio page is a small mobile landing page that collects the few places you want profile visitors to go next.
- The best link in bio page design uses three to five buttons, ordered by what matters most this week.
- Visitors arrive from a phone, so design the page for a narrow vertical screen first and check it at a phone width.
- The page should wear the same background, colours and fonts as your feed, so the tap feels like walking into the same shop.
- When the link is shared in a message, its preview image is a separate 1200×630 graphic worth designing too.
On this page
Good link in bio page design is a short mobile landing page: your name, one line about what you do, three to five buttons in order of importance, and a background that matches your feed so the visit feels continuous. Almost everyone arrives from a phone, straight from your profile, with a few seconds of attention. Every choice below follows from that.
What a link in bio page needs, in order
Read the page top to bottom the way a visitor does. They want to confirm they are in the right place, see what they can do, and do it. Anything that slows those three steps can go.
Keep it to
Keep it to
What to put there
Keep it to
What to put there
Keep it to
Keep it to
Write buttons as actions. Book a table beats Reservations; Read the new issue beats Newsletter. The same principles apply to every short piece of copy on social, which social media copywriting covers in more depth.
Designing the background
The background is most of what a visitor sees, and it is where a page either looks like you or looks like every other free template. Design it for a phone screen first. A 1080×1920 vertical frame, the same as a story, is a sensible working size for the image, and a solid colour behind it covers taller screens and desktop.
A link in bio page drawn at phone size: identity at the top, promise, then the actions, with the background doing the brand work.
Keep the busiest, brightest part of the background away from where the buttons sit, usually towards the top or a corner. Buttons need a calm, even surface behind them or their labels start to compete with the colour.
linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%)Buttons that look tappable
Avoid
- Every button the same, so nothing leads
- Thin outlines that vanish on a gradient
- Labels in capitals with wide tracking, hard to scan
- Tiny buttons packed close together
- Emoji doing the work of words
Do
- One filled main button, the rest quieter
- Solid fills taken from your palette
- Sentence case labels, one verb each
- Full width buttons with generous spacing
- Plain words, an icon only if it helps
A filled button in your accent colour, with the others in a softer tint of the ground, gives the eye an obvious first tap. Check that every label meets contrast against its own fill, not against the page: colour contrast and accessibility has the ratios.
Building your own link in bio page
Link in bio services are quick, but a page on your own domain is easy to build and keeps visitors on your site. This is a complete, minimal version: a full height gradient background, a centred column and one main button. Swap in your colours and links.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Studio Nine</title>
<meta property="og:image" content="https://example.com/og.png">
<style>
html { background: #0b0a1a; }
body {
margin: 0;
min-height: 100vh;
font-family: system-ui, sans-serif;
color: #f5f3ff;
background: linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%);
}
main { max-width: 26rem; margin: 0 auto; padding: 4rem 1.25rem; text-align: center; }
img { width: 96px; height: 96px; border-radius: 50%; }
p { opacity: 0.85; margin: 0.5rem 0 2rem; }
a {
display: block;
padding: 1rem;
margin: 0 0 0.75rem;
border-radius: 14px;
background: rgba(255, 255, 255, 0.12);
color: inherit;
text-decoration: none;
font-weight: 600;
}
a.main { background: #fbbf24; color: #1c1917; }
</style>
</head>
<body>
<main>
<img src="logo.png" alt="Studio Nine">
<h1>Studio Nine</h1>
<p>Handmade ceramics and weekend classes in Bristol.</p>
<a class="main" href="/classes">Book a class</a>
<a href="/shop">Shop the new pots</a>
<a href="/visit">Visit the studio</a>
</main>
</body>
</html>If you prefer a richer button, gradient button CSS shows how to give the main one a little depth without making it shout.
Matching the page to your feed
The tap from profile to page should feel like opening a door in the same building. Use the colours, fonts and background you use in your posts, and the visitor never wonders whether they have left. Consistent branding across social media covers the wider system.
This is where an owned background pays off. A Gradiently Mark is a living gradient that renders at every size you design, so your posts, stories and the page background can all wear exactly the same look, and nobody else can export with it once you have claimed it. Export the Mark at 1080×1920 with Pro, which keeps it at full size without a watermark, and the page matches your feed by construction.
The preview image people see when you share the link
When someone sends your link in a message, apps show a preview card built from the page's Open Graph image. A blank or random preview undoes the work above. Design one at 1200×630 with your name and the promise, using the same background. The details are in OG image size.
The link preview, in the page's own background, so a shared link already looks like you.
- 1
Check it at phone width
Open the page on your own phone from your profile, the way visitors do, not in a desktop browser.
- 2
Reorder the buttons weekly
Move whatever matters now to the top and retire what has ended.
- 3
Test the preview
Send the link to yourself in a message app and look at the card it makes.
Questions people ask
What should be on a link in bio page?
Your name and logo, one line about what you do, three to five action buttons with the most important first, and small contact links at the bottom.
What size should a link in bio background be?
Design it for a phone first. A 1080×1920 vertical image works well, with a solid colour behind it for taller screens and desktop.
Should I use a link in bio service or my own website?
A service is quicker to set up. A page on your own domain keeps visitors on your site and gives you full control of the design, and it can be a single HTML file.
How many links should a link in bio page have?
Three to five is enough for most people. More buttons make each one less likely to be tapped.
Can I add more than one link to my Instagram bio?
Yes, Instagram lets you add up to five links to your profile, but only the first is visible before a tap. One well designed page is still the clearest route.
How do I make my link in bio match my Instagram feed?
Use the same background, colours and fonts as your posts, and give the main button your accent colour.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile