Home / Business Ready Pages / Link in Bio

Link in Bio CSS Template, Free with Live Demo

Free link in bio template for a musician. Mobile first page with big link buttons, tour dates and social links. A free Linktree alternative. Live demo. The example is Juno Hale, a musician.

Open live demo Download HTML file View code on GitHub

Link in Bio CSS template example: Juno Hale, a musician

What is link in bio?

A link in bio page is the one link you put on Instagram or TikTok. It needs to load fast on a phone and show your most important links as big buttons you can tap with a thumb.

This one is built for a musician: a highlighted button for the new album, a video, merch, a mailing list, tour dates with ticket links and social profiles. Host it free and you never pay for a link service.

Good for

Musicians and artists
Creators and influencers
Small businesses on social media
Event and campaign links

What you get in this template

Mobile first single column
Gradient ring around the profile picture
One highlighted main link
Tour dates with ticket links
Social profile buttons

The key CSS

This is the part that makes the link in bio look work. Copy it into your own project.

main { max-width: 460px; margin: 0 auto; padding: 46px 20px 30px; text-align: center; }
.links a {
  display: block; padding: 16px; border-radius: 16px; margin-bottom: 12px;
  background: #221b2b; font-weight: 700;
}
.links a.hl { background: linear-gradient(90deg, #ff8a5c, #b98cff); color: #1a1020; }
.av { border-radius: 50%; padding: 4px; background: conic-gradient(#ff8a5c, #b98cff, #ff8a5c); }

How to use it

Click Download HTML file above.
Open the file in any code editor, like VS Code.
Change the text, colors and links to match your project. Colors are at the top of the style tag.
Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.