All CSS Collections

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 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 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 hand-crafted CSS card components — aurora glow, 3D tilt, glassmorphism, neon borders, flip card, pricing, terminal, music player, weather widget and more.

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 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 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 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 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 free CSS play / pause button designs for audio, video and podcast UIs — copy-paste HTML, CSS and JS.

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 hand-coded CSS radio buttons — pill slider, magnetic orb, ink drop, segmented bar, pricing tier, glow pulse and more. Accessible, drop-in ready.

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 hand-coded CSS skeleton loaders — classic shimmer, pulse, avatar card, image card, article page, table rows, stat tiles, comment thread and more.

22 free CSS stacked-card designs — depth stacks, hover reveals, interactive selectors and 3D layouts with copy-paste HTML and CSS.

15 animated number counter examples — count-up stats, flip-digit play counters, fundraising arc meters, product launch countdowns, CO₂ impact dashboards, uptime SLA monitors, stock tickers, fitness rings and full design-language KPI dashboards. Tiny requestAnimationFrame easing in pure JS, the chrome around each counter in pure CSS. Copy, paste, ship.

11 free CSS page transition patterns — fade, slide, scale/zoom, clip-path wipe, blur morph, 3D page turn, ink bleed, triangle shatter, split curtain, matrix rain and brushstroke. Complete interactive demos with copy-paste HTML, CSS and JavaScript.

12 full-page CSS scroll animation demos — sticky parallax cosmos, kinetic typography, staggered grid waves, animated data stats, clip-path reveals, 3D card entrances, scrollytelling product tours and more. Each demo is a complete, copy-paste-ready HTML document built with IntersectionObserver and scroll-linked motion.

21 original CSS button hover effects — liquid fill, glitch, neon pulse, 3D flip, particle burst and more. Pure CSS with 3 vanilla JS enhancements. Copy-paste ready.

27 original CSS card hover effects — elastic lift, 3D tilt, holographic shimmer, spotlight, aurora and more. Pure CSS with 4 vanilla JS enhancements. Copy-paste ready.

20 free CSS link hover effects — animated underlines, glitches, neon flickers, marker highlights, 3D flips and more, with copy-paste code.

15 hand-coded CSS loading animations — DNA helix, liquid blob, orbit system, neon ring, hourglass flip, listing skeleton, building loader and more. Pure CSS, drop-in ready.

24 hand-coded CSS timeline layouts — six field-study aesthetics (archaeological dig, concert tour stubs, surgical vitals trace, cinema reel, mission control terminal, fermentation jar calendar), twelve chronological patterns (thread, accordion, filmstrip, nature trail, terminal log, art deco, vertical centered, horizontal scroll, neon rail, editorial, stacked progress, brutalist grid), and six documentation layouts (changelog ticker, editorial spine, split-screen CV, railroad stations, film-strip portfolio, audit ledger). Copy-paste ready.

15 hand-coded CSS footer designs — aurora-drift, newspaper masthead, mega multi-column, CTA stripe, trust badges, vinyl record, neon sign, FAQ drawer, language switcher, hover wave and more. Copy-paste ready.

21 hand-coded CSS pricing sections — three-tier cards, comparison tables, billing toggles, usage sliders, per-seat calculators. Copy-paste ready, accessible, mobile-first.

23 hand-coded CSS sidebar layouts — fixed, collapsible, off-canvas, dual, mini icon rail, two-pane mail, three-pane workspace and more. Accessible, copy-paste ready.

22 hand-coded CSS split-screen layouts — classic 50/50, diagonal cut, hover-reveal, before/after slider, parallax scenes, 3D perspective and more. Responsive, copy-paste ready.

24 hand-coded CSS grid layouts — holy grail, 12-column, bento, masonry, subgrid, dashboard, kanban, container queries and more. Pure CSS, copy-paste ready.

30 hand-coded CSS hero sections — gradient mesh, glassmorphism, bento, terminal, parallax, 3D card stack, conic orbit and more. No images, copy-paste ready.

32 CSS tab designs — 12 fan-favorite patterns (Ink Slider, Neon Electric, Brutalist Press, Chromatic, VS Code Files, iOS Segmented, Bento Grid, Vertical Dots, CRT Terminal, Morph Icon, Typewriter, Particle Burst) plus 20 typography-driven specimens. Sliding pills, halo blooms, drop caps, stencil cuts, folio folds. Each demo carries a distinct accent palette and motion choreography.

26 free CSS accordions — 17 vertical and 9 horizontal layouts with copy-paste HTML and CSS.

22 original CSS breadcrumb designs — underline grow, pill, diagonal slash, neon trail, brutalist, frosted glass, vertical stacked, progress track, holographic shimmer and more.

21 free CSS circular and radial menu designs — pie, dome, orbital and skeumorphic layouts with copy-paste HTML and CSS.

18 hand-coded CSS section-divider collections across eighteen design languages — editorial, brutalist, art deco, cyber, scientific, fantasy, retro, newspaper, playful, music, festive, corporate, sketch and more — 54 animated divider variants, each on its intended background.

21 hand-coded CSS tooltips spanning icon toolbars, form-field help, code docs, editorial footnotes, profile cards, schematics, inventories, keyboard shortcuts, glossary words, status dots, table cells, content tags, departures boards, recipe ingredients, constellation maps, periodic-table elements, photo EXIF cards, org charts, and event timelines.

30 hand-coded CSS badges spanning collectibles, status indicators, certifications, notifications, membership tiers, and live-data displays. Upload progress, typing indicator, scrabble tile, keycap shortcut, transit indicator, origami medal, hreflang, E-E-A-T, crawl status, schema, search intent, core web vitals, ECG, build pipeline, countdown, live price, file extension, dice, signal bars, reading time, aurora, vaporwave, risograph, wax seal, conference lanyard, botanical tier, cyberpunk glitch, art deco, brutalist status, holographic.

19 hand-coded CSS blockquote designs — pull quotes, testimonials, speech bubbles, tweet style, newspaper drop-caps, code comments and more. Semantic HTML, copy-paste ready.

20 hand-coded CSS tags and chips designs — removable filter, autocomplete input, status pulse, drag-to-reorder, marquee, undo and more. Semantic HTML, copy-paste ready.

12 free CSS dark-mode UI patterns — OLED true-black, single-accent surfaces, layered slate, and emissive glow effects with copy-paste HTML and CSS.

12 free CSS glassmorphism designs — cards, modals, navigation, form surfaces and layered effects with copy-paste HTML and CSS.