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.
15 CSS Testimonials & Reviews
15 hand-coded CSS testimonial layouts spanning editorial, brutalist, bento, neon, retro, minimal, crypto, edtech, luxury real estate, gaming, high fashion, fintech, SaaS minimal, horizontal profile, and portrait-led aesthetics. Copy-paste ready, accessible, mobile-first.
43 CSS Button Designs
43 hand-coded CSS buttons — real-world materials like brushed brass and vinyl, interactive use-case buttons (add-to-cart, download, like, delete), and click-effect studies: magnetic mercury ripple, brutalist glitch, neon plasma burst, clay press, ink spread, and particle shards.
20 Pure CSS Toggles & Switches
20 hand-coded CSS toggle switches with live demos — haptic keys, waveform, timed countdown, biometric scan, split-flap board, permission stack, iOS, Material Design, skeuomorphic, neon, brutalist, day/night, flip card, sliding pill, glassmorphism, rotary knob, iOS light, outline, bouncy pebble, and industrial rocker. Pure CSS, fully accessible, copy-paste ready.
22 CSS Button Group Designs
22 dynamic CSS button groups with motion-driven interactions — plasma loops, holographic gradients, magnetic discs, wormhole tabs, particle aurora. Pure CSS or light JS, 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.
18 CSS Close Buttons
18 hand-coded CSS close buttons — rotate, magnetic cross, liquid pop, glitch, ink ripple, hold-to-confirm, origami crease and more. Pure CSS, drop-in ready.
16 CSS Floating Action Button Designs
16 hand-coded CSS floating action button designs — speed dial, pulse, morphing FAB, scroll-to-top, notification badge, voice action and more. Semantic HTML, copy-paste ready.
28 CSS Input Field Designs
28 hand-coded CSS input field designs — floating label, OTP, password strength, voice search, autocomplete, range slider, credit card and more. Semantic HTML, 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.
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 hand-coded CSS progress bar designs — liquid fill, step tracker, conic ring, segmented battery, skill bars, speed gauge and more. Semantic HTML, copy-paste ready.
18 CSS Radio Button Designs
18 hand-coded CSS radio buttons — pill slider, magnetic orb, ink drop, segmented bar, pricing tier, glow pulse and more. Accessible, drop-in ready.
32 CSS Search Box & Search Bar Designs
32 hand-coded CSS search boxes and search bars — minimal underline, voice, autocomplete dropdown, recent searches, ⌘K command palette and more. Semantic forms, drop-in ready.
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.
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.