Glassmorphic sign-up form on a slowly morphing liquid blob background. Animated focus rings on inputs and a candy-gradient primary action.
1<section class="liquid-stage min-h-screen flex items-center justify-center px-4 py-12 relative overflow-hidden">
2 <span class="liquid-blob liquid-blob-a"></span>
3 <span class="liquid-blob liquid-blob-b"></span>
4 <span class="liquid-blob liquid-blob-c"></span>
5
6 <div class="relative w-full max-w-md">
7 <div class="liquid-card rounded-3xl p-8 sm:p-9 shadow-2xl">
8 <div class="flex items-center gap-2 mb-6">
9 <span class="w-9 h-9 rounded-xl flex items-center justify-center" style="background:linear-gradient(135deg,#f472b6,#a855f7,#22d3ee)"><svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg></span>
10 <span class="text-white font-bold tracking-tight">Lumen</span>
11 </div>
12 <h2 class="text-white font-bold text-[26px] leading-tight tracking-tight mb-1.5">Create your account</h2>
13 <p class="text-slate-300/75 text-sm mb-7">Free forever for solo creators. No credit card required.</p>
14 <form class="space-y-4">
15 <label class="liquid-field block">
16 <span class="text-[11px] font-bold uppercase tracking-[0.12em] text-slate-300/80">Email</span>
17 <input type="email" placeholder="hello@example.com" class="liquid-input mt-1.5 w-full rounded-xl px-4 py-3 text-white text-[14px] outline-none" />
18 </label>
19 <label class="liquid-field block">
20 <span class="text-[11px] font-bold uppercase tracking-[0.12em] text-slate-300/80">Password</span>
21 <input type="password" placeholder="Min. 8 characters" class="liquid-input mt-1.5 w-full rounded-xl px-4 py-3 text-white text-[14px] outline-none" />
22 </label>
23 <button type="button" class="liquid-submit mt-2 w-full inline-flex items-center justify-center gap-2 rounded-xl px-5 py-3.5 text-white font-semibold text-[14px]">
24 Create account
25 <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
26 </button>
27 </form>
28 <div class="my-6 flex items-center gap-3">
29 <span class="flex-1 h-px" style="background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent)"></span>
30 <span class="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400/80">or</span>
31 <span class="flex-1 h-px" style="background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent)"></span>
32 </div>
33 <button type="button" class="liquid-oauth w-full inline-flex items-center justify-center gap-2 rounded-xl px-5 py-3 text-white font-semibold text-[13.5px]">
34 <svg class="w-4 h-4" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"></path></svg>
35 Continue with GitHub
36 </button>
37 <p class="text-center text-[11px] mt-6 text-slate-400/80">Already have an account? <a href="#" class="text-fuchsia-300 hover:text-fuchsia-200 font-semibold">Sign in</a></p>
38 </div>
39 </div>
40</section>
Bold 404 page with a giant gradient numeral, floating planets, twinkling starfield and a primary CTA back to safety. Pure CSS animation.
Three-step onboarding wizard with an animated progress bar, slide-fade panel transitions and contextual hints. Forward / back nav and completion celebration.
macOS-style terminal mockup with auto-playing typewriter lines, syntax-coloured tokens, and a blinking caret. Pure CSS animation timing.
Three iridescent stat cards with a slowly rotating conic-gradient sheen, sparkline preview and a delta badge. Drop-in for any dashboard hero.
Three-plan pricing layout with a monthly/yearly toggle. Price values cross-fade with a slide animation, popular plan glows, yearly savings banner.
Interactive React stats panel on an aurora gradient. Click to randomise the three live counters — each animates a pulse ring driven by custom CSS keyframes, with hover glow on the card edges.
Hundreds of production-ready Bootstrap 5 snippets — cards, navbars, dashboards, pricing tables, modals. Live preview, one-click HTML download with the CDN pre-wired, MIT licensed.
517
Snippets
2629.2k
Views
86.2k
Downloads
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.