Link in Bio Page — Free HTML CSS Template Snippet

It exploits background-clip. The ring element has a 2px transparent border and two stacked backgrounds: the top layer is a "gradient" from the page colour to itself — effectively a solid fill — clipped to padding-box, so it covers everything inside the border; the bottom layer is the conic gradient clipped to border-box, covering the full element including the border area. Result: the conic gradient is visible only through the 2px transparent border strip — a gradient border that respects border-radius: 50%, which plain border-image cannot do (border-image ignores radius). The spin works because the conic gradient's colour stops start and end on the same indigo, so the seam at 0°/360° is invisible and a linear rotate loops seamlessly. Two practical notes: the inner solid layer must match the page background (change both together when retheming), and if you need the avatar image itself to sit flush against the ring, an alternative single-element version puts the conic gradient on the avatar's own border with the photo as a third background layer — the two-element version here is simpler to reason about and lets the ring spin independently of the content.

Because of what delayed elements show before their animation starts. The stagger gives card 5 a 0.33s delay — but by default, an element with a pending animation renders in its normal styled state during the delay, so all five cards would appear instantly and then card-by-card jump back to invisible and animate in: a visible flash of the end state that ruins the cascade. fill-mode: backwards makes each element adopt its animation's from-state (opacity 0, translateY 12px) for the duration of its delay, so cards are genuinely hidden until their turn arrives. The shorthand animation: link-in 0.5s backwards encodes it. The alternative approaches each cost more: setting initial opacity: 0 in the base styles works but leaves the page permanently blank if CSS animations are disabled or fail (the fill-mode version degrades to visible content); JS-driven staggering (IntersectionObserver + class toggling) is warranted only when items enter on scroll rather than on load. The 70ms step is the sweet spot for a five-item list — perceptible as a cascade, finished in under half a second.

Four additions to the exported HTML, all in the head. A <title> ("Mia Jensen — links") since in-app browsers display it; Open Graph tags so the URL unfurls when shared — og:title, og:description, og:image (a square version of your avatar works; 1200×630 for the full card), and twitter:card summary; a viewport meta (width=device-width, initial-scale=1) which any export already includes; and a favicon. Then deploy: GitHub Pages (push, enable Pages), Netlify/Vercel (drag the folder in), or Cloudflare Pages all host static files free with HTTPS, and each supports custom domains — the domain is the only cost. Replace the onclick="return false" demo guards with real hrefs, and add rel="noopener" to external links along with target="_blank" if you want them opening outside the in-app browser (opinions differ: same-tab keeps the back-button flow Instagram users expect). For analytics without a backend, the UTM-parameter approach in the how-to needs nothing; for owned click counts, a Cloudflare Worker + KV endpoint receiving the fetch beacon is the standard free stack.

React: the page becomes two small components over data — const LINKS = [{ emoji, title, sub?, href, featured? }] mapped to <BioLink> cards, and a profile object for the header; the stagger translates to style={{ animationDelay: i * 70 + "ms" }} on each card (nth-of-type can't see array order, so inline delays replace it), and the analytics hook becomes an onClick handler receiving the link object — which is also where a bio-page builder product would swap in editable state. Tailwind: cards are flex items-center gap-3 bg-slate-800/75 backdrop-blur-md border border-slate-700 rounded-2xl px-4 py-3.5 mb-3 transition hover:-translate-y-0.5 hover:scale-[1.015] hover:border-indigo-500 hover:shadow-lg hover:shadow-indigo-500/20 active:scale-[0.985]; the featured variant adds bg-gradient-to-br from-indigo-500/30 to-purple-500/20 border-indigo-400/60 relative overflow-hidden with the sheen as a custom keyframe in the config (arbitrary keyframes don't inline); the ring needs its double-background as an arbitrary value or a small CSS snippet — [background:linear-gradient(#0f172a,#0f172a)padding-box,conic-gradient(#6366f1,#a855f7,#f472b6,#6366f1)border-box] border-2 border-transparent rounded-full animate-[spin_6s_linear_infinite] — and the entrance stagger uses animate-[link-in_0.5s_backwards] with inline delays as in React.