All 227 Collections
4,983 demos across 227 collections. Browse by what a thing is written in, or by what it builds — every collection appears under both.
Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS
ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link
Browse by framework
UI Components
See category page →
25 Tailwind CSS Button Groups
18 hand-coded Tailwind CSS button groups for SaaS pricing toggles, dashboard tab bars, rich-text editor toolbars, AI model pickers and Web3 wallet selectors. Covers split buttons with popover and details dropdowns, iOS-style segmented controls with sliding thumbs, monthly/yearly billing switches, pill filters, multi-select tag chips, radio export-format pickers, floating action speed dials, hold-to-confirm actions and cursor-following spotlight glows.
18 Tailwind CSS Forms
18 hand-coded Tailwind CSS forms for contact and support pages, SaaS sign-up and book-a-demo flows, e-commerce checkout and returns, fintech and insurance lead-gen, healthcare patient intake, mortgage pre-qualification and legal consultation requests. Covers character-counter textareas, password-strength meters, card-preview checkout, address autocomplete, inline-to-stacked newsletter signups, NPS surveys, multi-step job and quote wizards, avatar uploads, preset donation amounts, and linked slider-and-number inputs.
18 CSS Forms
18 hand-coded CSS forms for contact and support pages, SaaS sign-up and demo requests, e-commerce checkout and returns, fintech and insurance lead-gen, healthcare intake, and legal consultation flows. Covers auto-growing textareas with character counters, password-strength meters, live card previews, address autocomplete, inline-to-stacked newsletter signups, color-coded priority controls, multi-step job and quote wizards, avatar uploads, preset donation amounts, linked slider and number inputs, and work-email validation.
15 Tailwind CSS 3D Tilt Hover Cards
15 Tailwind CSS 3D tilt hover cards for D2C product spotlights, SaaS pricing rows, agency team and mascot cards, streaming music players, FinTech KPI dashboards, real-estate listings, and app-landing phone mockups — spanning parallax hover, glassmorphism and holographic foil, cursor-following border glow, spring physics, click-to-flip, and a zero-JavaScript :has() variant. Scoped under .ttc-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
21 Tailwind CSS Pricing Tables
21 Tailwind CSS pricing tables for SaaS plans, product suites, and per-seat billing: monthly/annual toggles, USD/GBP/EUR/AUD currency switchers, expandable feature comparisons, dark-mode themes, 3D flip cards, per-seat and bundle calculators, tabbed and stacking-accordion layouts, usage meters, glassmorphism and neumorphic styling, animated border beams, corner ribbons, mobile swipe carousels, and skeleton loading shimmers. Semantic HTML, appearance-none inputs, copy-paste ready.
24 Tailwind CSS Radio Buttons
Selectable plan cards and pricing selectors, iOS-style segmented controls and billing toggles, settings-page option rows with icons and descriptions, e-commerce color swatches and image pickers, star ratings, payment-method lists, and avatar profile selectors. Built on appearance-none native inputs with accessible focus rings, plus ripple, ink-splash, liquid-wave, 3D sphere, tilt-card, neon, gradient-border, and pulsing-glow animation styles.
29 Tailwind CSS Checkboxes
Selectable pricing plan cards and e-commerce filter chips built from has-checked, iOS-style toggle switches for SaaS settings, a no-JavaScript FAQ accordion, indeterminate "select all" tri-state masters, and WCAG-accessible focus rings. Covers to-do strikethroughs, dark-mode sun/moon and aurora toggles, plus animated SVG checkmark draws, liquid fill, gooey blob, confetti burst, ripple, neon glow, glassmorphism, neumorphism, brutalist, and 3D flip styles.
28 Tailwind CSS Close Buttons
Floating chat widget dismissals, cookie consent bars, modal and drawer close buttons, video and lightbox overlays, ad banners, and toast notifications — 28 close buttons covering the full range. Includes the corner-X modal pattern, WCAG focus rings, 48px tap targets, hamburger-to-X morphs, native dialog drawers, rotate-on-hover and magnetic-cursor motion, hold-to-confirm rings, neumorphic and brutalist styling, plus goo, glitch, particle burst, and galaxy vortex effects.
16 Tailwind CSS Floating Label Inputs
Floating label inputs for sign-up forms, login screens, checkout address grids, and settings panels. Covers the pure Tailwind peer pattern, Material Design outlined and filled fields, validation states with error and success messages, icon-inside inputs, select-dropdown and auto-growing textarea labels, a password show/hide toggle, Chrome autofill fixes, dark mode via light-dark(), ARIA/WCAG accessibility, and a mobile no-zoom container-query layout.
23 Tailwind CSS Flip Cards
23 Tailwind CSS flip cards for e-commerce product and pricing comparisons, meet-the-team reveals, language flashcards, trivia quizzes, gaming trading cards, business cards, and event tickets — spanning hover, tap, and keyboard triggers, <code>rotateY</code>/<code>rotateX</code> axes, diagonal <code>rotate3d</code> twists, book-open unfolds, and no-3D <code>clip-path</code> reveals. Scoped under .tfc-NN for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
47 Tailwind CSS Toggles & Switches
47 Tailwind CSS toggles & switches for theme and dark-mode switchers, SaaS pricing monthly/annual pills, iOS settings rows, permission and battery-saver panels, and power controls. Patterns include appearance-none checkboxes, gooey SVG-filter morphs, neumorphic and glassmorphism tracks, conic countdown rings, slide-to-confirm and press-and-hold guards, three-position Off/Auto/On selectors, rotary knobs, split-flap flips, indeterminate master toggles, and role=switch buttons.
17 Tailwind CSS Range Sliders
17 Tailwind CSS range sliders for e-commerce price filters, media seekbars, audio equalizers, thermostat dials, loan calculators, and password strength meters — spanning dual-handle, vertical, circular, and centre-origin tracks in neumorphic, neon, glassmorphism, and liquid-glass styles with pop-up value bubbles. Scoped under <code>.trs-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
36 Tailwind CSS Modals
36 Tailwind CSS modals for auth and password reset, paywalls and subscribe walls, product quick-views and cart drawers, age gates and GDPR consent, delete confirmations and support forms, plus a ⌘K command palette — spanning native <code><dialog></code> overlays, <code>:has()</code> and <code>:target</code> zero-JS state machines, slide-over drawers, bottom sheets, and radio-driven tabs. Scoped under <code>.tm-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
30 Tailwind CSS Login Forms
30 Tailwind login forms spanning split-screen brand heros, floating-label and OAuth social sign-in, passwordless magic-link and Web3 wallet-connect grids, multi-tenant workspace switchers, glassmorphism and aurora-glow cards, terminal CLI and neo-brutalist styles, plus sliding login/sign-up panels, 3D flip password-reset, OTP code grids, PIN pads, password strength meters, show/hide toggles, and inline user-valid validation for fintech, SaaS, and secure-vault auth.
51 Tailwind CSS Buttons
Restaurant recipe cards, SaaS primary and destructive actions, and e-commerce add-to-cart flows all ride on the button. This set covers form submit and primary/secondary pairs, ghost outlines, icon-only tooltip toolbars, gradient and neon CTAs, loading and download-progress state machines, segmented radio groups, like and confetti micro-interactions, inline confirm-delete, play/pause morphs, and tactile material studies from brushed brass to frosted glass, clay, walnut, and punch-card 3D tilt.
20 Tailwind CSS Cards
Restaurant recipe indexes, SaaS pricing rows, e-commerce product grids, real estate listings, and dark analytics dashboards all lean on card layouts. This set covers hover quick-add product tiles, three-tier pricing with a lifted popular plan, cook-time meta grids, walk-score rings, photo-mosaic booking panels, ranked article feeds, testimonial sentiment strips, KPI sparklines, glassmorphism aurora stages, 3D flip and pop-out lifts, rotating conic borders, and a focus-within stacked cascade.
18 Tailwind CSS Product Cards
18 Tailwind CSS product cards for e-commerce catalogs, fashion and gadget shops, food delivery, and real estate listings — hover-reveal add-to-cart, 3D flip and tilt, image zoom, glassmorphism, neon borders, colourway and size pickers, quantity steppers, and favourite toggles. Scoped under <code>.tpc-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
20 Tailwind CSS Custom Selects
Country picker with flag icons, currency and credit-card-type selectors, avatar profile and workspace switchers, language switcher, dark-mode theme selector, multi-select tag dropdowns with chips, status filter badges, date-range period pickers, product sorting, font-family preview pickers, color swatch and file-type selectors, plus floating-label fields, sliding highlight bars, spring open transitions, and a frosted glassmorphism select. Zero-JS state, accessible keyboard nav, semantic markup.
28 Tailwind CSS Input Fields
28 Tailwind CSS input fields covering floating labels, underline-sweep and drawn-border focus effects, frosted-glass and neon-glow styling, and the Material notched outline. Practical form controls include OTP code entry, password strength meters and reveal toggles, tag-chip and email-suggestion comboboxes, search with clear, phone-with-country and currency fields, file drop zones, steppers, range sliders, auto-grow textareas, inline edit, and credit-card formatting.
36 Tailwind Stacked Cards
Browse 36 Tailwind stacked cards with live demos and copy-paste code. Scroll-driven card stacks, swipe decks, fan-out photo piles, 3D flip cards.
20 Tailwind SVG Stroke Buttons
Browse 20 Tailwind SVG stroke buttons with live demos and copy-paste code. Stroke-dashoffset draw-on-hover, pathLength normalization, gradient strokes.
20 CSS SVG Stroke Buttons
Browse 20 CSS SVG stroke buttons with live demos and copy-paste code. Stroke-dashoffset draw-on-hover, pathLength normalization, gradient strokes.
22 CSS Progress Bars
22 hand-coded CSS progress bar patterns — native progress element, fetch upload progress, streaming response, view transition page load, password strength, download queue, dark-mode color-mix tokens, WCAG 2.2 accessible progress, video buffering, conic ring, segmented battery, speed gauge and more.
22 CSS Skeleton Loaders
22 hand-coded CSS skeleton loaders — React Suspense fallback, Next.js loading UI, prefers-reduced-motion fallback, dark-mode color-mix, SVG blur-up image, clamp sizing, cross-fade, ARIA live-region, timing recipe, CLS-preserving min-height, plus avatar, article, table, stats, comments, media list, chip cluster.
36 CSS Search Bars
36 hand-coded CSS search bars for every product surface — command palette (⌘K), Algolia-style instant search with highlighted results, e-commerce product search with category scope, header navbar sticky search, SaaS dashboard command search, voice input, autocomplete dropdowns, filter chips, recent searches, animated placeholders, glassmorphism, neon glow, and 24 more design and interaction patterns. Every demo scoped under .sb-NN, prefers-reduced-motion guarded, framework-agnostic — copy the CSS into React, Vue, Svelte, Astro, or plain HTML.
21 CSS File Upload Buttons
21 hand-coded CSS file upload buttons and dropzones for SaaS document flows, e-commerce product media, CMS libraries, support ticket attachments, and profile settings. Covers the custom-label button that replaces the unstylable native control, a pure-CSS version with no JavaScript, selected file name and multi-file list feedback, a WCAG-compliant accessible file input, drag-and-drop zones with grid previews and reorderable lists, a full-page drop overlay, image and video preview thumbnails, circular avatar upload with hover edit, multi-image grids with remove badges, upload progress bars with percentage, chunked multi-file progress lists, a success/error/retry state machine, cloud-storage style drop zones, mobile camera capture, clipboard image paste, plus Tailwind and Bootstrap 5 variants. Every upload is scoped under a .fu-NN prefix for no-collision pasting, keeps the native input keyboard-reachable rather than hiding it from assistive technology, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
51 CSS Buttons
51 production CSS buttons with copy-paste code — submit and primary/secondary form buttons, ghost and outline variants, icon-only buttons with accessible tooltips, gradient CTAs, loading spinner buttons with state transitions, full disabled-state reference, segmented button groups, interactive state machines (add-to-cart, download progress, like heart, confirm delete, play/pause, subscribe confetti), click-effect studies (magnetic mercury ripple, brutalist glitch, neon plasma burst, clay press, editorial ink spread, particle shards), and material studies (brushed brass, washi paper, frosted ice, walnut lacquer, gel capsule, aged copper patina, holographic foil, IBM punch card, brass periscope). Every button scoped under .cb-NN, prefers-reduced-motion guarded, framework-agnostic — drop into React, Vue, Svelte, Astro, or plain HTML.
24 CSS Animated Cards
24 hand-coded CSS animated card patterns organised by what triggers the motion, not by card style. Scroll and entrance triggers: staggered grid reveals, @starting-style mount-in, scroll-driven scale and fade on animation-timeline: view(), View Transitions API card-to-detail morphs, blur-to-sharp lazy image loading, and FLIP re-layout when a filter changes. State-change triggers: add-to-cart success morph, like and save particle burst, expand and collapse to intrinsic height with calc-size(), swipe-to-dismiss on Pointer Events, and skeleton-to-loaded crossfade. Data-driven triggers: count-up KPI metrics, SVG sparkline draw-on-enter, and progress ring fill on load. Ambient idle loops: breathing glow, floating drift, animated gradient mesh backgrounds, conic rotating borders, auto-cycling testimonial decks, and live status pulses. Plus four hover patterns where the effect is the topic itself: cursor spotlight, holographic foil glare, corner ribbon slide, and horizontal accordion expand. Every card is scoped under a .ac-NN prefix for no-collision pasting, guards prefers-reduced-motion, animates compositor-only properties, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
25 CSS Testimonials & Reviews
25 hand-coded CSS testimonial and review card templates for SaaS landing pages, e-commerce product pages, agency case studies, course platforms, real-estate sites, and fintech trust sections. Covers wall-of-love CSS-columns grids, verified trust banners, star-rating product review cards, scroll-snap carousels with ::scroll-marker dots, video testimonial modals built on the native dialog element, Trustpilot and Google-style review widgets, before/after case-study metric blocks, mobile swipe decks, read-more line-clamp cards with calc-size() height animation, hero pull-quotes, dark editorial cards, neo-brutalist reviews, bento social-proof grids, glassmorphism cards, restaurant reviews, minimalist agency quotes, Web3 conic-gradient glow borders, EdTech course reviews, real-estate client reviews, esports cards, fashion editorial quotes, fintech trust badges, clean white grids, horizontal sliding rows and staggered portrait grids. Every card uses figure/blockquote/figcaption semantics with a single role=img star rating, is scoped under a .tr-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
34 CSS Floating Buttons
34 hand-coded CSS floating action button (FAB) designs for SaaS admin dashboards, messaging chat widgets, e-commerce cart badges, and scroll-to-top navigation: Material Design 3 canonical FAB with ripple effect, iOS-style Compose floating button, WhatsApp floating message button, Intercom / Drift chat bubble, accessible WAI-ARIA reference (WCAG 2.2 AA aria-pressed + screen reader), Material Design 3 Extended FAB with icon and label, speed dial radial menu with backdrop, pure CSS FAB speed dial with zero JavaScript (checkbox-hack), Material gradient FAB, vertical and horizontal speed dial FAB menu, morphing FAB button that expands to pill, scroll-to-top floating button with SVG stroke-dashoffset progress ring, floating chat widget with notification panel, fan and arc radial spread menu, Apple squircle superellipse floating button, social share floating button cluster (X / Facebook / LinkedIn / WhatsApp / copy link), glassmorphism FAB with backdrop-filter blur, cyberpunk neon glow with scan-line overlay, floating compose button with hover tooltip, draggable FAB with corner snap and pointer events, notification bell with badge counter and interactive dropdown, floating cart with live badge counter and animated bump, magnetic cursor follower FAB with JS lerp easing, dark mode theme toggle with 4 style variants, classic gradient circle plus, pulse ring attention-getter, pill-shaped FAB with icon and text, neo-brutalist hard shadow, floating button with loading spinner state, draggable FAB with 6-dot grip handle, voice recording microphone with pulsing red halo, aurora gradient drift premium, quick emoji reply reaction picker, and modern squircle rounded square. 16 Pure CSS + 18 Light JS. Every design scoped under .fb-NN prefix for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, WCAG 2.2 AA accessible, framework-agnostic (React, Vue, Svelte, Astro, Next.js, Nuxt, Remix, SvelteKit).
25 CSS Play / Pause Buttons
25 hand-coded CSS play / pause button designs for audio players, HTML5 video controls, podcast UIs, meditation apps, and media dashboards: pure CSS polygon clip-path morph (no JavaScript), custom HTML5 video overlay with backdrop-blur, glassmorphism audio player toggle, neumorphic soft-UI meditation control, Spotify-inspired circular play button with brand green oklch() palette, cyberpunk neon glow, WAI-ARIA accessible pattern (WCAG 2.2 AA reference with aria-pressed + screen reader), SVG path morphing triangle to double bar, vinyl record spinning audio control, equalizer soundwave animated toggle, media player track skip / fast-forward cluster, fluid liquid wave fill, pulsing halo video icon, iOS sliding pill audio toggle switch, retro arcade play pause, minimalist line-art outline, @property-typed conic gradient play button with rotating rim, voice note audio player, Material Design floating action button (FAB), podcast play button with SVG stroke-dashoffset progress ring, magnetic hover cursor follower, organic blob morph, Material ripple click state, vintage cassette tape audio control with spinning reels, and live-broadcast on-air badge. 16 Pure CSS + 9 Light JS. Every design scoped under .pp-NN prefix for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, WCAG 2.2 AA accessible, framework-agnostic (React, Vue, Svelte, Astro, Next.js, Nuxt, Remix, SvelteKit).
25 CSS Glassmorphism Cards
25 hand-coded CSS glassmorphism card demos — each topic ships 2 side-by-side variants so you can pick the exact treatment for your surface. Covers glassmorphism credit cards, pricing tables, product cards with hover effects, checkout cards, crypto wallet balances, login and signup cards, user profile and team member cards, testimonial cards, dashboard analytics widgets, weather cards, music player cards, stat cards with progress bars, notification cards, blog post cards, feature showcase cards, service card grids, event ticket cards, portfolio item cards with hover, 3D tilt cards with vanilla JS, cards with animated glowing borders, dark mode glassmorphism cards for Tailwind, cards over video backgrounds, and gradient-border-blur cards. Every card uses the canonical backdrop-filter blur + saturate + subtle white border on translucent fill, with an @supports fallback for browsers without backdrop-filter. Modern @property, oklch(), light-dark(), color-mix() and container-query techniques throughout, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, framework-agnostic, MIT licensed.
24 CSS Radio Buttons
24 hand-coded CSS radio button designs covering every real-world use case tier-1 SaaS, e-commerce, fintech, and healthcare products reach for radio inputs in 2026: full selectable cards (:has()-driven with icon + title + meta + price), iOS-style pill segmented control (billing period toggle), radio row with icon tile + title + description subtext (settings-page pattern), dark-mode glowing radio with 3-layer box-shadow breathing pulse, pure-CSS accessible radio using appearance:none (WCAG 1.3.1 canonical reference — no wrapper), plan picker rows with 'Most popular' + 'Best value' gradient badges, concentric ripple animation on check, sliding pill toggle switch (2-seg thumb), interactive 3D sphere radio with orb highlight tracking, ink splash animation on select, rating star radio group (reverse-flex flip pattern), 3D tilt card option selector with cursor-tracked perspective, minimal checkmark radio, product color swatch selector (Shopify/Amazon variant picker), segmented control bar, cyberpunk neon ring radio, subscription pricing plan cards (Stripe/Vercel/Linear billing tier pattern), liquid wave fill on select, image clip-mask option selector (Airbnb/Booking destination picker), gradient border card radio, user profile avatar selector (Netflix who's-watching pattern), stacked vertical radio list, tactile 3D push button radio (skeuomorphic keycap depress), and outer glow pulse radio with dual sonar-ping keyframes. 22 truly Pure CSS + 2 with a tiny optional vanilla JS snippet (Demo 09 orb highlight tracking + Demo 12 3D tilt cursor perspective). Every radio group uses real <input type='radio'> inside <fieldset> + <legend> semantic wrappers so screen readers announce the question before the options, keyboard arrow keys move selection natively, and form-post semantics work zero-config. Every visual is scoped under a unique .crb-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
16 CSS Multi-Step Form UI
16 hand-coded multi-step form UI templates for e-commerce checkout, SaaS onboarding, mortgage and insurance applications, patient intake, KYC verification, financial loan wizards, event registration, university admissions, moving quotes, home services, car rental and non-profit donation flows. Copy-paste HTML, CSS and vanilla JS, WCAG 2.2 accessible, mobile-first.
25 CSS Button Groups
25 CSS button groups for SaaS pricing toggles, iOS-style segmented controls, app toolbar actions, Web3 wallet-connect grids, AI model pickers, and date-range presets. Covers split buttons with Popover API dropdowns, radio-driven filter pills with sliding thumbs, single-select alignment toggles, multi-select tag chips, floating action buttons with radial fan-out menus, and view-switcher segments with morphing highlights. Keyboard-accessible, modern CSS.
15 CSS Glowing Border Buttons
15 production-ready CSS glowing border buttons covering rotating gradient ring, neon pulse, animated border trace, cyberpunk clipped-corner, dark-mode form input focus glow, Tailwind blur-underneath recipe, glassmorphism frosted glow, minimalist e-commerce outer glow, breathing pulse SaaS pricing CTA, aria-pressed inner glow toggle, subtle docs button, SVG stroke trace, synthwave dual neon, hue-shift gradient border, and an accessible WCAG-ready focus glow. Every demo is scoped under .gbb-NN with prefers-reduced-motion guards and real semantic HTML.
28 CSS Close Buttons
Floating modal dismissals, chat widget launchers, cookie consent bars, ad banners, video overlays, toast notifications, and lightbox media viewers — 28 close buttons spanning the full range. Includes the canonical corner-X modal pattern, WCAG 44px focus rings, iOS circular ×, hamburger-to-X morphs, native dialog drawers, and hold-to-confirm rings, plus neumorphic, brutalist, neon, glitch, liquid metaball, particle burst, magnetic-cursor, and galaxy vortex effects.
15 CSS 3D Tilt Hover Cards
15 mouse-aware 3D tilt hover cards — e-commerce product spotlight, glassmorphism parallax team card, interactive pricing tier, holographic NFT collectible, pop-out mascot, dark tech grid with border glow, media player album art, blog article preview, cyberpunk neon glow, dashboard KPI widget, minimalist real estate, flip-to-back tilt, mobile app showcase, course learning card, and a Pure CSS touch-friendly tilt. Vanilla JS writes --rx/--ry/--mx/--my; all rendering stays in CSS on the GPU.
16 CSS Floating Label Inputs
16 hand-coded CSS floating label input demos — pure CSS float triggers, Chrome autofill fix, live validation states, ARIA-accessible fields, select dropdowns, Material Design outlined text field, filled underline minimal, dark mode with light-dark(), icon inputs, mobile-safe (no iOS zoom), auto-growing textareas, password show/hide toggle, multi-column form grid, plus showcase-tier gradient-ink label, conic border-beam, and staggered letter cascade. Copy-paste, zero deps.
21 CSS Pricing Tables
21 production CSS pricing tables and pricing card templates — monthly/annual billing toggle, currency switcher, feature comparison matrix, dark-mode adaptive cards, most-popular border-beam glow, 3D flip plans, usage-based volume slider, bundled checkbox calculator, glassmorphism, gradient border draw-in, ribbon folds, neumorphic tiers, mobile swipe carousel, accordion stacking, skeleton loading states. Copy-paste, zero deps.
47 CSS Toggles & Switches
47 CSS toggles and switches for dark-mode theme switchers, settings and permission rows, SaaS billing toggles, and destructive-action guards — spanning iOS-style pill and Material 3 switches, neumorphic, glassmorphism, neon and brutalist styles, gooey and squash-and-stretch physics, split-flap and rotary-knob mechanics, and biometric hold-to-confirm kill switches. Scoped under <code>.tgl-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
21 CSS Liquid Glass Cards
21 hand-coded CSS Liquid Glass cards inspired by Apple's WWDC 2025 design language (iOS 26 / macOS Tahoe / visionOS). Dashboard analytics widgets, draggable kanban cards, glassmorphic product feature cards, interactive pricing matrices, profile cards, horizontal case-study scrollers, music player widgets, weather cards, secure login forms, payment checkout cards, NFT collectibles, crypto wallet balance widgets, game inventory cards, analytics chart cards with warped grid refraction, digital coupon discount cards, hover-reactive profile bio cards, team member spotlight cards, media slider knob cards, smart home thermostat cards, multi-step wizard progress cards, and RPG game inventory HUD cards. Zero dependencies vs Aceternity UI, Magic UI, shadcn glass. Core Web Vitals safe (CLS 0, INP-friendly), WCAG 2.2 AA accessible, MIT licensed.
36 CSS Stacked Cards
36 hand-coded CSS stacked-card designs for SaaS product tours, Apple-style scroll pinning, Tinder-style dating card decks, Airbnb / Zillow listing card stacks, Stripe / Notion / Linear pricing tier presentations, testimonial rotators, and 3D isometric dashboards — scroll-driven scaling stack, horizontal swiper deck (Tinder / Bumble / Hinge pattern), glassmorphic floating testimonials, stacked expansion accordion, interactive fan-out photo stack, 3D perspective hover tilt, progressive disclosure step stack, dynamic tabbed deck (8 new demos), plus 28 classic patterns. 25 pure CSS + 11 with under 40 lines of vanilla JS. WCAG 2.2 accessible, MIT licensed.
29 CSS Checkboxes
29 CSS checkboxes for SaaS settings toggles, e-commerce filter chips, pricing-plan cards, and to-do lists with animated strikethrough — spanning iOS slide switches, tri-state select-all, SVG checkmark draws, glassmorphism, gooey blobs, confetti bursts, and dark-mode toggles. Scoped under <code>.cb-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
18 CSS Product Cards
18 hand-coded CSS product card templates for Shopify Dawn, WooCommerce Storefront, BigCommerce Cornerstone, Stripe Checkout, real-estate listings (Zillow/Redfin/Airbnb/Vrbo), SaaS subscription pricing (Stripe Billing/Chargebee/Recurly), food-delivery grids (DoorDash/Uber Eats/Grubhub), sneaker retail (Nike/StockX/GOAT), and digital-download stores (Gumroad/Sellfy). Hover-reveal Add-to-Cart, pure-CSS 3D flip with spec back, mouse-tracking 3D tilt, glassmorphism, neon glowing border, sale ribbon, color+size picker, quantity stepper, and more. Semantic HTML with schema.org/Product-ready markup for Google Shopping rich results, WCAG 2.1 accessible, MIT licensed.
30 CSS Login Forms
30 hand-coded CSS login form templates for SaaS authentication panels, multi-tenant account switchers, passwordless magic-link entry, Web3 wallet-connect, Stripe-style minimalist billing, OTP, biometric passkey and password strength meters. Copy-paste HTML and CSS, WCAG 2.2 accessible, mobile-first.
36 CSS Modals
36 CSS modal dialogs for authentication overlays, password reset and Stripe-style payment checkout, age verification and paywall content locks, product quick-views and slide-over cart drawers, newsletter and exit-intent discount popups, image and video lightboxes, delete confirmations with type-to-confirm, GDPR cookie preferences, HIPAA and terms-of-service consent, multi-step onboarding, filter panels, settings tabs, and a ⌘K command palette. Built on native dialog, :has(), :target and starting-style.
20 CSS Image Sliders
20 hand-coded CSS image sliders and carousels covering product galleries, real-estate listings, before/after comparisons, hero banners, testimonial carousels, and SaaS onboarding scrollers. WCAG-friendly, no-JS options, Core Web Vitals safe.
20 CSS Profile Cards
20 hand-coded CSS profile card templates for team pages, SaaS user menus, portfolios, and creator link-in-bio surfaces — Apple bento grid, Vision-Pro glassmorphism, 3D flip, Instagram slide-up, LinkedIn skeleton, Read.cv perspective tilt, Discord gaming overlay, LinkedIn minimalist, retro cyberpunk, Dribbble neumorphic, conic-gradient border, Material 3 avatar, tabbed profile, Etsy hire-me badge, G2 testimonial, Linktree link-in-bio, Superhuman morphing, Stripe/Vercel/Linear SaaS dropdown. Semantic HTML, WCAG 2.1, prefers-reduced-motion guarded. Copy-paste HTML/CSS (+JS on 3 demos).
20 CSS Custom Select Dropdowns
20 CSS custom select dropdowns for building rich, styled replacements for the native select element. Includes a country picker with flag chips, currency and credit-card selectors, a pricing-plan switcher, avatar profile and workspace menus, a dark-mode theme picker, multi-select tag chips, status filters, date-range presets, product sorting, font and color swatch pickers, floating-label fields, and a glassmorphism variant with keyboard navigation and slide-fade transitions.
20 CSS Cards
20 hand-coded CSS card components for product grids, pricing tiers, blog previews, testimonials, real estate listings, hotel bookings, team profiles, dashboards, and more — plus the visual patterns developers Google for by name (3D flip, glassmorphism, gradient border glow, 3D pop-out, stacked cascade). Copy-paste HTML/CSS, no dependencies, WCAG AA accessible.
22 CSS Gradient Buttons
22 production CSS gradient button designs covering the full spectrum plus eight unconventional interaction patterns — glow shadows, magnetic pull (cursor-attracting), a subtle inhale-exhale breathing button, gradient border and ghost fills, sliding sweeps, gradient text, shiny sheens, 3D-depth parallax with layered translateZ, neon glows, glassmorphism, futuristic oklch hue-cycling, pill shapes, search-bar combos, checkout CTAs, click-particle celebration trails, Tailwind-style palettes, press-and-hold conic charging ring, sliced shutter roll, gooey liquid pill, and cursor-tracking aurora. Every button scoped, prefers-reduced-motion guarded, copy-paste ready.
22 CSS Star Ratings
22 production-grade CSS star rating designs with live demos and copy-paste code — pure CSS radio-button stars, modern :has() sibling fill, half-star fractional precision, animated SVG burst particles, accessible ARIA fieldset, read-only review displays, emoji reaction scales, neumorphic soft UI, CSS variable customizer, vertical sidebar filter, gradient fills, single-star numeric, heart-based favorites, tooltip hover labels, plus 8 experimental concepts including liquid mercury, holographic scanner, neural pulse, magnetic field lines, quantum superposition, DNA helix, particle constellation, and glitch corrupt-and-resolve. Every star scoped under .sr-NN, copy-paste ready.
17 CSS Range Sliders
Price range filters with dual handles, neumorphic volume knobs, neon glow tracks, and emoji mood selectors, plus milestone step sliders, video seekbars, vertical equalizers, radial thermostat dials, gradient progress fills, bubble tooltips, brutalist thick-block tracks, password strength meters, audio pan balance controls, retro pixel health meters, isometric 3D tracks, and glassmorphism RGBA mixers. Semantic HTML, dual-thumb and vertical inputs, keyboard support.
23 CSS Flip Cards
23 CSS flip cards for e-commerce product and pricing comparisons, gift-card coupon reveals, meet-the-team bios, portfolio skill ratings, language flashcards, trivia Q&A, gaming trading cards, restaurant menu recipes, testimonials, and digital business cards. Covers hover, click-to-flip, and keyboard triggers across rotateY and rotateX axes, diagonal rotate3d twists, book-open cube unfolds, clip-path iris and scratch-off reveals, auto-resizing height, and responsive grid matrices.
12 CSS Steppers
12 hand-coded CSS stepper UI components covering every production multi-step flow pattern — multi-step form wizard with progress indicator, numbered step progress bar, e-commerce checkout stepper with sidebar order summary, vertical timeline stepper, animated step indicator with icons, onboarding stepper flow (Notion/Linear/Vercel style), breadcrumb-style step tracker, stepper with validation states (success/error/warning), circular SVG progress indicator, glassmorphism stepper, dark mode stepper, and stepper with animated connector lines. All use semantic HTML with proper <code>aria-current="step"</code> and <code>aria-valuenow</code> attributes for screen reader accessibility, scoped <code>.stp-NN__*</code> class names so multiple steppers coexist on the same page without style bleed, respect <code>prefers-reduced-motion</code>, and ship MIT-licensed. 11 use ~30-50 lines of vanilla JavaScript for step navigation, validation, and state persistence; 1 demo (the checkout stepper) is fully static — useful as a display-only progress indicator inside an existing wizard. Drop into any stack: React, Vue, Astro, Svelte, Rails ERB, plain HTML — zero framework dependencies.
27 CSS Calendars
27 hand-coded CSS calendar UIs for SaaS scheduling (Calendly / Cal.com / SavvyCal patterns), Airbnb / Vrbo / Booking.com date-range pickers, healthcare Epic MyChart / Zocdoc appointment slots, real-estate Zillow / Redfin showing schedulers, event planners, advent countdowns, and bento booking systems — pure-CSS calendar (no JavaScript), CSS Grid layouts, glassmorphism widgets, brutalist designs, dark mode UIs, neumorphic cards, horizontal timelines, sidebar widgets, 3D flip cards, isometric dashboards, split-screen heroes, liquid micro-interactions, vintage paper tear-offs, vertical timelines, kinetic typography. WCAG 2.2 accessible, MIT licensed.
28 CSS Input Fields
28 hand-coded CSS input fields for sign-up flows, e-commerce checkouts, SaaS onboarding, HIPAA patient portals, banking forms, and password reset screens — floating label, OTP, password strength, voice search, autocomplete, range slider, credit card, tag chip, inline edit, and more. Semantic HTML, WCAG 2.1, copy-paste ready.
20 CSS Form Validation
20 hand-coded CSS form validation patterns built on native HTML5 constraint validation. Covers the :user-invalid pseudo-class that stops a required field turning red before anyone has typed, inline error messages that reserve their layout space so nothing shifts, required checkbox groups that native HTML cannot express on its own, confirm-password matching through setCustomValidity, character counter limit warnings, the aria-invalid and aria-describedby contract screen readers need, a :has() validation summary box, forced-colors support, and the real-world forms most tutorials skip — checkout card fields with correct autocomplete tokens, relative date ranges, and dark mode validation tokens.
20 CSS Loading Buttons
20 hand-coded CSS loading buttons for checkout flows, dashboards, upload forms and any action that waits on a server. Covers the inline spinner swap, the width jump that makes a button shove its neighbours when the label changes, double-submit guarding with the disabled attribute rather than a class, the aria-busy and live-region contract screen readers need, minimum spinner duration so a fast response does not flicker, progress fill and percentage upload states, and the paths most builds skip entirely — retry after failure, optimistic save with rollback, server validation errors, and an undo window instead of a confirmation dialog.
22 CSS Avatars
22 hand-coded CSS avatars for chat apps, team dashboards, comment threads, account menus, and social profiles. Covers circular and squircle shapes, gradient and conic story rings, hexagon clip-path crops, online status dots, notification count badges, verified checkmarks, stacked facepiles with plus-N overflow, initials fallbacks for users without photos, broken-image recovery, avatar pickers, and a size scale system where the ring, badge, and status dot all scale from a single custom property.
Motion & Effects
See category page →
30 Tailwind CSS Text Hover Effects
30 hand-coded Tailwind CSS text hover effects for marketing hero headlines, agency navigation, editorial indexes and product wordmarks. Covers animated underlines, gradient and liquid bg-clip-text fills, glitch and scramble decrypt, neon flicker, metallic shimmer, 3D pop and perspective tilt, staggered letter waves, spotlight and cursor-following shadows, blur-to-focus, variable font weight, marquee tickers, SVG water ripple and clip-path reveals.
20 Tailwind CSS Text Gradient
20 hand-coded Tailwind CSS text gradient effects for landing-page hero headings, image-free navbar wordmarks, active nav links, gradient CTA and gradient-border buttons, and editorial type specimens. Covers animated moving gradients, glowing Web3 neon, metallic gold, cyberpunk HUD, pastel and rainbow multi-color fills, radial and vertical gradients, gradient text on glass, outline-stroke combinations, multiline paragraph wrapping, a bg-clip-text utility cheat sheet, an @supports fallback, and a dark-mode toggle.
30 Tailwind CSS Hover Effects
30 Tailwind CSS hover effects for editorial links and navigation, marketing CTAs and add-to-cart buttons, product and profile cards, and image galleries — spanning underline draws, glitch and neon text, magnetic liquid and 3D-press buttons, tilt and flip cards, zoom-pan and duotone images, and cursor-trail motion. Scoped under <code>.thv-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
36 Tailwind CSS Button Hover Effects
Restaurant recipe cards, SaaS hero CTAs, and e-commerce add-to-cart flows all live or die on the button. This set of button hover effects covers sliding background wipes, center underline draws, minimalist outline strokes, conic and rainbow gradient border spins, liquid wave and organic blob fills, neon pulse glows, cursor-tracking spotlights, magnetic ripple attraction, glitch slices, 3D flip and plunger presses, kinetic text flips, icon slide-ins, particle bursts, and typewriter retype states.
33 Tailwind CSS Card Hover Effects
33 Card hover effects for portfolio grids, SaaS pricing tiers, product shops, team profiles, and fintech account cards. This set covers 3D tilt and parallax with depth layers, front-to-back and book-cover flips, image-zoom slide-up reveals, sibling de-emphasis pricing grids, animated conic gradient borders, holographic foil shimmer, cursor spotlight and shockwave ripples, RGB channel-split glitch, curtain and corner-peel reveals, neon sign and CRT scanline terminals, and drifting aurora ribbons.
20 Tailwind CSS Animated Buttons
Restaurant recipe cards, SaaS hero CTAs, e-commerce add-to-cart flows, and slider controls all lean on button motion. This set covers neon glow halos, four-direction background-slide fills, no-JS Material ripples, animated border draws, 3D keycap press depth, liquid wave fills, moving gradients, shine sweeps, jelly bounce squash, 3D text flips, hamburger-to-close morphs, flying-dot cart adds, peer-checked toggles, checkmark-draw submit states, download progress fills, and cursor-aware ghost reveals.
20 Tailwind CSS Image Hover Effects
20 image hover effects in Tailwind CSS for portfolio grids, e-commerce product cards, team pages, and photo galleries: contained zoom, gradient overlay text reveal, product image cross-swap, slide-up captions, grayscale-to-color, blend-mode tints, neumorphic and glassmorphism cards, neon glow borders, clip-path morphs, pointer-tracked 3D tilt, glare sweeps, ripple rings, spinning avatar arcs, and a three-layer 3D card flip.
20 CSS Ripple Effects
20 hand-coded CSS ripple animations covering the expanding ring as a primitive — origin from click coordinates, keeping rings circular in any box, overlapping without stacking, easing that reads like water, compositor-only performance, node cleanup in long lists, touch without tap delay, and reduced-motion fallbacks. Plus water, ink, sonar, heartbeat and aurora applications.
20 CSS Page Transitions
20 hand-coded CSS page transition patterns covering the overlay cover swap reveal lifecycle, exit and enter timing without overlap, holding scroll position across a route swap, transitions between routes of different heights, FLIP element continuity without the View Transitions API, preloading routes so transitions never stall, pending state when the next route is slow, back and forward navigation direction, accessible route change focus and announcements, plus fade, slide, zoom, clip-path wipe, blur, book page turn, ink bleed mask, shatter tiles, split curtain, terminal text overlay and brush stroke mask effects. 6 demos are pure CSS; 14 use vanilla JavaScript.
20 CSS Scroll Animations
20 hand-coded CSS scroll animation patterns covering animation-timeline with scroll() and view(), named scroll timelines, view timeline subject and scroller, animation-range start and end, scroll-timeline-axis for horizontal scrollers, the four view ranges cover contain entry and exit, timeline-scope across DOM branches, non-root scroll containers, sticky pinned scrubbing, fill-mode and why animation-duration is ignored, scroll-driven 3D transforms, divergent ranges for depth, the IntersectionObserver fallback contract, rootMargin and threshold semantics, scroll-snap interaction, SVG stroke-dashoffset drawing, reduced-motion strategy, main-thread cost, @supports gating, and debugging a timeline that does not run. 17 demos are pure CSS; 3 use vanilla JavaScript.
22 CSS Transitions
22 hand-coded CSS transition patterns covering the transition property and its longhands, timing functions including linear() springs and cubic-bezier, delay choreography that reverses on exit, compositor-thread transforms, scale without layout shift, gradient interpolation via registered custom properties, border and outline transitions without reflow, transition-behavior allow-discrete for display none, focus-within parent state, height auto with interpolate-size, @starting-style entry transitions, view-transition names and pseudo elements, data-attribute state machines, transform-origin underlines, @property interpolation, :has() sibling transitions, backdrop-filter cost, index-driven staggered delay, transition all versus explicit property lists, interruption and reverse playback, discrete property behaviour, and a reduced-motion strategy. 19 demos are pure CSS; 3 use vanilla JavaScript.
22 CSS Parallax Effects
22 hand-coded CSS parallax patterns — pure-CSS scroll-timeline multi-layer hero, animation-timeline view element-enter parallax, scroll-driven SVG path draw, split-screen dual-axis, backdrop-filter blur cross-fade, scroll-linked typography scale, mouse-position card grid, 3D perspective layers, pinned-scene product showcase, chapter-marker storytelling, aurora gradient, plus classic multi-layer landscape, sticky sections, horizontal scroll, image grid, text overlay, mouse card tilt, zoom-in depth, and backdrop blur transition.
20 CSS Loading Animations
20 hand-coded CSS loading animations for real product contexts — e-commerce checkout, video streaming buffering, AI chat thinking dots, fintech transactions, package delivery, healthcare, music vinyl, boarding passes, restaurant kitchens, weather radar, and real estate. Drop-in ready, scoped, prefers-reduced-motion guarded.
25 CSS Background Animations
25 hand-coded CSS background animations for SaaS hero sections, developer tool documentation, agency portfolios, gaming and Web3 landing pages, seasonal e-commerce campaigns, and dark-mode dashboards. Covers full-screen gradient shifts, animated mesh gradients, aurora borealis glow, cursor spotlight follow, interactive water ripples, dot grid and diagonal stripe patterns, SVG grain and noise texture overlays, topographic contour lines, layered SVG waves, plasma and lava lamp fluids, bokeh light blur, particle constellation networks, matrix digital rain, synthwave 3D perspective grids, starfield warp speed, CRT scanline overlays, fog and mist drift, morphing organic blobs, floating glassmorphism orbs, halftone dot patterns, starry night skies, floating geometric shapes, rising bubbles, and falling snow. 20 are pure CSS with zero JavaScript; the 5 that need it use vanilla canvas or pointer tracking with no dependencies. Every background animates compositor-only properties so it never blocks the main thread, is scoped under a .bga-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
18 CSS Scroll Progress Bar
18 hand-coded CSS scroll progress bar designs for blog article readers, SaaS onboarding wizards, e-commerce checkout flows, documentation sites, image carousels, and long-form landing pages. Top fixed reading bar with animation-timeline: scroll(), sticky header with integrated glassmorphic progress bar, floating radial SVG progress ring with @property registered angle, percentage counter tooltip, back-to-top button with circular morph, gradient multi-color bar, vertical side-docked line, container-scoped inside a div, multi-section TOC tracker with IntersectionObserver scrollspy, step-segmented section-by-section bar, horizontal carousel scroll bar with snap points, e-commerce checkout step progress on scroll, signup onboarding form scroll progress with localStorage save-and-restore, Tailwind CSS @theme + arbitrary values recipe, custom ::-webkit-scrollbar with progress indicator, rainbow hue-rotating bar, cyberpunk neon glow dark mode bar, and ultra-thin 2px minimalist micro progress line. All 18 use animation-timeline: scroll() where supported with rAF scroll listener fallback for Safari + Firefox — no jank, no library, no scroll-listener anti-patterns. Every design scoped under .sp-NN prefix for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, framework-agnostic (React, Vue, Svelte, Astro, Next.js, Nuxt, Remix, SvelteKit).
25 CSS Number Counter Animations
25 animated number counters for SaaS landing pages, dashboard KPIs, e-commerce sales tickers, fundraising progress meters, product launch countdowns, fitness rings, stock tickers, ESG impact dashboards, and gamified milestone widgets. Copy the HTML, CSS, and requestAnimationFrame count-up JS — no libraries, no build step.
30 CSS Shake Animations
30 hand-coded CSS shake animation demos — each topic ships 2–3 side-by-side variants so you can pick the exact treatment for your surface. Covers invalid-input error shakes, form-submit failure shakes, password wrong-attempt recoil, login box shake, hover attention wiggles, buy-now CTA shake, notification bell ring, shopping cart wiggle on add-to-cart, lock icon shake, alert badge shake, heart-icon pulse-and-shake, trash-icon drag-over shake, horizontal + vertical + skew + aggressive + gentle-continuous + elastic + 3D shake styles, hit-damage shake for browser games, and full screen shake. Modern @property + linear() spring easing + :user-invalid + :has() techniques throughout, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, framework-agnostic, MIT licensed.
30 CSS Text Animations
30 CSS text animation techniques spanning scroll-driven reveals, per-letter and word-by-word entrances, and hover-triggered effects. Includes typewriter and unscramble sequences, gradient and rainbow color waves, wavy and marquee motion, 3D flip and extrude typography, neon flicker, liquid fill, animated stroke drawing, metallic and holographic foil, spotlight and smoky reveals, variable-font weight shifts, and a vertical rotating word wheel.
30 CSS Text Hover Effects
30 hand-coded CSS text hover effects for marketing hero headlines, editorial indexes, agency navigation and product wordmarks. Covers animated underlines, liquid fills, background-clip gradient reveals, glitch and scramble decrypt, neon flicker, metallic shimmer, 3D pop and perspective tilt, staggered letter waves, spotlight and cursor-tracking shadows, blur-to-focus, variable font weight, marquee speed-up, SVG water ripple and clip-path reveals.
26 CSS Link Effects
26 hand-coded CSS link and text hover effects covering every real-world pattern: animated underlines, gradient text with background-clip, border-draw traces, slide-in fills, liquid text fill, glowing halos, wavy squiggles, character morphs, dotted focus rings, encircled outlines, chevron arrows, terminal cursors, neon flickers, heartbeat pulses, sweep reveals, letter push staggers, marker highlighters, background slides, crosshair brackets, glitch splits, ink bleeds, magnetic cursor pulls, caret trails, brutalist shadows, 3D text flips, and typewriter type-on reveals. Copy-paste HTML and CSS, WCAG 2.2 accessible focus-visible, prefers-reduced-motion guarded, framework-agnostic.
12 CSS Image Reveal on Scroll
12 production-grade CSS image-reveal-on-scroll demos — industry-templated heroes for fintech, luxury, SaaS, real estate, insurance, editorial, agency, enterprise, legal, healthcare, mortgage, and travel verticals. Built on the W3C animation-timeline: view() spec with IntersectionObserver fallbacks. Real free Unsplash images bundled, compliance-aware copy (FDIC, HIPAA, TILA, ABA Rule 7.1, Fair Housing), copy-paste ready.
15 CSS Shimmer Skeleton Cards
15 production-ready CSS shimmer skeleton cards for loading states — Instagram-style profile cards, e-commerce product grids, data tables, SaaS dashboard widgets, blog article lists, social comment sections, search results, mobile feeds, form inputs, hero banners, chat bubbles, masonry galleries, dropdown notifications, and a dark-mode toggle skeleton. GPU-accelerated transform-only shimmer, zero-CLS placeholders, WCAG accessible with aria-busy + role='status'.
12 CSS Infinite Marquee Designs
12 production-ready CSS infinite marquee demos — as-seen-in press logo bars, B2B client logo walls, sponsor & exhibitor tier rows, e-commerce USP text tickers, live stock and crypto price tickers, flash-sale announcement bars, auto-sliding testimonial rails, portfolio tech-stack scrollers, image-heavy brand walls, vertical agency-services columns, draggable inertia marquees and scroll-velocity reactive marquees. Every loop is seamless, pause-on-hover, WCAG-friendly, and copy-paste.
11 CSS animation-timeline Demos
11 pure CSS animation-timeline demos built on the W3C scroll() and view() spec — reading progress bar, view-timeline fade & reveal, shrinking sticky header, stacking cards, horizontal scroll section, parallax hero, container shadow indicators, reverse-scroll columns, text scrim reveal, cover card to sticky header, and image zoom / clip-path wipe. Zero JS, off the main thread, Core Web Vitals safe. Copy-paste ready.
36 CSS Button Hover Effects
Restaurant recipe cards, SaaS hero CTAs, and e-commerce add-to-cart flows all hinge on a button that responds. This set covers sliding background wipes, center underline draws, outline strokes, conic and rainbow gradient border spins, liquid fills with waves, blob morphs, neon pulse glows, cursor-tracking spotlights, magnetic ripples, glitch slices, 3D depress presses, kinetic text flips, icon slide-ins, particle bursts, split reveals, typewriter retypes, and a Liquid Glass ripple.
20 CSS Neon Text Effects
20 hand-coded CSS neon text effects for SaaS hero CTAs, Twitch/streaming overlays, cyberpunk retail signage, 80s synthwave portfolios, and dark-mode fintech dashboards — neon glow button hover, flashing sign, realistic flickering tube, hollow text-stroke outline, LED 7-segment clock, animated @property hue rotation, low-INP compositor motion, Tailwind utility, glitch, on/off toggle, gradient-flow terminal. Layered text-shadow + box-shadow, WCAG-friendly, copy-paste ready.
16 CSS Bounce Animations
16 hand-coded CSS bounce animation templates built as real-world use cases — landing-page scroll-down arrow, animate.css-style bounce-in entrance modal, Stripe payment success checkmark, Sonner/Radix toast notification, chat typing dots (wave), button hover bounce, SaaS pricing card hover lift, Shopify Add-to-Cart cart-icon shake, notification badge pop, dark-mode toggle switch elastic snap, physics ball with squash-and-stretch, weightless floating badge, bouncing letters wave, Stripe checkout form error alert shake, DVD screensaver viewport bounce, and Tailwind <code>animate-bounce</code> customization. Every bounce animates <strong>only <code>transform</code> and <code>opacity</code></strong> — never <code>margin-top</code>, <code>top</code>, <code>width</code>, or <code>height</code>, which trigger the layout+paint pipeline every frame and tank INP scores. 12 pure CSS + 4 with vanilla JS (modal open/close, toast auto-cycle, cart bounce class toggle, error state toggle). Every demo respects <code>prefers-reduced-motion</code> with a tier-appropriate fallback — arrivals show settled state, interactions swap for instant color change, playful demos disable entirely. Scoped under <code>.bn-NN</code>, MIT-licensed.
16 CSS Pulse Animations
16 hand-coded CSS pulse animation templates built as real-world use cases — landing-page CTA button pulse, mobile FAB ripple, video play overlay halo, e-commerce Add-to-Cart hover-triggered double pulse, notification bell badge, live status dot, ECG heartbeat waveform, DevOps server status ring, recording indicator, map pin drop, skeleton loader shimmer, form submitting state, load-more staggered dots, wishlist heart cardiac rhythm, voice search mic listening pulse, and security scan overlay. Every pulse animates <strong>only <code>transform</code>, <code>opacity</code>, and <code>box-shadow</code></strong> — the three GPU-compositor-safe properties that keep 60fps on real mobile hardware without triggering layout reflow. Animating raw <code>width</code>, <code>height</code>, <code>margin</code>, or <code>padding</code> would tank INP scores; every demo here avoids that trap. 13 pure CSS + 3 with vanilla JS (form submit state, load-more trigger, voice listening). All respect <code>prefers-reduced-motion</code> — medical/status indicators keep a static readable state, decorative pulses disable entirely. Scoped under <code>.pl-NN</code>, MIT-licensed.
18 CSS Slide In Animation Templates
18 hand-coded CSS slide-in animation templates covering the full modern web-app playbook — restaurant menu cards, e-commerce product grids, SaaS pricing tables, insurance quote forms, real estate property listings, doctor appointment slot pickers, fintech dashboard KPI cards with count-up, legal firm testimonials, bank mortgage loan calculators with sliders, hotel search results, online course cards, job listings, CRM contact grids, fitness class schedules, startup landing heroes, newsletter modals, GDPR cookie banners, and terminal-styled 404 error pages. Every template ships with industry-appropriate palette, typography, and real content — copy-paste directly into your restaurant, healthcare, fintech, real estate, or SaaS project without stripping out generic styling. 15 pure CSS + 3 with tiny vanilla JS. Compliance callouts embedded (TILA, GDPR, ABA Rule 7.1, state salary transparency laws). MIT licensed, prefers-reduced-motion honoured, accessibility-tested.
16 CSS Glitch Text Effects
16 production CSS glitch text effect designs with live demos and copy-paste code — cyberpunk RGB-split chromatic aberration, hover-triggered burst, retro VHS scanlines with chromatic distortion, Matrix-style character scramble decryption, 404 error broken-data corruption, ambient micro-glitch loop for marketing surfaces, sci-fi HUD terminal flicker, spooky horror twitching text with blood-glow, multi-line synchronized paragraph glitch, synthwave neon glow snap, intro-load reveal animation, hacker terminal build-fail scramble, canvas noise overlay blend, split color-channel chromatic drift, plus two AI-era concepts: LLM token-stream hallucination correction and Diffusion-model decode crystallization. Every glitch scoped under .gt-NN, copy-paste ready.
20 CSS Animated Buttons
20 hand-coded CSS animated buttons — neon glow, ripple, 3D press, liquid fill, jelly bounce, shine sweep, animated border, moving gradient CTA, text flip, submit success state, add-to-cart progress, download icon, hamburger-to-close, toggle switch, loading spinner inside button, next/prev arrow nav, and ghost button background reveal. Half pure CSS, half lightweight JS for production interactions.
20 CSS Image Hover Effects
20 hand-coded CSS image hover effects with live demos — zoom-in card, hover reveal text overlay, e-commerce product image swap, grid blur overlay, slide-up caption, grayscale-to-color, color tint overlay, neumorphic image card, glassmorphism overlay, glowing neon border, clip-path morphing, 3D tilt perspective, shining glare sweep, split transition, ripple animation, spinning avatar border, fullscreen background swap, masonry zoom, icon reveal centre, and 3D card flip. 18 pure CSS + 2 with a tiny vanilla JS snippet — no framework. Modern @property + animation-timeline techniques, prefers-reduced-motion honoured, CLS-safe via aspect-ratio, WCAG 2.2 AA compliant, MIT licensed.
20 CSS Text Gradient Effects
20 hand-coded CSS text gradient effects with live demos — hero title, Web3 neon glow, corporate logo, bold minimalist, hover transition, gradient button, active nav link, animated moving gradient, cyberpunk neon, metallic gold, glassmorphism contrast, pastel soft, vertical gradient, radial gradient, rainbow multi-colour, text stroke outline, @supports fallback pattern, Tailwind utility recipe, multiline paragraph, and dark-mode vs light-mode gradient swap via light-dark(). 18 pure CSS + 2 with a tiny vanilla JS snippet — no framework. Modern @property + animation-timeline + light-dark() techniques, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, MIT licensed.
16 CSS Gradient Animations
16 hand-coded CSS gradient animations with live demos — aurora mesh hero background, diagonal sweeping linear gradient, radial glow split, dark-mode subtle mesh pulse, glow-on-hover accent button, animated gradient border card, metallic shimmer skeleton loader, neon flowing underline link, infinite gradient text animation, hover-reveal text fill, glassmorphism moving backdrop, retro vaporwave cyberpunk mesh, liquid lava lamp blob, striped progress bar loader, file upload streaming state, and animated toggle switch track glow. 4 pure CSS + 12 with a small vanilla JS snippet — no framework. Modern @property typed-angle + conic-gradient + animation-timeline techniques, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, MIT licensed.
16 CSS Fade In Animation Designs
16 hand-coded CSS fade-in animations with live demos — pure-opacity hero fade with staggered delays, clip-path inset reveal, blur defocus, staggered grid cascade, scroll-triggered IntersectionObserver reveal, directional slide-fade up, scale-up zoom-in, scale-down zoom-in, rotateX perspective tilt, word-by-word split, skew sweep, radial clip-path mask reveal, greyscale-to-color saturate, rotateY flip card, glitch flash multi-step, and cascade letter drop. 13 pure CSS + 3 with a tiny vanilla JS snippet — no framework. animation-fill-mode forwards, prefers-reduced-motion honoured, MIT licensed.
14 CSS Typewriter Effect Designs
14 hand-coded CSS typewriter effects with live demos — canonical pure-CSS steps() + ch cursor, multi-line stagger, infinite word-swap loop, neon terminal prompt, clip-path reveal mask, SVG stroke-dashoffset handwriting, gradient highlight sweep, variable-font weight morph, per-character split stagger, vanilla-JS character injection, Matrix-rain scramble decode, RGB-channel glitch-on-type, syntax-highlighted code-editor typewriter, and scroll-triggered word reveal. 9 pure CSS (no JavaScript) + 5 with a tiny vanilla JS snippet — no framework. Modern @property + steps() techniques, prefers-reduced-motion honoured, MIT licensed.
30 CSS Hover Effects
30 hand-coded CSS hover effects covering every production interactive pattern shipping today — text hover (underline draw, glitch, letter-spacing expand, gradient reveal, split text, neon glow), button hover (magnetic liquid, border draw, shimmer shine, fill wipe, 3D press, ripple), card hover (3D tilt, flip, glassmorphism, spotlight, slide reveal, stack lift), image hover (zoom-pan, color channel split, distortion, duotone, curtain reveal, Ken Burns), navigation hover (underline slide, highlight fill, strikethrough link, inline word swap), and pointer-tracking effects (cursor dot trail, magnetic pull). 24 demos are 100% pure CSS using <code>:hover</code> + GPU-accelerated <code>transform</code> / <code>opacity</code> transitions; 6 use ~30-60 lines of vanilla JavaScript for pointer-coordinate tracking. All respect <code>prefers-reduced-motion</code>, use scoped <code>.hv-NN__*</code> class names so multiple effects coexist on the same page without style bleed, ship INP-safe (no layout-triggering animations), MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails ERB, plain HTML, or WordPress — zero framework dependencies.
25 CSS Spinners
25 hand-coded CSS spinners covering every production loading-spinner pattern developers reach for — neon arc with glowing leading-edge dot, dual counter-rotate ring spinner, dot chase orbit (Material Design indeterminate pattern), gradient conic sweep, heartbeat pulse, audio equalizer wave bars, stacked ring helix, morphing square-to-circle, comet trail with fading tail, DNA double helix, folding cube 3D grid (SpinKit's signature pattern), ripple pulse ring (concentric circles), clock tick sweep, infinity loop stroke, bouncing elastic dots, spiral galaxy, glassmorphism loader (backdrop-filter pattern), cyberpunk segmented ring (gamer/Web3 aesthetic), breathing circle, particle scatter burst, retro TV static noise loader, liquid blob morphing, progress arc fill (determinate variant), matrix rain column (cyberpunk vertical), and aurora orb. All <strong>100% pure CSS</strong> — zero JavaScript, zero libraries (no react-spinners, no react-loading-skeleton, no SpinKit copy, no loading.io snippet). Every spinner uses CSS <code>@keyframes</code> animating <code>transform</code> + <code>opacity</code> only (GPU-accelerated, INP-safe — no layout thrash). Every demo includes proper <code>role="status"</code> + <code>aria-live="polite"</code> markup so screen readers announce loading state correctly, respects <code>prefers-reduced-motion</code>, uses scoped <code>.sp-NN__*</code> class names so multiple spinners coexist on the same page without style bleed, MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails ERB, plain HTML, WordPress — zero framework dependencies.
20 CSS Loaders
20 hand-coded CSS loaders covering every production loading-indicator pattern developers reach for — spinning ring loader (the canonical Material Design pattern), dot chase loader, skeleton screen loader (Facebook/LinkedIn/YouTube content-shimmer pattern), progress bar loader with shimmer, bouncing balls loader, DNA double-helix loader, glitch flicker loader, heartbeat pulse loader, circular progress with percentage, liquid fill loader, neon arc spinner, cube flip 3D loader, audio wave bars loader, morphing square loader, orbit planet loader, typing dots indicator (chat/messaging pattern), staircase step loader, infinity loop loader, gradient conic spinner (Instagram-stories pattern), and particle burst loader. All <strong>100% pure CSS</strong> — zero JavaScript, zero libraries (no react-loading-skeleton, no react-spinners, no SpinKit copy, no loading.io snippet). Every loader uses CSS <code>@keyframes</code> animation on <code>transform</code> + <code>opacity</code> only (GPU-accelerated, INP-safe — no layout thrash). Every demo includes proper <code>role="status"</code> + <code>aria-live="polite"</code> markup so screen readers announce "loading" state correctly. Every demo respects <code>prefers-reduced-motion</code>, uses scoped <code>.ld-NN__*</code> class names so multiple loaders coexist on the same page without style bleed, MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails ERB, plain HTML, WordPress — zero framework dependencies.
30 CSS Keyframe Animations
30 hand-coded CSS @keyframes animations covering every production motion pattern shipping today — loading spinners (6 variants), typewriter text effect, bouncing ball, pulse-glow buttons, morphing blobs, particle burst, ocean waves, 3D flip cards, neon flicker, skeleton loading shimmer, glitch text, solar-system orbit, liquid-fill progress, stagger list reveal, fire animation, ripple click, floating elements, infinite-scroll ticker (marquee replacement), countdown timer, path drawing, spotlight, spring bounce, confetti explosion (no canvas), breathing meditation pulse, typewriter-delete loop, aurora borealis background, card stack reveal, kinetic typography, morphing progress steps, and animated gradient mesh background. All 30 are 100% pure CSS — zero JavaScript, zero libraries, zero dependencies. GPU-accelerated via transform + opacity (compositor-thread, 60fps on mid-tier mobile, INP-friendly). Each demo uses scoped .kf-NN__* class names + prefixed @keyframes names so all 30 coexist on the same page. Respects prefers-reduced-motion. MIT-licensed.
33 CSS Card Hover Effects
33 hand-coded CSS card hover effects with live demos — multi-axis 3D tilt with parallax, glowing gradient glassmorphic border, image zoom with content slide-up, front-to-back 3D flip, sibling de-emphasis with :has(), minimalist elevation, plus 27 more (elastic lift, conic-gradient border, holographic foil, neon sign, glitch RGB split, magnetic float, blueprint reveal, aurora drift and more). 26 pure CSS + 7 with a small vanilla JS snippet for cursor tracking. prefers-reduced-motion respected, scoped class names, MIT-licensed.
20 CSS View Transitions
20 hand-coded View Transitions API patterns covering the browser API that animates between two DOM states. Starts with the core mechanics — document.startViewTransition for single-page apps, the @view-transition at-rule that animates multi-page navigations with no JavaScript at all, setting view-transition-name programmatically for dynamic lists, replacing the default cross-fade with custom keyframes on the old and new pseudo-elements, and transition types for directional forward and back navigation. Then the shared-element morphs people actually build: card to detail page, image grid to lightbox, list reorder and filtering, sliding tab indicators, circular theme reveals, add-to-cart badge counters, accordions, drawers, native dialogs and multi-step wizards. Closes with the debugging pages that matter most — reduced-motion handling, feature detection, aspect-ratio image distortion, nested element isolation, and the duplicate-name bug that silently aborts an entire transition.
20 CSS Rotate Animations
20 hand-coded CSS rotation patterns that treat rotation as the subject rather than a side effect of another component. Covers the canonical infinite keyframe spin and why it needs linear timing, hover tilts that reverse cleanly, the transform rotate property against the modern independent rotate property, 180-degree disclosure toggles, 3D cube faces with perspective and preserve-3d, rotateY coverflow, scroll-driven angles on animation-timeline, hue-rotate colour cycling, the composition-order trap where rotate and translate swap results, meshed gear trains with correct tooth ratios, a turntable at 33 and a third rpm, gauge needles pivoting at their base, fan blades, orbital motion, text set around a circle, fanned card decks, transform-origin as a full reference, animation-play-state pause and resume, and reduced-motion safe rotation.
Layouts
See category page →
18 Tailwind CSS Settings Pages
18 hand-coded Tailwind CSS settings pages for SaaS dashboards, billing, and team administration. Covers section-nav account layouts, plan and seat billing summaries, usage quota meters with conic-gradient rings, invoice history tables, payment-method cards, roles and permissions matrices, teammate invite flows, API key management, two-factor setup, active-session lists, notification preference grids, theme panels, connected-app directories, data export, audit logs, and danger-zone delete sections.
18 CSS Settings Pages
18 hand-coded CSS settings pages for SaaS dashboards, billing and team administration. Covers section-nav account layouts, plan and seat billing summaries, usage quota meters, invoice tables, payment-method cards, roles and permissions matrices, teammate invite flows, API key management, two-factor setup, active-session lists, notification preference grids, theme panels, GDPR data export and danger-zone delete sections.
22 Tailwind CSS Feature Sections
22 hand-coded Tailwind CSS feature sections for SaaS marketing pages, developer tools, and enterprise landing pages. Covers tabbed product tours, alternating image rows, stat counters, problem-vs-solution splits, integration logo grids, accordion feature cards, plan comparison columns and tables, security compliance badges, API code blocks, sticky scroll storytelling, icon and bento grids, dark glassmorphism, scroll-reveal cards, 3D tilt cards, phone mockups, and vertical timelines.
31 Tailwind CSS Hero Sections
31 hand-coded Tailwind CSS hero sections for SaaS marketing pages, developer tools, mobile app launches, e-commerce product drops and editorial magazine covers. Covers split layouts with dashboard mockups, animated gradient mesh and conic-ring backgrounds, glassmorphism aurora cards, staggered word and kinetic-letter reveals, bento grids, before/after comparison sliders, parallax landscapes, terminal windows, brutalist and neon-cyberpunk styles, starfields, glitch text and mouse-tracking liquid-glass lenses.
17 Tailwind CSS Dashboard Layouts
17 hand-coded Tailwind CSS dashboard layouts for SaaS admin panels, analytics consoles, e-commerce merchant dashboards and AI copilot apps. Covers bento grids, collapsible icon-rail sidebars, KPI stat-card grids, master-detail inbox splits, fixed-header independent scroll panels, grid-template-area shells, off-canvas drawers, container-query cards, dark/light/system toggles, multi-level nested navigation, sticky-header data tables, masonry column packing, full-screen 100vh consoles and top-nav tab bars.
5 Tailwind CSS Ways to Center Div
5 Tailwind CSS ways to center a div: flexbox with items-center and justify-center for both axes, grid place-items-center in two classes, absolute positioning with inset-0 or translate over a glass UI, mx-auto with a max-w container for inline-axis centering, and a side-by-side board comparing all six methods with their trade-offs.
12 Tailwind CSS Full Page Sections
12 Tailwind CSS full-page section layouts for SaaS landing pages, product feature showcases, portfolios, and agency storytelling sites. Covers scroll-snap full-viewport panels sized with 100dvh, a JavaScript-free one-page scroller, scroll-snap-stop to prevent skipping, sticky stacking cards, frosted dot-rail navigation, scroll-spy active links without JavaScript, parallax and reveal-and-scale scroll-driven animations, horizontal scroll-snap chapters, and an accessible keyboard-navigable variant with reduced-motion support.
22 Tailwind CSS Headers
22 Tailwind CSS headers for SaaS apps, docs sites, storefronts, and marketing pages. Covers command-palette search with a ⌘K shortcut, workspace and version switchers, e-commerce cart and mega-menu clusters, sticky and shrinking scroll headers, a reading-progress bar, transparent-over-hero and glassmorphism surfaces, notification dropdowns, breadcrumb and two-row layouts, a collapsible sidebar, multi-level dropdowns, a full-screen hamburger overlay, a dismissible announcement bar, and five nav-link hover styles.
30 Tailwind CSS Grid Layouts
30 Tailwind CSS grid layouts for editorial features, docs pages with sticky tables of contents, photo galleries, bento product sections, analytics dashboards, pricing tables, and kanban boards — spanning holy-grail and 12-column page systems, masonry and mosaic photo walls, subgrid-aligned cards, container-query teasers, scroll-snap carousels, and dense auto-packed asset libraries. Scoped under .tgx-NN for no-collision pasting, prefers-reduced-motion, guarded, framework-agnostic.
30 Tailwind CSS Sidebar Layouts
30 Tailwind CSS sidebar layouts for SaaS dashboard shells, admin consoles, documentation trees, and webmail two-pane inboxes — spanning fixed and sticky rails, collapse-to-icon and off-canvas drawers, dual-panel and three-pane workspaces, nested <code><details></code> file trees, and floating glassmorphism panels. Scoped under <code>.tsl-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
14 Tailwind CSS Wave Section Dividers
Restaurant menu cards, SaaS and agency landing-page heroes, and dark-footer transitions all lean on wave section dividers to soften the seam between two colour blocks. This set covers inline SVG paths, reusable masks, seamless animated tiles that scroll sideways, clip-path cuts with no SVG at all, stacked multi-colour layers, inverted concave dips, sine-accurate curves, gradient-masked edges, asymmetric organic shapes, dark-mode colour matching, photo overlays, and a vertical seam for sidebars — plus the responsive mobile-gap fix.
21 Tailwind CSS Pricing Sections
Pricing sections for SaaS marketing pages and product landing pages, spanning three-tier layouts, a highlighted popular tier, a full feature comparison table, and single-product premium cards. Includes zero-JS monthly/yearly and currency toggles, a usage-slider estimator, per-seat and pay-what-you-want calculators, bento and timeline arrangements, feature accordions built on details, plus glass, brutalist, synthwave, conic-border, and cursor-spotlight treatments.
15 Tailwind Card Grid Layouts
Browse 15 CSS Tailwind card grid layouts with live demos and copy-paste code. Auto-fit blog archives, masonry walls, bento boxes, pricing grids. Mobile-first.
22 CSS Feature Sections
22 hand-coded CSS feature section patterns — tab-switcher product tour, alternating image rows, live metric counters, problem vs solution split, autoplay product video, integration logo strip, accordion feature cards, three-tier feature parity, security and compliance badges, API code response split, customer quote per feature, sticky-scroll storytelling, icon grid, bento asymmetric, dark glassmorphism, scroll reveal, code preview, comparison matrix, SaaS grid, 3D perspective cards, floating phone mockup, and vertical timeline.
22 CSS Headers
Command Palette header with ⌘K shortcut, docs header with version switcher and search, SaaS app-shell header with workspace picker, and e-commerce header with cart, wishlist, and account cluster. Covers sticky scroll-timeline headers, glassmorphism backdrop-filter bars, transparent-over-hero landings, CSS Grid mega menus, multi-level dropdowns, full-screen overlay hamburger nav, reading-progress meters, shrink-on-scroll, and a dismissible announcement bar.
20 CSS Blog Layouts
20 hand-coded CSS blog and editorial layouts for magazine homepages, news sites, personal archives, newsletter back-issues, recipe and podcast blogs, developer tutorials, and long-form journalism. Covers a magazine homepage with hero plus editor-picks rail, a news homepage with breaking-news ticker, blog archives with sticky year separators, Substack-style issue-numbered archives, recipe card grids with prep-time badges, podcast episode lists with waveforms, long-form articles with scroll-driven reading progress, drop caps and floated pull quotes via first-letter, Medium-style 65ch centred reader layouts, dev tutorials with a sticky code panel beside prose, interview transcripts with alternating speakers, case-study pages with stat counters, video blogs with an episode rail, full-bleed photo essays, news articles with sticky related-stories sidebars, documentation pages with prev/next chapter nav, a standalone blog post card, a scroll-snap category filter bar, an inline newsletter callout that breaks out of the prose column, and a horizontal featured-post rail. 12 are pure CSS with zero JavaScript. Every layout is scoped under a .bl-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
25 CSS Footer Designs
25 hand-coded CSS footer designs for SaaS marketing pages, e-commerce storefronts, agency portfolios, documentation sites, mobile apps, and local business sites. Sticky footer with flexbox and CSS grid, responsive 4-column category-link footer, SaaS mega footer with resource grid, minimalist logo + copyright, e-commerce footer with payment icons and security badges, dark mode toggle footer, local-business footer with embedded Google Maps and office hours, mobile-first collapsible accordion, social media follow icons, SaaS SOC 2 / GDPR / HIPAA compliance badge footer, animated gradient background, newspaper masthead multi-column, full-width newsletter signup, card layout with contact details, monospaced developer portfolio, audio player music website, dark mode glowing neon, centered minimalist blog, multi-column mega grid, integrated contact form + map, trust badges + guarantee icons, accordion FAQ, pre-footer call-to-action bar, multi-language + currency selector, and animated SVG wave. 16 Pure CSS + 9 Light JS. Every design scoped under .ft-NN prefix for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, framework-agnostic (React, Vue, Svelte, Astro, Next.js, Nuxt, Remix, SvelteKit).
15 CSS Aspect Ratio Demos
15 hand-coded CSS aspect-ratio demos for video embeds, product galleries, IAB ad slots, native dialogs, and CLS-safe placeholders: 16:9 iframe YouTube embed with click-to-load facade + up-next rail, 21:9 full-screen hero video with min-height/max-height:100svh guardrails + Ken Burns drift, 1:1 Instagram-style square grid with 2×2 feature tile, 4:3 magazine card image cover, 9:16 vertical stories rail (TikTok/Reels/Shorts pattern) with scroll-snap + segment bars, 4:5 apparel product image gallery with radio-driven state + 1:1 thumbnails, 1:1 zoom thumbnail carousel with pointer-tracked --zx/--zy magnifier, prevent-layout-shift placeholder with live PerformanceObserver CLS meter (before/after side-by-side lab), dynamic content fallback with three policies (bend/strict/auto) via :has() toggle, IAB ad banner slots (728×90 leaderboard, 300×250 medium rectangle, 300×600 half-page, 320×50 mobile) with skeletons + container-query mobile swap, responsive modal dialog sized min(92vw, 88svh×16/9, 1080px) with @starting-style animation, responsive OpenStreetMap iframe wrapper with 16:9 → 1:1 container-query narrow swap, media query orientation live HUD + resize:both container-ratio playground, object-fit logo cloud with contain/cover/fill switcher via :has(), and side-by-side padding-top hack (height:0 + padding-top:56.25%) → modern aspect-ratio migration comparison with live ratio picker. 11 truly Pure CSS + 4 with a tiny optional vanilla JS snippet (facade swap, pointer magnifier, CLS meter, native dialog). Every demo is scoped under a unique .car-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
17 CSS Sticky Elements
17 hand-coded CSS position:sticky demos covering every real-world sticky use case: sticky header on scroll, sticky header that changes background when scrolled (via scroll-state() container queries), sticky shrinking navbar with animation-timeline: scroll(), stacked sticky header + secondary tabs with :has(:target) scrollspy, sticky sidebar inside flexbox with align-self:flex-start, sticky Table of Contents with IntersectionObserver scrollspy + scroll-driven progress bar, iOS-contacts sticky section headers with alphabet rail, sticky chapter card stack with view() timeline entrances, sticky table header inside scrollable div, sticky first column + header with correct z-index corner cell (Airtable/Retool/Metabase pattern), mobile sticky add-to-cart bottom bar with safe-area-inset, sticky floating promo banner with :has(:checked) dismiss, sticky checkout order summary sidebar, sticky footer to bottom of short pages via grid auto/1fr/auto, sticky social share rail (desktop-left / mobile-bottom via container query), a debug lab showing why sticky breaks when an ancestor has overflow:hidden (vs overflow:clip), and a stuck-state detection sensor using both scroll-state(stuck: top) AND IntersectionObserver sentinel fallback. 15 truly Pure CSS + 2 with a tiny optional vanilla JS snippet. Every sticky is scoped under a unique .cst-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
12 CSS Masonry Layouts
12 hand-coded CSS masonry layouts covering the three canonical engines (multi-column `columns:` walls, CSS Grid row-span lattices, CSS Grid dense auto-flow packing, flex column-wrap boards) plus the W3C native masonry spec with layered @supports fallbacks. Every real-world masonry use case: Pinterest-style image walls, `<dialog>`-element lightbox galleries, responsive photo grids with grid-row spans preserving reading order, blog card walls with column-span editor's-pick spans, e-commerce product listings with dense packing + feature tiles, flex column-wrap horizontally-scrolling social feeds, art-directed portfolio showcases with :has() spotlight, testimonial walls with mask-image fade + scroll-driven reveal, mixed-ratio video thumbnail galleries, quantized dashboard widget grids on 108px lattices, IntersectionObserver-append infinite scroll walls with aria-live, and the modern @supports (grid-template-rows:masonry) / display:masonry cascade with live badge showing engine status. 10 truly Pure CSS + 2 with a tiny optional vanilla JS snippet (lightbox dialog + infinite-scroll append). Every wall is scoped under a unique .msn-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
16 CSS Portfolio Layouts
16 hand-coded CSS portfolio layouts covering the exact patterns freelance developers, UX/UI designers, product designers, illustrators, photographers and agency teams actually ship for their own portfolio sites: responsive CSS-Grid galleries with fr tracks and auto-fit minmax, Apple-style bento grids, no-JS native masonry walls, sticky-sidebar flexbox splits, hover-overlay project grids with staggered scrims, scroll-snap horizontal showcases, 50/50 split-screen heroes with :has() accent recoloring, dark-mode CSS-variable token systems, single-page developer portfolios with anchor navigation and scroll-timeline progress rails, UX case-study articles with 1fr/62ch/1fr content grids, ultra-minimalist graphic-design indexes with clip-path thumb reveals, freelancer layouts with testimonials plus 3-tier pricing, beginner-friendly auto-fit card grids, 3D card-flip project tiles, full-screen 100svh hero openers with view()-timeline parallax and sticky header+sidebar app-shell templates. 14 truly Pure CSS + 2 with a tiny optional vanilla JS snippet. Every portfolio is scoped under a unique .cpl-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards on every animation, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
17 CSS Dashboard Layouts
17 hand-coded CSS dashboard layouts for SaaS admin panels, analytics consoles, e-commerce merchant dashboards and AI copilot apps. Covers CSS Grid bento boards, collapsible icon-rail sidebars, auto-fit KPI card grids, split-pane master-detail views, fixed-header independent scroll panels, grid-template-areas shells, off-canvas mobile drawers, container-query responsive cards, dark mode CSS variable tokens, multi-level nested navigation, sticky-header data tables, masonry column packing, full-screen 100vh consoles and top-nav tab bars.
16 CSS Two-Column Layouts
16 hand-coded CSS two-column layout templates covering every real-world pattern developers need: flexbox 68/32 content+sidebar, CSS Grid stacked mobile-to-desktop responsive, fixed-left/fluid-right dashboard, exact 50/50 marketing split, two-column form checkout, sticky-sidebar docs, edge-to-edge split-screen hero, equal-height cards, hero+content header, floated legacy pattern, magazine article layout, pricing table with Pro plan elevated, product-card grid, auto-width sidebar via minmax, and pure margin/inline-block without flexbox or grid. Copy-paste HTML and CSS, WCAG 2.2 accessible, mobile-first, prefers-reduced-motion guarded, framework-agnostic.
14 CSS Wave Section Dividers
14 hand-coded CSS wave section dividers — SVG waves, clip-path polygons, gradient masks, animated sine, inverted curves, stacked multi-color, gradient background masks, asymmetrical organic, dark-mode color match, animated transitions, image overlays, and vertical seam variants. Zero dependencies, CLS-safe, prefers-reduced-motion guarded, framework-agnostic.
22 CSS Split Screen Layouts
22 hand-coded CSS split-screen layouts — classic 50/50, diagonal clip-path, hover-reveal grid, before/after slider, sticky-scroll storytelling, 3D perspective. Semantic HTML, WCAG 2.2 focus rings, prefers-reduced-motion guards, framework-agnostic.
30 CSS Sidebar Layouts
30 CSS sidebar layouts for SaaS dashboards, admin panels, documentation trees, webmail two-pane inboxes, and e-commerce filter rails — spanning fixed and sticky app shells, icon-collapse and mini-rail navigation, off-canvas and push drawers, dual-sidebar and three-pane workspaces, glassmorphism floating panels, nested details trees, resizable and container-query adaptive layouts, and pure-CSS checkbox and target toggles.
30 CSS Grid Layouts
30 hand-coded CSS grid layouts — full-bleed article, sticky sidebar, responsive media gallery, modern holy grail, dynamic data grid, card stack overlay, plus 24 field-tested patterns (12-column, bento, magazine editorial, RAM auto-fit, quantity queries, Pinterest masonry, subgrid, dashboard, pricing, kanban, container queries, and more). Pure CSS, semantic HTML, RTL-ready via logical properties, copy-paste.
32 CSS Timelines
32 hand-coded CSS timeline layouts — GitHub-style commit history, CI/CD deploy pipelines, resume with CSS subgrid, order tracking, activity feeds, product roadmaps, SaaS changelogs, Gantt charts, conference agendas, scrollytelling, scroll-driven reveals, and 21 more field-tested patterns. Copy-paste ready.
6 CSS Bento Grid Layouts
6 production CSS bento grid layouts with 12 hand-coded designs — Apple-style product showcase, SaaS feature value-prop matrix, analytics dashboard overview, creative portfolio, e-commerce category hub, and link-in-bio social hub. Each topic ships 2 sub-variants side-by-side so visitors see both a keynote aesthetic and a paper-doc variant at once. Container queries, CSS Grid, zero dependencies, copy-paste ready.
15 CSS Card Grid Layouts
Card grids for blog archives, SaaS dashboards, pricing pages, and product catalogs, plus editorial and bento layouts. Covers auto-fit grids that add and drop columns via repeat(auto-fill), asymmetric Apple-style bento boxes, Pinterest-style fluid masonry, equal-height product cards, KPI dashboard tiles, three-tier pricing comparisons, testimonial walls, team directories, 3D hover flip cards, and glass bento tiles.
15 CSS Flexbox Layouts
15 production-ready CSS flexbox layouts with live demos and copy-paste code — holy grail page shell, responsive card grid, sticky navbar, masonry-style columns, sidebar dashboard, product cards, pricing table, magazine article, sticky footer with min-block-size: 100dvh, centered hero, vertical timeline, chat interface, mosaic gallery, two-column form, and kanban board. Every demo is mobile-first, WCAG-friendly, and works without a build step.
5 CSS Ways to Center a Div
5 hand-coded CSS ways to center a div: Flexbox with align-items and justify-content for both axes, CSS Grid place-items in one line and a 3×3 named-template track, absolute positioning with top/left 50% plus translate over a glassmorphism UI, margin:0 auto and the logical margin-inline:auto for inline-axis centering, and a side-by-side board comparing Flexbox, Grid, Absolute+Transform and table-cell with their trade-offs.
21 CSS Pricing Sections
Classic three-tier SaaS layouts, a highlighted "most popular" tier, and a real feature comparison table with sticky headers sit alongside interactive pricing: a pure-CSS monthly/yearly toggle and currency switcher built on hidden radios and :has(), a usage-slider estimator, per-seat calculator, and pay-what-you-want chips. Also single premium cards, bento and vertical-timeline arrangements, feature accordions on details/summary, plus glass aurora, brutalist print, synthwave neon, 3D tilt, conic-border, and cursor-spotlight treatments.
31 CSS Hero Sections
31 hand-coded CSS hero sections — SaaS product mockup, B2B split-column, gradient mesh, glass over aurora, terminal dev, Memphis animated shapes, social-proof with press logos, bento grid, before/after slider, parallax mountain, 3D card stack, particle starfield, glitch RGB, conic orbit, and a Liquid Glass mouse-tracking refraction hero whose cursor-following lens magnifies and warps the headline beneath it (Apple iOS 26 / macOS Tahoe aesthetic). No images, no dependencies, copy-paste ready.
20 CSS Container Queries
20 hand-coded container query patterns that treat the query mechanism as the subject rather than a side effect of a layout. Starts with the core mechanics — container-type on the ancestor, the full cq unit family from cqi and cqw through cqmin and cqmax, named containers with container-name, and a card component that restyles itself from the width of the slot it lands in. Then the concepts: how container queries differ from media queries and where each still belongs, style queries that read a custom property instead of a size, scroll-state queries for stuck and scrollable and snapped, fluid type sized from the container rather than the viewport, and widget resizing. Then the reflow patterns people actually build — product grids, media objects, forms, navigation and tables that become cards. Closes with the advanced surface: progressive enhancement, nested container contexts, the infinite-loop trap that has no media query equivalent, combining queries with CSS Grid, and the five reasons a container query silently does nothing.
12 CSS Full Page Sections
12 hand-coded full-page scroll sections for product tours, portfolios, and one-page marketing sites. Covers native scroll-snap panels that need no JavaScript at all, the 100dvh fix for mobile address bars that jump the layout, scroll-snap-stop to stop fast flicks skipping sections, sticky stacking panels that pin and overlay, scroll-driven parallax backgrounds, reveal-and-scale transitions, sticky dot navigation, scroll-spy link state, horizontal full-screen sliders, and a keyboard-accessible build that degrades cleanly under reduced-motion.
20 CSS Diagonal Sections
20 hand-coded CSS diagonal sections for SaaS landing pages, agency sites, and product marketing. Covers clip-path polygon bands, the skewY technique with counter-skewed content, angled heroes with CTAs, sloped pricing and testimonial bands, diagonal footer transitions, asymmetric and stepped edges, rounded angle corners, scroll-animated clip paths, parallax backgrounds, and inline SVG diagonal edges that stay crisp at any viewport width. Includes the two builds people search for when the technique breaks: the responsive fix for angles that go steep on mobile, and the z-index stacking order that stops content vanishing under a neighbouring band.
Navigation
See category page →
32 Tailwind CSS Accordions — Vertical & Horizontal
32 hand-coded Tailwind CSS accordions for pricing-page FAQs, mobile navigation menus, product filter sidebars, documentation trees and product changelogs. Covers native details and summary disclosure, smooth height transitions, exclusive single-open behavior, rotating chevron and plus-minus icons, nested tree views, numbered onboarding steps, circular progress rings, timelines, 3D paper folds, and horizontal accordions from image galleries and feature sections to album shelves and cinematic film strips.
32 Tailwind CSS Tabs
32 hand-coded Tailwind CSS tabs for documentation sites, SaaS dashboards, settings panels, mobile app shells and type specimens. Covers sliding underline and SVG-drawn indicators, iOS segmented controls, VS Code file tabs, vertical timeline tabs, sliding pill and icon tabs, bento card tabs, bottom navigation bars, variable font-weight contrast, and expressive print styles from Bauhaus color blocks to risograph and stencil plates.
15 Tailwind CSS Navigation Menus
15 hand-coded Tailwind CSS navigation menus for site headers, documentation bars, admin dashboards, portfolios and mobile apps. Covers animated hover-underline navbars, hover and keyboard-accessible dropdowns, mega menus, slide-out hamburger drawers, full-screen overlay menus, shrink-on-scroll sticky headers, collapsible icon-rail sidebars, sliding tab indicators, breadcrumb styles, glassmorphism bars, mobile bottom docks, multi-level accordion sidebars, magnetic hover links, neon glow bars and spring-animated pill indicators.
17 Tailwind CSS Side Menus
17 hand-coded Tailwind CSS side menus for app shells, documentation sites, admin dashboards and mobile navigation. Covers slide-in drawers with animated hamburgers, blurred backdrop overlays, off-canvas push layouts, hover-expand icon rails, sticky full-height sidebars, nested accordion trees, neumorphism and glassmorphism surfaces, cyberpunk neon and brutalist styles, checkbox-hack and toggle-button collapse with no JS, and a macOS glass dock with a sliding highlight.
25 Tailwind CSS Sticky Navigations
250-540 chars. Let me trim.\n\n25 hand-coded Tailwind CSS sticky navigations for SaaS headers, documentation sites, e-commerce storefronts and mobile apps. Covers no-JS sticky navbars, flexbox three-zone headers, hamburger drawers, floating glass pills with backdrop blur, shrink-on-scroll and hide-on-scroll headers, transparent-to-solid hero bars, reading progress indicators, mega menus, storefront search with cart badges, scrollspy pills and mobile bottom tabs.
20 Tailwind CSS Mega Menus
20 hand-coded Tailwind CSS mega menus for site headers, documentation bars, e-commerce department navigation, SaaS dashboards and editorial mastheads. Covers focus-within panels, hover-intent delays, safe-triangle tracking, subgrid columns, viewport edge positioning, Escape-to-dismiss with focus return, arrow-key navigation, ARIA disclosure semantics, @starting-style animations, featured article images and product-finder filters.
16 Tailwind CSS Mobile Navbars & Menus
16 hand-coded Tailwind CSS mobile navigation components for app bottom tabs, hamburger drawers, full-screen overlay menus, FABs and command palettes. Covers slide-out drawers, clip-path reveal menus, iOS frosted tab bars, radial FAB fan-outs, swipeable sidebars, speed-dial menus, sliding-pill indicators, glassmorphism and neon overlays, swipe carousels, collapsible breadcrumbs and Cmd+K palettes.
11 Tailwind CSS Glassmorphic Navbars
11 hand-coded Tailwind CSS glassmorphic sticky navbars for SaaS landing pages, portfolios, dark-mode cyberpunk sites and Next.js App Router apps. Covers floating frosted-glass headers over gradient heroes, transparent bars that frost on scroll, neon-glow smoked glass, detached floating pill navbars, glass mega menus and dropdowns, hamburger off-canvas drawers, zero-JS backdrop-blur sticky headers, animated conic-gradient borders, WCAG AA accessible fills and Framer Motion React headers.
39 Tailwind CSS Breadcrumbs
39 Tailwind CSS breadcrumb trails for e-commerce faceted navigation, docs sites, multi-step checkout wizards, marketplace filters, and dashboards. Includes schema.org Microdata trails, collapsing container-query bars, removable filter chips, dropdown sibling menus, clip-path arrow and chevron shapes, glassmorphism and neumorphic pills, gradient-text and animated underline links, isometric layered tiles, truncated mobile trails, and numbered step indicators. Light and dark themes, keyboard-accessible, semantic markup.
20 Tailwind CSS Sidebars
Sidebar navigation patterns for admin dashboards, chat and messaging apps, docs sites, and app shells: an accessible ARIA nav reference, focus trap with restore-on-close, inert background content behind drawers, collapsible icon rails announcing expanded state, roving tabindex, persisted collapse across reloads, overscroll containment, nested details/summary submenus, keyboard-resizable and responsive drawers, sticky full-height layouts, footer pinning, and current-page state.
20 Tailwind CSS Responsive Navbars
20 Tailwind CSS responsive navbars spanning frosted glassmorphism sticky bars, three-column mega menus, off-canvas sidebar and vertical rail drawers, animated underline tabs, floating glass pills and multi-segment islands, scroll-aware shrink headers, neon dark chrome, split two-tone and centered-logo layouts, iOS-style bottom tab bars, full-screen overlay menus, morphing search fields, breadcrumb progress and step wizard headers, dual announcement stacks, and IntersectionObserver scroll-spy highlights.
22 Tailwind Dropdown Menus
22 Tailwind dropdown menus for site navigation, mega menus, and app UI — hover slide-downs, clip-path and 3D-flip reveals, glassmorphism and staggered panels, four-column and split-screen mega menus, zero-JS <code><details></code> builds, nested multi-level flyouts, command palettes, and custom selects. Scoped under <code>.tdd-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
28 Tailwind Hamburger Menus
28 Tailwind hamburger menus for mobile navigation, app drawers, and responsive navbars. Covers slide-in off-canvas drawers with dimmed backdrops, checkbox-hack and :has() menus with no JavaScript, animated 3-line to X icon morphs, full-screen overlays, push-page content shifts, slide-out sidebars, glassmorphism blur panels, native details accordions, bottom nav bars, and breakpoint-driven navbar toggles. Accessible, keyboard-navigable, copy-paste ready.
24 Tailwind Liquid Glass Navbars
iOS 26 floating tab bars, macOS Tahoe menu strips, visionOS frosted slabs, and Dynamic Island morphing pills — 24 Tailwind navigation bars built on the liquid glass look. Covers sticky scroll-to-frost headers, SVG refraction toolbars, sliding capsule tab bars with group-has, responsive burger menus, container-query sidebars that fold to bottom tabs, plus light/dark, high-contrast, and fallback-first variants. Semantic HTML, backdrop-filter, copy-paste ready.
20 CSS Mega Menus
20 hand-coded CSS mega menus covering hover-intent delay, the safe-triangle problem, multi-column grid panels, viewport-edge collision, full-bleed panels inside a constrained header, keyboard access with Escape, correct disclosure ARIA, touch double-tap, shared swap panels, and mobile collapse. Copy-paste ready, accessible, framework-agnostic.
20 CSS Sidebar Navigation
20 hand-coded CSS sidebar navigation patterns covering the accessible ARIA reference build with aria-current and aria-expanded, focus trapping and restoring focus to the trigger on close, inert background content behind a drawer, why navigation is not a tab list, announcing collapsed and expanded state, roving tabindex for keyboard navigation, persisting collapse state across reloads, scroll containment with overscroll-behavior, nested submenu keyboard and screen reader behavior, a resizable sidebar with a keyboard accessible handle, plus checkbox collapse, responsive breakpoint behavior, icon rails, current page state, disclosure menus, details and summary accordions, sticky layout mechanics, stacking order, off-canvas drawers and footer pinning. 12 demos are pure CSS; 8 use vanilla JavaScript.
20 CSS Pagination
20 hand-coded CSS pagination designs for admin dashboards, e-commerce product grids, blog archives, search results, and documentation sites. Covers pure-CSS no-JavaScript pagination driven by the :target selector, ellipsis truncation for large page ranges, responsive layouts that collapse from full numbers to a compact page-X-of-N on mobile via container queries, first/last/prev/next icon buttons, a jump-to-page input, an items-per-page selector, Tailwind CSS and Bootstrap 5 variants, WCAG-compliant ARIA markup with aria-current and visible focus rings, data-table and admin bars, e-commerce grids with result counts, blog archives, cursor-based load-newer/older feeds, sliding pill active indicators, hover underline animations, 3D flip perspective keys, vertical side-docked rails, full-width fluid splits, glassmorphism, and neumorphic soft UI. 16 are pure CSS with zero JavaScript. Every design is scoped under a .pgn-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
25 CSS Sticky Navigations
25 hand-coded CSS sticky navigation headers for marketing sites, app shells, documentation and storefronts. Covers position:sticky bars, flexbox logo-links-CTA layouts, hamburger toggles, shrink-on-scroll compaction, hide-and-reveal on direction, transparent-to-solid hero headers, reading progress bars, underline-slide indicators, mega menus, scrollspy, sticky tables of contents and mobile bottom tab bars.
18 CSS Vertical Tabs
18 hand-coded CSS vertical tab designs for SaaS settings panels, documentation sidebars, product feature marketing pages, and pricing comparison layouts: pure CSS vertical tabs with zero JavaScript (checkbox-hack + radio button pattern), responsive vertical tabs (desktop → mobile accordion), vertical tabs with SVG icons and text labels, icon-only mini sidebar with tooltips (VS Code / Discord / Slack pattern), vertical tabs with sliding active-indicator bar (Radix / HeadlessUI style), Bootstrap 5 vertical tabs template, Tailwind CSS vertical tabs, vertical tabs accordion hybrid with native details/summary, settings panel vertical tabs (Stripe / Linear / Vercel / Notion SaaS admin canonical), docs sidebar vertical tabs with category groups (Docusaurus / Mintlify / Nextra / VitePress / Starlight pattern), pricing comparison vertical tabs, product feature vertical tabs (Stripe / Linear / Framer marketing page pattern), vertical tabs with :has() active state (pure CSS, Baseline Dec 2023), vertical tabs with View Transitions API panel swap, vertical tabs with native details name attribute exclusive group (Baseline Sep 2024), dark mode vertical tabs with theme toggle, glassmorphism frosted sidebar vertical tabs, and vertical tabs with full WAI-ARIA keyboard navigation (WCAG 2.2 AA reference — arrow keys / Home / End / Space / Enter). 12 Pure CSS + 6 Light JS. Every design scoped under .vt-NN prefix for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, WCAG 2.2 AA accessible, framework-agnostic (React, Vue, Svelte, Astro, Next.js, Nuxt, Remix, SvelteKit).
28 CSS Hamburger Menus
28 hand-coded CSS hamburger menus covering the exact patterns SaaS builders, e-commerce teams, mobile-app designers, and marketing sites actually ship: clip-path circle expand, ARIA-audited keyboard-navigable, animated 3-line to X icon morphs, off-canvas drawers with dimmed backdrops, pure CSS checkbox-hack (zero JavaScript), integrated search + social drawers, glassmorphism backdrop-blur overlays, push-canvas content shifts, full-screen mobile takeovers, slide-out sidebars, responsive navbar toggles with media queries, minimalist floating buttons, Tailwind CSS component recipes, Bootstrap 5 navbar toggler setups, WCAG 2.2 AA dialogs with focus trap + Escape, grid-template-rows slide-down dropdowns, mobile bottom nav bars with floating FAB, multi-level accordion nested menus with <details>, flexbox right-aligned patterns, radial ripple expansions, sticky shrinking icons on scroll, neumorphic soft-UI toggles, brutalist bordered icons, and 3D flip canvas transforms. 11 truly Pure CSS + 17 with a tiny optional vanilla JS snippet + 1 Tailwind + 1 Bootstrap 5 wiring. Every menu is scoped under a unique .chm-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards on every animation, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
26 CSS Circular Menus
26 hand-coded CSS circular and radial menu designs, from the floating-action FAB speed dial and dashboard radial hubs to game-style pie-slice wheels, SVG gooey metaball fans, hexagonal honeycombs, iris-aperture reveals, orbiting satellites on offset-path, compass-rose directional nav, sci-fi HUD rings, glassmorphism popovers built on the native Popover API, vinyl-record players, and full-takeover nebula overlays on native dialog. Every design uses CSS trigonometry (sin(), cos()) or the counter-rotation trick for positioning, ships real keyboard navigation, aria-labels on icon-only buttons, and a prefers-reduced-motion guard. Copy-paste HTML, CSS and vanilla JS with zero framework dependencies — MIT licensed.
11 CSS Glassmorphic Sticky Navbars
11 hand-coded CSS glassmorphic sticky navbars using backdrop-filter blur + saturate: SaaS landing header, scroll-triggered frost, dark cyberpunk, floating pill, glass mega menu, mobile drawer, Core Web Vitals baseline, animated conic border, WCAG-AA accessible, React + Framer Motion, minimalist portfolio. Every navbar is position:sticky with proper scroll containers. Zero dependencies, framework-agnostic, MIT licensed.
39 CSS Breadcrumbs
39 hand-coded CSS breadcrumbs — Schema.org BreadcrumbList Microdata + WCAG 2.2 accessible (Google Rich Results eligible), :has() responsive collapse, dark/light theme toggle with color-mix, Shopify/Amazon e-commerce filter chip removal, Vercel/Linear/Notion SaaS dashboard app-shell pattern, Docusaurus/Mintlify sticky scroll-shrink header, Amazon-style dropdown sibling menus, NFT/Web3 holographic shimmer (@property + conic-gradient), SaaS marketing gradient text, Airbnb filter chip with container queries, editorial blog wave underline, developer docs one-click path copy (Clipboard API), and 26 more. Semantic HTML: <nav aria-label='Breadcrumb'> + <ol> + aria-current='page'. Framework-agnostic, MIT-licensed.
32 CSS Accordions — Vertical & Horizontal
32 free CSS accordions covering pure-CSS FAQ blocks with details/summary, mobile navigation menus, e-commerce filter sidebars, nested tree views, exclusive single-open groups and smoothly animated height:auto — plus 26 visual variations in vertical, horizontal and hybrid layouts. Copy-paste HTML and CSS, no JavaScript.
24 CSS Liquid Glass Navbars
iOS 26 floating tab bars, macOS Tahoe menu strips, and visionOS glass panels recreated in pure CSS — 24 liquid glass navigation bars. Covers scroll-to-frost sticky headers, SVG refraction toolbars, sliding capsule active tabs with no JavaScript, Dynamic Island morphing pills, reflective sidebars, cursor-warp interactive navs, and responsive sidebar-to-bottom-tab layouts, plus light/dark, high-contrast, Firefox-fallback, and performance-tuned variants. Semantic HTML, backdrop-filter, copy-paste ready.
17 CSS Side Menus
17 hand-coded CSS side menus for app shells, documentation sites, admin dashboards, and mobile navigation. Covers pure-CSS slide-in drawers, frosted-glass overlay and glassmorphism panels, off-canvas push layouts, hover-expand icon rails, sticky full-height columns, multi-level accordion trees, flexbox spacing, neumorphic inset surfaces, cyberpunk neon and brutalist border styles, checkbox-hack and hover-triggered toggles, collapsible width transitions, and a macOS-style glass dock.
22 CSS Dropdown Menu Designs
22 hand-coded CSS dropdown menu designs with live demos — slide-down fade, clip-path curtain reveal, 3D perspective flip, elastic bounce spring, glassmorphism float panel, stagger children reveal, mega-menu grid, underline nav fade, native details/summary, checkbox-hack mobile nav, nested multi-level flyout, icon sidebar flyout, split-screen mega-menu, segmented pill nav, color swatch picker, right-click context menu, keyboard-accessible roving tabindex, stagger blur entrance, command palette search, autocomplete suggestion, click-outside close, and multi-select chip. 15 pure CSS + 7 with a tiny vanilla JS snippet — no framework. WCAG 2.2 aria-expanded + aria-haspopup + focus management, prefers-reduced-motion honoured, MIT licensed.
20 CSS Responsive Navbars
Responsive CSS navbars covering frosted glassmorphism sticky bars, full-width mega menu dropdowns, off-canvas sidebar drawers, animated underline tabs, pill highlight links, scroll-aware shrink headers, breadcrumb reading-progress bars, split two-tone layouts, mobile bottom tab bars, centered-logo agency headers, full-screen overlay menus, morphing search fields, floating segment islands, step-wizard progress headers, and IntersectionObserver scroll-spy highlights.
15 CSS Navigation Menus
15 hand-coded CSS navigation menus for site headers, documentation bars, mobile apps, admin dashboards and SaaS marketing sites. Covers hover-underline horizontal navbars, checkbox-hack dropdowns, full-width mega menus, slide-out hamburger drawers, full-screen overlay navigation, shrink-on-scroll sticky headers, collapsible icon sidebars, sliding tab indicators, breadcrumb styles, glassmorphism bars, animated bottom-dock icons, multi-level accordion menus, magnetic hover links, neon glow bars and morphing pill indicators.
16 CSS Mobile Navigation Patterns
16 hand-coded CSS mobile navigation patterns for app bottom bars, e-commerce drawers, onboarding carousels and command palettes. Covers hamburger slide-out drawers, circular clip-path full-screen overlays, iOS bottom tab bars, morphing hamburger-to-X icons, radial FAB fan-outs, swipe-gesture sidebars, speed-dial stacks, sliding-pill tab indicators, accordion mega menus, glassmorphism and neumorphic bars, cyberpunk neon overlays, dot carousels, collapsible breadcrumbs, split-screen rails and Spotlight-style search.
32 CSS Tabs
32 hand-coded CSS tab designs for SaaS dashboards, checkout flows, docs sites, and settings panels — sliding pill (Linear/Vercel), iOS segmented (Apple HIG), VS Code file tabs, brutalist press, bento grid, CRT terminal, particle burst, drop-cap editorial, and 24 more. Every demo uses semantic HTML (real button + radio inputs), full keyboard nav, and prefers-reduced-motion guards for WCAG 2.1 SC 2.1.1 / 2.3.3 / 2.4.7 compliance. Copy-paste HTML + CSS (+ JS on the 9 measured-indicator demos), no dependencies.
UI Snippets
See category page →
13 Tailwind CSS Tables
13 hand-coded Tailwind CSS tables for SaaS pricing comparisons, admin dashboards, shopping cart checkout, crypto price trackers, class timetables, and FDA nutrition labels. Covers responsive stack-into-cards layouts, sticky headers and pinned first columns, billing toggles, quantity steppers with live totals, status filter and sort controls, :has() row states with progress bars, zebra-striped glassmorphism, neumorphic soft-UI, and frosted-glass sticky headers.
22 Tailwind CSS Countdown Timers
22 hand-coded Tailwind CSS countdown timers for auth session timeouts, OTP resend throttles, flash sales, product launches, auction lots and delivery ETAs. Covers accessible ARIA live-region timers, a zero-JavaScript pure-CSS clock, circular SVG progress rings, rate-limit retry-after cooldowns, free-trial and maintenance status banners, virtual waiting-room queues, habit-streak midnight widgets, interval workout timers and a split-flap retro flip clock.
20 Tailwind CSS Empty States
20 hand-coded Tailwind CSS empty states for e-commerce carts, wishlists, inbox-zero mail clients, dashboards before their first data, and 404/403/500 error pages. Covers no-search-results screens with removable filter chips, onboarding setup checklists, empty data tables and dropdown panels, offline and access-denied pages, skeleton-to-empty transitions, an ARIA live-region accessible variant, a utility-drawn illustrated state with no images, a dark-mode dark: variant, and inline micro empty states.
20 Tailwind CSS Kbd Keys
20 Tailwind CSS keyboard key styles for documentation, shortcut cheat sheets, settings panels and command hints. Covers semantic kbd tag styling, 3D press-down keycaps, shortcut combos with plus separators, flat inline chips for body text, em-based responsive sizing, Mac/Windows toggles, arrow and navigation clusters, OS auto-detection, Cmd+K search hints, tooltip shortcut labels, keybinding settings tables, live key-press visualizers, plus neumorphic, glassmorphism, retro typewriter, terminal and dark-mode variants.
20 Tailwind CSS Popovers
Popover API show and hide with auto vs manual behavior, CSS anchor positioning with position-area placement and position-try flip fallbacks, tooltip arrows, anchor-width dropdowns, nested submenus, and a custom select listbox. Covers entry and exit animations, backdrop and light dismiss, accessible hover-and-focus tooltips, a profile menu, a date picker, a checkbox filter dropdown, popover vs dialog, glassmorphism and dark-mode styles, plus a fallback and polyfill for older browsers.
25 Tailwind CSS Blockquotes
25 Tailwind CSS blockquotes for article pull quotes, testimonial cards, docs callout admonitions, keynote quote banners, and social-post embeds. Covers giant decorative quotation marks, minimalist left-border rules, gradient and neon borders, glassmorphism and aurora backgrounds, brutalist cards, speech bubbles, highlighted mark text, newspaper multi-column layouts, expandable read-more clamps, a scroll-snap testimonial slider, and one-click copy.
25 Tailwind CSS FAQ Accordion
25 Tailwind CSS FAQ accordions for SaaS pricing pages, e-commerce product FAQs, help centres, and documentation hubs — spanning pure <code>peer</code> and native <code><details></code> toggles, exclusive and multi-open panels, chevron and plus-to-minus icon morphs, glassmorphism and neumorphic styling, search filters, voice search, ARIA keyboard navigation, and FAQPage JSON-LD. Scoped under .tfa-NN for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
22 Tailwind CSS Image Gallery
22 CSS Tailwind image galleries for portfolio and photography sites, e-commerce product grids, editorial magazine spreads, and marketing lightboxes — spanning masonry and justified layouts, honeycomb and metro mosaics, scroll-snap filmstrips, :target lightboxes, 3D tilt and cube viewers, Ken Burns slideshows, and infinite marquees. Scoped under <code>.tgl-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
21 Tailwind CSS Tooltips
21 Tailwind CSS tooltips and hover cards for developer toolbars and form fields, data tables and status dashboards, avatar mentions and org charts, and reference cards for glossaries, recipes, EXIF, and the periodic table — spanning pill tooltips with CSS arrows, staggered profile reveals, rarity-tinted item cards, and side-anchored hint popovers. Scoped under <code>.ttp-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
22 Tailwind CSS Image Carousel
22 Tailwind CSS image carousels for e-commerce product galleries, full-screen hero slideshows, testimonial rails, logo marquees, streaming content rows, and before/after comparison sliders — spanning scroll-snap tracks, native scroll-button and scroll-marker controls, zero-JS state machines, 3D coverflow, and parallax transitions. Scoped under <code>.tcar-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
22 CSS Countdown Timers
22 hand-coded CSS countdown timer patterns — accessible time element with threshold ARIA, pure-CSS no-JS countdown, session timeout warning, circular depleting ring, OTP resend cooldown, rate-limit retry, auction anti-snipe, delivery ETA, launch waitlist, webinar timezone, appointment reminder, exam thresholds, trial expiry, maintenance window, ticket queue, streak reset, flash sale, sticky bar, cart expiration, coming soon, activity timer, and retro flip clock.
20 CSS Code Blocks
20 hand-coded CSS code blocks for developer documentation, tutorial platforms, and marketing sites — syntax highlighting (Prism-style token colors), multi-file tab switchers (VS Code style), diff blocks with added/removed line highlighting, code editor hero mockups, terminal command blocks with copy-only-command, Docusaurus / Mintlify documentation blocks with language badges, interactive runnable blocks with Run and Reset (Astro Docs style), highlighted line-range focus callouts, Mac-style terminal windows, glassmorphism terminals, neon cyberpunk, neumorphic embedded, split-pane with live preview, and expandable collapsible wrappers. Every block scoped under .cbk-NN, prefers-reduced-motion guarded, framework-agnostic — copy the CSS into React, Vue, Svelte, Astro, or plain HTML.
15 CSS Chat Bubbles
15 hand-coded CSS chat bubbles for messaging apps, AI assistant interfaces, customer support widgets, and testimonial sections. Covers the pure-CSS bubble with a pseudo-element arrow tail, iMessage and WhatsApp Web recreations, a ChatGPT-style AI response bubble, a Tailwind variant, animated typing indicators, avatar-paired bubbles, a live support widget, bordered and comic-book speech bubbles, image attachments, voice messages with a scrubable waveform, a full chat screen built on flexbox, thought bubbles, and a testimonial card built from a speech bubble. Every bubble is scoped under a .cb-NN prefix for no-collision pasting, uses real semantic markup rather than div soup, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
20 CSS Banners & Alerts
20 hand-coded CSS banner and alert bars for e-commerce storefronts, SaaS dashboards, marketing sites, and compliance-bound products. Covers GDPR cookie consent with a real preferences panel, promo bars with countdown timers, free-shipping threshold progress, app-install smart banners, maintenance and incident status bars, newsletter signup bars, age verification gates, limited-stock urgency banners, live event announcements, browser upgrade notices, geo and currency switchers, sticky top announcement bars, bottom cookie bars, inline form validation alerts, icon-aligned alert banners, left-border accent alerts, diagonal stripe promos, full-width hero banners, animated gradient border alerts, and a text-wrapping laboratory that shows five strategies for the unbreakable string that breaks more banners than anything else. Every bar is scoped under a .ba-NN prefix for no-collision pasting, guards prefers-reduced-motion, carries the correct aria-live and role semantics, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
20 CSS Ribbons
20 hand-coded CSS ribbons and ribbon banners for e-commerce product cards, SaaS pricing tables, blog article thumbnails, open-source project pages, award and certificate seals, and coupon campaigns. Covers corner sale ribbons with wrapped tails, sold-out overlays with muted disabled state, bestseller and featured badges, the GitHub fork-me corner ribbon rebuilt without an image, notched clip-path corner badges, full-width swallowtail V-cut banners, skewed 3D headers, most-popular pricing bands, annual-savings billing badges, bookmark flag tags, hanging ribbon bookmarks, award rosettes with dangling tails, certificate trust seals, 3D folded paper banners, coupon ribbons with dashed tear-off edges, stitched craft borders, hover-unfold animations, slide-in notification ribbons, waving flag keyframes, and a modern single-element clip-path polygon build with no pseudo-elements. 16 are pure CSS with zero JavaScript. Every ribbon is scoped under a .rib-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
26 CSS Dividers
26 hand-coded CSS divider designs for SaaS landing hero-to-section transitions, editorial article breaks, documentation callouts, e-commerce category pages, and dashboard data separators: SVG wave section divider, diagonal / slanted section split with clip-path polygon, gradient horizontal rule for articles and documentation, text-with-lines-on-sides OR divider for login and pricing modals, curved arch section divider with concave and convex variants, zigzag torn paper cut divider with clip-path, blob organic morphing SVG divider, pure CSS ornamental fleuron divider with ::before / ::after pseudo-elements, editorial article serif divider, neo-brutalist heavy border with hard box-shadow, art deco geometric gold divider, organic leaf and vine SVG for wellness sites, cyberpunk neon glow with multi-layered box-shadow, luxury minimalist gold accent HR line, data dashboard dotted grid separator, wedding heart icon center divider, editorial thin double-line, medieval fantasy star crest ornamental, subtle faded border-bottom, 8-bit retro pixelated line, multi-column newspaper rule for print-style journalism, bouncing animated dots, audio waveform SVG for podcast platforms, confetti and sparkle SVG for holiday and promo pages, vertical flexbox divider between navigation links and inline flex items, and hand-drawn doodle SVG line for personal blogs. 22 Pure CSS + 4 Light JS. Every design scoped under .div-NN prefix for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, WCAG 2.2 AA accessible, framework-agnostic (React, Vue, Svelte, Astro, Next.js, Nuxt, Remix, SvelteKit).
25 CSS Blockquotes
25 CSS blockquotes for article pull quotes, testimonial cards, docs callout admonitions, statement banners, and social-post embeds. Covers giant decorative quotation marks, minimalist hairline and classic left borders, animated gradient and glowing neon borders, glassmorphism and aurora backgrounds, brutalist cards, speech bubbles, thick accent rails, highlighted mark text, newspaper multi-column layouts, an expandable read-more disclosure, a scroll-snap testimonial slider, and one-click copy.
25 CSS FAQ Accordions
Native details/summary FAQ blocks and the pure checkbox-hack accordion for docs callouts, help centers, and product-page shipping and returns sections, plus mutually-exclusive single-open and expand-all multi-open modes. Covers glassmorphism, neumorphic and card-style panels, chevron and plus-to-minus icon morphs, grid-template-rows height transitions, live search and voice filtering, two-column and horizontal layouts, sticky-sidebar categories, ARIA keyboard navigation, and FAQPage JSON-LD.
30 CSS Notifications
30 hand-coded CSS notification demos — each topic ships 2–3 side-by-side variants so you can pick the exact treatment for your surface. Covers toast slide-in animations, auto-dismiss timers, progress-bar countdowns, stacked toast flexbox lists, dark-mode toasts, glassmorphism cards, success/error/warning/info alert semantics, Tailwind toast recipes, notification badges on icons, pulsing dots, avatar badges, shopping cart count badges, clip-path badge cutouts, pinging pulse rings, sticky top banners, dismissible banners with close buttons, floating bottom alert bars, alert-box states, subtle system-status banners, animated bell hover, toggle-switch controls, expandable notification panels, bounce arrival animations, sweet-alert style icon animations, aria-live accessibility patterns, action-button notification cards, responsive mobile bars, browser push-style popups, timeline alert feeds, and floating feedback buttons with badges. Modern @starting-style, transition-behavior:allow-discrete, :has(), popover, @property, linear() spring easing, scroll-driven animations throughout, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, framework-agnostic, MIT licensed.
24 CSS Tags & Chips
24 hand-coded CSS tag and chip designs for marketplace filter chips, tag-input fields, presence status dots, and category pill badges: multi-select filter chips with :has() live-count, interactive tag-input field with Enter/comma commit + Backspace pop + duplicate-shake + aria-live announcements, badge with online status indicator dot (online/away/busy/offline/typing), category pill badge with icon and single-hue oklch() theming, dismissible pill with close button, hover-scale interaction, animated border outline, liquid-fill hover, stacked cluster, notched-corner cyberpunk, glassmorphism, aurora gradient border, retro pixel-art, neo-brutalist stamp, animated gradient border, live pulsing status badge, draggable reorder list with pointer events, pure-CSS checkbox-driven tag selector, dismissible with undo toast, notification-count label, scrolling text marquee, expandable content on click, connected radio-button segment, and workflow state process badge. 22 truly Pure CSS + 2 with a tiny optional vanilla JS snippet. Every chip is scoped under a unique .ctc-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
6 CSS Custom Cursor Styles
6 hand-coded CSS custom cursors: pure-CSS SVG brand pointer with cursor: url() and keyword fallback, smooth glowing follower on requestAnimationFrame lerp, magnetic blend cursor with :has() + mix-blend-mode, custom grab/grabbing cursors for drag carousels, dynamic 'View' badge that follows the mouse, and a magnifier zoom lens. Touch-guarded, prefers-reduced-motion respected, WCAG-safe, MIT licensed.
5 CSS Variable Dark Mode Systems
5 hand-coded CSS dark-mode implementations built on the 5-variable custom-property pattern (--bg, --surface, --text, --border, --accent). Pure CSS OS sync with prefers-color-scheme, data-theme toggle + localStorage, anti-FOUC blocking head script, 3-way System/Light/Dark switcher, and the native light-dark() function. Zero-flicker, WCAG-AA accessible, framework-agnostic, MIT licensed.
22 CSS Image Carousels
22 hand-coded CSS image carousels for e-commerce product galleries, Netflix-style content rows, testimonial rotators, portfolio overlays, before-after comparison sliders, coverflow 3D, vertical stacks, infinite logo scrollers and full-screen hero slideshows. Copy-paste HTML and CSS, no Swiper.js, no Slick, no Splide — WCAG 2.2 accessible, mobile-first, touch and keyboard friendly.
22 CSS Image Galleries
22 hand-coded CSS image galleries for portfolios and photography sites, e-commerce product grids, editorial magazine spreads, and lightbox viewers — covering masonry and justified layouts, hexagon honeycomb and Metro tile mosaics, filmstrip and infinite-scroll carousels, :target lightbox overlays, glassmorphism hover cards, 3D tilt-parallax and cube viewers, Ken Burns slideshows, and scattered Polaroid collages. Semantic HTML, modern CSS, copy-paste ready.
13 CSS Tables
13 hand-coded CSS tables for SaaS pricing comparisons, admin dashboards, e-commerce checkout carts, crypto price trackers, fitness class timetables, and FDA nutrition labels. Covers responsive collapse-into-cards layouts, sticky header rows and pinned first columns, glassmorphism and frosted Liquid Glass headers, zebra striping, neumorphic soft-UI, :has() row-focus checklists with quantity steppers, and borderless editorial typography.
10 CSS Dark Mode Toggles
10 production-grade CSS dark mode toggle designs with live demos and copy-paste code — pure CSS checkbox hack (zero JS via :has()), animated sun-to-moon micro-interaction, modern CSS light-dark() function boilerplate, 3-way system-sync toggle (light/dark/auto), localStorage anti-flash template (FOUC fix), Tailwind data-theme dashboard toggle, neumorphic skeuomorphic tactile switch, full-page expanding circular clip-path transition, accessible ARIA toggle with focus + ARIA states, and sidebar-bottom fixed toggle. Every toggle scoped under .dm-NN, copy-paste ready.
21 CSS Tooltips
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 CSS Badges
30 hand-coded CSS badges for status indicators, notifications, membership tiers, live-data displays, and SEO / DevOps / financial dashboards — upload progress, typing indicator, transit line status, Core Web Vitals, ECG heartbeat, CI/CD build pipeline, countdown ring, live price ticker, keycap shortcut, wax seal, conference lanyard, and holographic collectibles. Copy-paste HTML and CSS, WCAG 2.2 accessible, MIT licensed.
20 CSS Empty States
20 hand-coded CSS empty states for search-with-no-results screens, first-run onboarding, empty carts, inbox-zero clients, dashboards awaiting data, and 404/403/500 error pages. Covers empty data tables with a colspan cell, filtered lists, failed-to-load panels, offline unsynced queues, archived trash, a skeleton-to-empty transition, an ARIA live-region variant, and inline micro states.
20 CSS Popovers
20 hand-coded CSS popovers built on the native Popover API and CSS Anchor Positioning, with no positioning library and no z-index wrangling. Covers declarative show and hide with popovertarget, auto versus manual dismissal, tethering a panel to its trigger with position-anchor, position-area grid placement, position-try flip fallbacks near the viewport edge, entry and exit animation with starting-style and allow-discrete, anchor-size width matching for dropdowns, nested submenus, and real surfaces including a keyboard-navigable listbox, a hover tooltip, a profile flyout, a date panel and a manual-mode filter menu that stays open while you tick options.
20 CSS Kbd Keys
20 hand-coded CSS keyboard keys for documentation, shortcut cheatsheets, settings panels, command hints and onboarding screens. Covers the inline kbd element in running prose, 3D caps that genuinely depress on click, multi-key combos with the separator placed outside the keys so screen readers announce the combination, Mac glyphs against Windows words, arrow and navigation clusters, unit-based widths for Space and Enter, icon-only caps with accessible names, a shortcut cheatsheet grid, a settings mapping table with a conflict state, live key-press echo, and a theme-aware token system whose light and dark switch runs on pure CSS.
20 CSS Social Buttons
20 hand-coded CSS social buttons for blogs, SaaS marketing pages, e-commerce product pages, creator bio pages and support widgets. Covers inline SVG brand marks with no icon font, brand-colour fill on hover, accessible icon-only circles with visually-hidden labels, CSS tooltips that open on hover and focus, the Web Share API with a working fallback menu, prefilled intent URLs, live share counts with tabular figures, copy-link feedback, standalone sign-in button sets, follow toggles, Linktree-style bio link stacks, e-commerce share rows with wishlist, direct-message contact cards, and a theme-aware token system whose light and dark switch runs on pure CSS.
20 CSS Copy Buttons
20 hand-coded CSS copy-to-clipboard buttons for documentation sites, SaaS dashboards, checkout pages, and share flows. Covers the checkmark success state, icon-morph animation, tooltip confirmation, the Clipboard API with a working execCommand fallback for insecure contexts, buttons positioned over code blocks and inside input fields, masked API keys, coupon codes, contact cards, truncated wallet addresses that copy the full value, toast feedback, loading and error states, countdown resets, an ARIA live region for screen readers, and the one-handler pattern for many buttons on a single page.
Design Styles
See category page →
23 Tailwind CSS Dark Mode UI
23 hand-coded Tailwind CSS dark mode UI components for dashboards, settings panels, modals, login forms, code editors and reading layouts. Covers prefers-color-scheme defaults, data-theme and light-dark() overrides, color-mix() design tokens, three-state System/Light/Dark switchers, OLED true-black and warm mocha themes, elevation layers, sidebar navigation, sortable file tables, vertical timelines, glowing buttons, aurora gradient heroes and alert cards.
20 Tailwind CSS Claymorphism
20 Tailwind CSS claymorphism components for dashboards, pricing tables, mobile tab bars, app-icon grids, and product cards. Covers the 3-layer clay box-shadow recipe, squircle corner radii, glassmorphism hybrids, 3D press-and-squish buttons, inset well inputs and search bars, toggle switches and segmented controls, clay badges, popover-API modals, semantic toasts, dark-mode shadow recalibration with light-dark(), and GPU-transform performance tuning.
20 Tailwind CSS Minimalist UI
A collection of Tailwind CSS minimalist UI patterns for SaaS dashboards, ecommerce product cards, portfolios, article layouts, landing sections, and mobile app screens. Covers modular type scales from a ratio variable, single-ink hierarchy, system font stacks, optical alignment, spacing from one base unit, vertical rhythm, one-accent restraint, grayscale contrast ramps, removable borders, and tone-only elevation without shadows.
20 Tailwind CSS Grain Texture
Restaurant menu cards, SaaS hero backgrounds, and photographic overlays lean on grain to kill gradient banding and add tactile depth. Covers SVG feTurbulence noise, baseFrequency and numOctaves control, data-URI textures with no image request, mix-blend-mode composites, feColorMatrix tinting, anti-banding gradient heroes, vignette overlays, halftone and Bayer dither shading, letterpress and risograph print effects, woven fabric surfaces, and a reduced-motion static fallback.
14 Material Design Components in Tailwind CSS
14 Material Design components in Tailwind CSS covering Material 3 buttons and FABs, elevated and outlined cards, bottom navigation bars, rails and drawers, floating-label text fields, dialogs and bottom sheets, sortable data tables, tabs with a sliding indicator, filter chips, steppers, tooltips, expansion panels on the details element, list rows, a theme switcher, and a responsive app shell with a scroll-elevated top bar.
20 Tailwind Liquid Glass Effects
Browse 20 Tailwind liquid glass effects with live demos and copy-paste code. Frosted cards, gooey toggles, SVG displacement backgrounds, glossy buttons.
20 Tailwind Retro UI
Browse 20 Tailwind retro UI components with live demos and copy-paste code. CRT scanlines, Windows 95 chrome, pixel art buttons, vaporwave grids.
20 CSS Retro UI
20 hand-coded retro and vintage UI designs reproducing real computing eras — CRT scanlines and curvature, pixel-art scaling, dithering, one-bit bevels, Windows 95, Classic Mac System 7, MS-DOS text mode, Teletext, phosphor monitors, 8-bit HUDs, vaporwave, Y2K aqua, and a draggable desktop portfolio. Every effect built from first principles, no retro CSS library.
20 CSS Minimalist UI
20 hand-coded CSS minimalist UI patterns covering the decisions behind a restrained interface — modular type scales, spacing from a single base unit, hierarchy without colour, optical alignment, a one-accent restraint budget, grayscale contrast ramps, elevation without shadows, and where minimal interfaces fail accessibility. No webfonts, system font stacks only.
20 CSS 3D Effects
20 hand-coded CSS 3D patterns covering the transform pipeline reference build, the perspective property versus the perspective function, perspective-origin as the camera position, why transform function order changes the result, backface-visibility on two sided elements, what silently flattens preserve-3d, building a cube from six faces, transform-origin in three dimensions, translateZ versus scale for depth, z-fighting on coplanar surfaces, rotate3d and the transform matrix, plus ring layouts, stacked z-planes, pointer tilt with parallax, a hinged page-turn flipbook, a drag-rotate cube navigator, an extruded synth panel, perspective floor geometry, nested 3D contexts, and helix distribution. 14 demos are pure CSS; 6 use vanilla JavaScript.
20 CSS Neon Effects
20 hand-coded CSS neon patterns covering the layered glow anatomy of core halo and bloom, filter drop-shadow for irregular and clipped shapes, perceived luminance by hue and why some colours glow while others read muddy, inner glow and faked light emission with inset shadows, animating glow intensity with @property, glow on SVG paths and stroke elements with feGaussianBlur merges, the real paint cost of large blur radii and what to animate instead, accessible neon that keeps text legible on dark grounds, plus button construction, display type glow, pricing tiers, depth falloff scenes, focus glow inputs, active navigation states, flicker timing, a cyberpunk token set, a Tailwind utility recipe, icon glows, a perspective grid, and multi-hue gradient glow. 17 demos are pure CSS; 3 use vanilla JavaScript.
22 CSS Neumorphism
22 hand-coded CSS neumorphism and soft UI patterns covering the dual box-shadow reference build, neumorphism versus glassmorphism compared side by side, raised inset and flat state systems, accessible neumorphism that passes WCAG contrast, deriving both shadow colours from one surface token with color-mix, concave and convex surfaces with gradients, soft UI buttons, toggles and checkboxes, inset input fields, range sliders with inset tracks, circular progress rings, navigation rails, tabs and segmented controls, modals with layered elevation, dashboard widgets, dark mode shadow recalibration, border radius and light angle consistency, the paint cost of large blur radii, a hard shadow neubrutalist hybrid, and an honest guide to when not to use the style. 18 demos are pure CSS; 4 use vanilla JavaScript.
22 CSS Dark Mode UI
22 hand-coded CSS dark-mode UI patterns — prefers-color-scheme root strategy, data-theme attribute override, color-mix token system, light-dark() function, sidebar navigation, dashboard card grid, modal dialog, focus-ring contrast audit, three-state switcher, code editor surface, OLED true black, layered slate, aurora dim and more.
22 CSS Glassmorphism
22 hand-coded CSS glassmorphism designs — backdrop-filter blur, saturate vibrancy, visionOS depth, SVG refraction, adaptive theming, browser fallback, and 12 production surfaces (card, modal, navbar, tab bar, sidebar, input, toggle, search, refraction, tinted, stacked).
22 CSS Brutalism
22 hand-coded brutalist and neubrutalist CSS designs covering the full spectrum of the aesthetic — from the anti-design brutalism of 2014-2018 (raw system fonts, zero border radius, monochrome density, visible structure) through to the neubrutalism of 2021-present (bright pastel fills, thick black borders, hard offset shadows with zero blur, rounded blocks). The neubrutalist half ships SaaS pricing cards with sticker badges, a pastel admin dashboard, signup forms, rotated feature cards, an offset-shadow navbar, a playful button set, a native dialog modal, a testimonial wall, blog cards, chunky toggles, a landing hero, an image gallery, stats panels and a rounded footer. The brutalist half covers product grids, raw form controls, a monochrome data dashboard, a portfolio index, indie SaaS pricing, Windows 95 desktop chrome, editorial long-read and a streetwear catalog. Every design is scoped under a .brt-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
18 CSS Gradient UI
18 hand-coded CSS gradient UI demos covering the full design-system surface where tier-1 SaaS, Web3, AI, and premium fintech products reach for gradients in 2026: 6-variant gradient button hover lab (shift/sweep/ring/glow/ghost/hue), gradient feature cards with hover lift + shared --tint token, three gradient border techniques compared side-by-side (double-background layering / mask-composite ring / conic-gradient orbit with @property --angle), gradient badges + release-dashboard status pills (PRO/BETA/NEW), gradient search bar + command palette + form inputs with animated underlines, gradient progress bars + barber-pole stripes + conic-gradient loading rings, animated mesh / aurora background with 4 radial blobs + grain overlay, glassmorphism sign-in card over gradient with backdrop-filter, full-page animated linear gradient pan, hero banner with gradient overlay + Patagonia photo, neon / dark-mode glow cards with flickering OPEN sign, gradient text clipping type specimen (aurora/flow/conic numeral), gradient text hover-reveal editorial menu, gradient link underline animation with 4 styles, metallic / gold / chrome / rose-gold gradient text with panning shine (awards invitation aesthetic), radial spotlight cursor-tracking AI console cards (delegated pointermove + rAF throttling), conic-gradient avatar border rings (Instagram story / live / segment / seen / group presence states), and gradient scroll mask fade for horizontal chip rails + vertical changelog. 16 truly Pure CSS + 2 with a tiny optional vanilla JS snippet (progress ticker + cursor coord writer). Every gradient UI is scoped under a unique .cgu-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
20 CSS Liquid Glass Effects
Liquid glass and glassmorphism UI patterns built with backdrop-filter blur, translucent surfaces, and SVG displacement refraction. Covers glass cards, glossy buttons, frosted navbars, gooey toggle switches, blurred modals and dropdowns, pricing tables, login and multi-step form cards, sliders, tooltips, toasts, sidebars, accordions, audio players, and loading skeletons. Semantic HTML, modern CSS, copy-paste ready.
16 CSS Frosted Glass Effects
16 production CSS frosted glass effect designs with live demos and copy-paste code — a full-viewport login modal, dashboard overlay panel, sticky glassmorphism navbar with blur-on-scroll via IntersectionObserver, sidebar navigation menu, media-player footer overlay, animated login/signup form, split-panel contact form UI, profile info card, credit card payment UI, product display card, crypto finance dashboard, Apple-style weather widget, glass music player UI, translucent calendar widget, frosted glass modal popup, and a VisionOS-style floating app dock. Every demo uses backdrop-filter blur + saturation 180% on a colorful animated backdrop for real glassmorphism, with a @supports fallback so browsers without support stay readable. Scoped under .fg-NN, copy-paste ready.
20 CSS Gradient Text Designs
20 hand-coded CSS gradient text effects with live demos — animated flow with @property typed angle, aurora borealis sweep, conic hue spin, per-letter rainbow wave, lava lamp radial, neon pulse glow, outline stroke with transparent fill, metallic chrome/gold/copper, holographic iridescent foil, duotone two-colour fill, texture fills (sunset, starfield, ocean), liquid mercury, hover reveal, checkbox toggle picker, scroll reveal, click ripple, cursor-tracked radial, typewriter loop, glitter sparkle, and crystalline prism. 16 pure CSS + 4 with a tiny vanilla JS snippet — no framework. Modern background-clip text technique with -webkit-prefix fallback, prefers-reduced-motion honoured, MIT licensed.
14 Material Design CSS Components
14 hand-coded Material Design CSS components covering every production Material Design 3 (Material You) pattern — Material elevated/filled/outlined buttons with ripple, elevated content cards, sidebar + top app bar navigation, floating-label form inputs, dialog modal with backdrop, sortable data table, ripple-driven tabs, removable chips with leading icons, vertical stepper, four tooltip variants, accordion expansion panels, two-line list with leading avatars, the full 500-shade Material color palette swatcher, and a complete responsive app shell with collapsible drawer. All <strong>100% pure CSS</strong> — zero JavaScript, zero libraries (no Material UI, no MUI, no Material Components Web, no MDL). Interactive behaviour driven by checkbox / radio state machines + <code>:checked</code> / <code>:has()</code> selectors. Every demo respects <code>prefers-reduced-motion</code>, uses scoped <code>.md-NN__*</code> class names so multiple components coexist on the same page, and ships MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails, plain HTML — zero framework dependencies.
20 CSS Grain and Noise Textures
20 hand-coded CSS grain and noise textures built on the SVG feTurbulence primitive, inlined as a data URI so there is no image request and no tiling PNG. Opens with the parameter sheet — type, baseFrequency, numOctaves, seed and stitchTiles each isolated on its own plate — then grain size control, data URI encoding, opacity and blend mode scales, colour tinting with feColorMatrix, and a measured look at paint cost and byte size. Applies the technique to real surfaces: dithering a gradient to kill colour banding, film grain over a vignetted photograph, tactile card and button surfaces, full-bleed hero backgrounds, noise layered against backdrop-filter, and textured section dividers. Closes with named print looks — halftone dot, ordered Bayer dither, letterpress paper stock, risograph misregistration and woven fabric — plus dark mode recalibration and a reduced-motion fallback. 19 demos are pure CSS; 1 uses vanilla JavaScript.
20 CSS Claymorphism
20 hand-coded CSS claymorphism designs covering the three-layer shadow recipe that defines the style, inner highlight and inner shadow layering, the border radius scale that makes shapes read as puffy rather than merely rounded, claymorphism compared side by side with neumorphism, a clay and glassmorphism hybrid, single light-source discipline across a layout, depth tiers for visual hierarchy, a Tailwind implementation with both arbitrary values and theme tokens, squishy button press states, toggles and checkboxes, inset input wells and search bars, badge and pill systems, cards, popover-based modals, pricing tables, mobile tab bars, app icon grids, toast and alert bubbles, dark mode shadow recalibration, and the paint cost of animating shadows. 19 demos are pure CSS; 1 uses vanilla JavaScript.