CSS UI Components — Free Collections with Live Demos
UI components are the building blocks of every interface. This collection brings together the best free CSS UI components — hand-picked, live-demoed, and copy-paste ready. No frameworks, no dependencies you didn't ask for.
22 CSS Button Group Designs
22 hand-coded CSS button group designs — segmented pill, connected outline, filter chips, split action, toggle, pagination, stepper wizard, view switcher, FAB, brutalist, glass, neon, date range, approve / reject, icon toolbar, dropdown combo, action group, number stepper, tab nav, aurora drift. Semantic HTML, accessible, copy-paste ready.
16 CSS Floating Action Button Designs
16 hand-coded floating action button designs — classic plus, speed dial, pulse ring, morphing FAB, labeled pill, scroll to top, neon cyber, glass, brutalist, notification badge, loading spinner, drag handle, voice action, premium aurora, quick reply, square modern. Semantic HTML, accessible, copy-paste ready.
28 CSS Input Field Designs
28 premium CSS input field designs — floating label, neon, glassmorphism, notched outline, OTP, password strength, voice search, email suggestions, currency, date / time / colour pickers, auto-grow textarea, range slider, credit card, password toggle, brutalist and more. Semantic HTML, modern CSS, copy-paste ready.
18 CSS Play / Pause Button Designs
18 free CSS play / pause button designs for audio, video and podcast UIs — copy-paste HTML, CSS and JS.
12 CSS Progress Bar Designs
12 premium CSS progress bar designs covering every real pattern — liquid fill, step tracker, conic ring, segmented battery, stripe loading, gradient pulse, goal tracker, skill bars, circular counter, stacked categories, speed gauge, and a video buffer bar. Semantic HTML, modern CSS, copy-paste ready.
18 CSS Radio Button Designs
18 hand-coded CSS radio buttons — concentric pulse, pill slider, magnetic orb, ink drop, star burst, tilt card, segmented bar, neon ring, pricing tier, glow pulse and more. Semantic, accessible, drop-in ready.
32 CSS Search Box Designs
32 hand-coded CSS search boxes — minimal underline, glass, neon, voice, autocomplete dropdown, recent searches, command-palette ⌘K hint, brutalist, animated placeholder, premium gradient and more. Semantic forms, accessible labels, drop-in ready.
22 CSS Stacked Card Designs
22 free CSS stacked-card designs — depth stacks, hover reveals, interactive selectors and 3D layouts with copy-paste HTML and CSS.
18 CSS Close Buttons
18 hand-coded CSS close buttons — rotate, magnetic cross, liquid pop, glitch, trash compactor, ink ripple, particle burst, neon etch, fold-away, hold-to-confirm, toast dismiss, origami crease, lock tumble and more. Pure CSS, drop-in ready.
31 CSS Buttons
31 hand-coded CSS buttons — gradients, glassmorphism, 3D press, neon glow, ripple, glitch, shimmer, rainbow border and more. Pure CSS, copy-paste ready.
20 CSS Cards with Animations
20 hand-crafted CSS card components — aurora glow, 3D tilt, glassmorphism, neon borders, flip card, pricing, terminal, music player, weather widget and more.
23 CSS Checkboxes
23 hand-crafted CSS checkboxes — toggles, glow, draw stroke, bouncy pop, glassmorphism, neumorphic, liquid fill, ripple, confetti and more. Mostly pure CSS, copy-paste ready.
24 CSS Login Form Designs with Live Demos
24 modern CSS login form designs — glassmorphism, neon, dark mode, OTP, biometric passkey, magic link, multi-step, password strength meter and more. Copy-paste HTML & CSS, accessible, mobile-first.
12 CSS Skeleton Loaders
12 hand-coded CSS skeleton loaders — classic shimmer, pulse, avatar card, image card, article page, table rows, stat tiles, comment thread and more.