Search

9 hand-coded CSS 3D scenes built with real transforms, perspective, and preserve-3d — iridescent flip cards, a midnight coverflow carousel, kinetic tilt pricing cards, a page-turn flipbook, a Bauhaus drag-cube navigator, a modular synth control panel, a luxury hover-flip product showcase, a 5×5 spinning cube matrix, and a 60-orb DNA double helix. No WebGL, no libraries.

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

15 hand-coded CSS background animations with live demos — infinite shifting gradient, floating particle bubbles, parallax starry night, clickable cyberpunk ripple, sliding geometric grid, SVG wave overlays, glassmorphism orbs, aurora borealis ribbons, matrix digital rain, mesh gradient blobs, falling snow, morphing blob, retro synthwave 3D grid, infinite scrolling diagonal marquee, comic-book halftone dots. 100% Pure CSS, no JavaScript, no canvas, no particles.js. prefers-reduced-motion respected, scoped class names, MIT-licensed.

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

Hand-coded CSS banner and alert patterns covering every notification surface a real product needs — dismissible alerts, sticky announcements, semantic status alerts, cookie consent, form validation, toasts, live-update banners, and promotional hero banners. Pure CSS plus scoped JS — no framework, semantic HTML, accessibility-first, copy-paste ready.

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

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

8 hand-coded CSS brutalist designs spanning raw e-commerce product cards, a bureaucratic inspection form, a dark constructivist ops dashboard, a collision-typography portfolio grid, an indie SaaS hero + pricing split, a draggable Windows 95 desktop, a three-column long-read editorial, and a stark streetwear catalog. Heavy borders, oversized type, no rounded corners.

22 dynamic CSS button groups with motion-driven interactions — plasma loops, holographic gradients, magnetic discs, wormhole tabs, particle aurora. Pure CSS or light JS, copy-paste ready.

27 hand-coded CSS button hover effects — 3D press, neon glow, gradient slide, border draw, liquid fill, ripple, glitch text, and kinetic flips. Every demo is pure CSS (no JavaScript, no framework), tuned for 60fps with transform and opacity, and respects prefers-reduced-motion out of the box.

43 hand-coded CSS buttons — real-world materials like brushed brass and vinyl, interactive use-case buttons (add-to-cart, download, like, delete), and click-effect studies: magnetic mercury ripple, brutalist glitch, neon plasma burst, clay press, ink spread, and particle shards.

27 hand-coded CSS calendar designs covering every search intent for 'css calendar' — pure-CSS calendar (no JavaScript), CSS Grid layouts, glassmorphism widgets, brutalist designs, dark mode UIs, neumorphic cards, horizontal timelines, sidebar widgets, booking date-range pickers, CSS Grid advent calendars, Fluent / Material Design, circular / radial layouts, retro neon cyberpunk, 3D flip cards, isometric dashboards, split-screen heroes, liquid micro-interactions, bento grid booking, vintage paper tear-offs, vertical timelines, kinetic typography, and slanted diagonal grids. 1 truly pure-CSS, 26 with small vanilla JS snippets for event handling. Scoped class names that never collide, prefers-reduced-motion respected, MIT-licensed.

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

The complete guide to centering a div in CSS in 2026 — covering all 5 production techniques with live interactive demos. <strong>Flexbox</strong> (the modern default, works for 95% of cases): <code>display: flex; align-items: center; justify-content: center</code> on the parent. <strong>CSS Grid</strong> (one-line shorthand): <code>display: grid; place-items: center</code>. <strong>Absolute positioning + transform</strong> (for overlays and modals): <code>position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)</code>. <strong>Margin auto</strong> (for block elements with a known width): <code>margin: 0 auto</code> (horizontal only) or <code>margin: auto</code> with <code>position: absolute</code> + <code>inset: 0</code> (both axes). <strong>All methods side-by-side comparison</strong> — see every technique render the same content with visible axis crosshairs so you can see exactly where each method lands the element. All 5 demos are 100% pure CSS, MIT-licensed, copy-paste ready, with detailed explanations of which method to use when. Works in every modern browser (Chrome, Safari, Firefox, Edge), no JavaScript required.

23 hand-crafted CSS checkboxes — toggles, glow, draw stroke, bouncy pop, glassmorphism, neumorphic, liquid fill, ripple, confetti and more. Mostly pure CSS, copy-paste ready.

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

18 hand-coded CSS close buttons — rotate, magnetic cross, liquid pop, glitch, ink ripple, hold-to-confirm, origami crease and more. Pure CSS, drop-in ready.

Twelve hand-coded CSS code block patterns covering every developer surface: minimalist dark and light modes, a Mac terminal CSS code block with traffic-light chrome, a CSS code block with copy button, a CSS code block with line numbers driven by counter-increment, a mobile-responsive overflow / word-wrap pair, neon glow, a glassmorphism code block, inline <code> pill styling, neumorphic embedded, split-pane code plus live preview, and a pure-CSS expandable wrapper. Accessible, mobile-first, scoped per-demo classes, MIT-licensed.

Six hand-coded CSS countdown timer patterns for the conversion surfaces real products need — ecommerce flash sales, site-wide sticky announcement bars, shopping cart expiration alerts, coming-soon launches, circular SVG progress rings, and retro flip-clock timers. Accessible aria-live markup, prefers-reduced-motion fallbacks, scoped per-demo classes, MIT-licensed.

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

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

10 hand-coded CSS feature section templates covering the patterns landing pages actually need in 2026 — icon grid with stats strip, Apple-style bento grid layout, dark glassmorphism with animated blobs, scroll-reveal alternating rows, developer SDK with syntax-highlighted code preview, side-by-side comparison table with pricing cards, full SaaS hero with mesh-gradient + social proof, 3D mousemove tilt cards, parchment-cream floating phone mockup, and Linear-style product roadmap timeline. 7 of 10 demos are 100% pure CSS — drop into any stack. The 3 JS-enhanced demos (scroll-reveal, 3D tilt, timeline-glow) degrade gracefully if JavaScript is disabled. Every demo respects prefers-reduced-motion, uses scoped .fsNN__* class names so multiple can coexist, and ships MIT-licensed.

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.

32 hand-coded CSS floating action button templates covering every FAB pattern production apps actually ship in 2026 — Material Design gradient FAB with ripple, speed dial fan-out menu, morph-expand FAB, scroll-to-top with progress ring, floating chat widget, fan arc menu, squircle FAB, social share FAB, glassmorphism FAB, neon glow, compose+tooltip, draggable FAB, notification bell with badge, floating cart with item counter, magnetic hover FAB, theme toggle, classic plus, pulse ring, morphing FAB, labeled pill, neon cyber, brutalist stamp, loading spinner, drag handle, voice action, premium aurora, quick reply, square modern, and more. All use semantic <button> elements with proper aria-labels, 44×44px minimum tap targets, prefers-reduced-motion support, scoped class names so all 32 coexist on the gallery page, and ship MIT-licensed. 19 are 100% pure CSS — drop into any stack. The 13 JS-enhanced demos use vanilla JavaScript with no library dependencies.

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

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

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

20 hand-coded CSS hamburger menus with live demos — pure-CSS checkbox-hack toggle (no JavaScript), morphing icon animations, full-screen overlay, slide-out sidebar with push-canvas, responsive navbar, floating FAB radial menu, Tailwind CDN build, Bootstrap 5 navbar, WCAG-accessible aria pattern, grid-template-rows accordion, blur overlay, mobile bottom nav, multi-level nested dropdown, flexbox right-aligned, circular ripple expand, sticky shrinking header, neumorphic toggle, brutalist border, and a 3D rotating canvas push. 16 with a small vanilla JS snippet, 4 truly pure CSS. prefers-reduced-motion respected, scoped class names, WCAG 2.2 aria-expanded + aria-controls patterns demonstrated, MIT-licensed.

11 hand-coded CSS header designs covering the patterns search demand actually targets — pure-CSS sticky header that solidifies on scroll using scroll-timeline (no JavaScript, no scroll listener, zero impact on Core Web Vitals), CSS Grid mega menu with :focus-within keyboard accessibility, performance-first flexbox 3-column navbar, full-screen overlay hamburger header via checkbox hack, glassmorphism transparent bar with backdrop-filter, sticky announcement bar with grid-template-rows dismiss animation, two-tier double-decker enterprise header, animated link hover effects (scaleX underline, clip-up fill, gradient sweep, dual-layer swap, bracket reveal), vertical sidebar navigation with persistent rail, three-level multi-level dropdown menu via :focus-within, and a shrinking header on scroll using animation-timeline. 10 truly pure-CSS, 1 with a tiny optional vanilla JS snippet. WCAG-aware, prefers-reduced-motion respected, scoped class names that never collide with your existing styles, MIT-licensed.

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

30 hand-coded CSS hover effects covering every production interactive pattern in 2026 — 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.

28 hand-coded CSS input field designs — floating label, OTP, password strength, voice search, autocomplete, range slider, credit card and more. Semantic HTML, copy-paste ready.

30 hand-coded CSS @keyframes animations covering every production motion pattern in 2026 — 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.

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

20 hand-coded CSS loaders covering every production loading-indicator pattern developers reach for in 2026 — 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.

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

24 modern CSS login form designs — glassmorphism, neon, dark mode, OTP, biometric passkey, magic link, multi-step, password strength meter and more. Copy-paste HTML & CSS, accessible, mobile-first.

14 hand-coded Material Design CSS components covering every production Material Design 3 (Material You) pattern in 2026 — 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.

6 hand-coded CSS mega-menu and dropdown layouts — luxury editorial fashion, cyberpunk terminal panel, biophilic architecture studio, Swiss-grid department store, precision outdoor gear finder, and flash-sale command center. Hover + click/tap. Copy-paste ready, accessible, mobile-friendly.

6 hand-coded CSS minimalist UI screen mocks covering the surfaces minimalist design has to win — a dark SaaS dashboard, a Florentine luxury e-commerce storefront, a brutalist-white creative portfolio, a broadsheet editorial layout, a fintech mobile app inside a realistic phone frame, and a high-impact single-product SaaS landing page. Built on strategic whitespace, crisp typography hierarchy, and disciplined colour systems. Pure CSS plus scoped JS — no UI framework, no images.

16 hand-coded CSS mobile navigation patterns covering every production mobile-nav use case in 2026 — hamburger slide-out drawer, full-screen overlay menu, iOS-style bottom tab bar (Apple Human Interface Guidelines), morphing hamburger-to-X animation, radial fan menu, swipe-gesture sidebar (Facebook Messenger pattern), FAB speed dial navigation, tab bar with sliding indicator pill, mega-menu accordion, glassmorphism nav drawer, cyberpunk neon menu, minimal dot navigation, breadcrumb collapse for deep hierarchies, split-screen navigation, command-palette search (Cmd+K pattern), and neumorphic bottom navigation. 13 demos are 100% pure CSS using <code>:checked</code> state machines — drop into any stack with zero JS dependencies; 3 use ~40-60 lines of vanilla JavaScript for swipe gestures, dot-scrolling, and command-palette filtering. All ship 44×44px tap targets (WCAG 2.5.5), <code>aria-current="page"</code> on active links, <code>aria-expanded</code> on toggles, respect <code>prefers-reduced-motion</code>, scoped <code>.mn-NN__*</code> class names so multiple navs coexist without style bleed, MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails, plain HTML.

8 hand-coded CSS navbar patterns covering the surfaces every site needs to handle — a responsive hamburger drawer, a mega menu with hover panels, a floating glassmorphism nav, a collapsible vertical sidebar, a sticky scroll-transforming bar, a full-screen overlay menu, a navbar with a dark-mode toggle, and a minimalist navbar with underline hover animations. Pure CSS plus scoped JS — no UI framework, semantic HTML, accessibility-first.

15 hand-coded CSS navigation menu designs covering every production navigation pattern developers ship in 2026 — horizontal navigation bar with hover underline, dropdown navigation menu, full mega menu with category columns and feature panel, hamburger menu with slide-out drawer, full-screen overlay navigation, sticky navigation bar with scroll shrink (scroll-driven CSS animation), sidebar navigation menu, tab navigation with animated sliding indicator, breadcrumb navigation, glassmorphism navigation (frosted-glass backdrop-filter pattern), animated navigation icons with labels, multi-level accordion navigation, navigation with magnetic hover effect, neon glow navigation menu, and morphing navigation pill indicator. 13 demos are 100% pure CSS using <code>:hover</code> + <code>:focus-within</code> + <code>:checked</code> state machines — drop into any stack with zero JS dependencies. 2 use ~20-50 lines of vanilla JavaScript for sticky-scroll behaviour and pointer-tracking magnetic hover effects. All ship semantic <code>&lt;nav&gt;</code> + <code>&lt;ul&gt;</code> markup with <code>aria-current="page"</code> on the active link, <code>aria-expanded</code> on toggles, <code>aria-haspopup</code> on dropdown triggers, respect <code>prefers-reduced-motion</code>, use scoped <code>.nav-NN__*</code> class names so multiple navs coexist on the same page without style bleed, ship with 44×44px tap targets (WCAG 2.5.5), MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails ERB, plain HTML, WordPress, Shopify, or any other stack.

12 hand-coded CSS neon designs covering the full vocabulary of the aesthetic — glowing buttons, retro signage, rotating-border pricing cards, an 80s synthwave scene, futuristic controls, three nav patterns, broken/flickering signs, a cyberpunk palette token showcase, a Tailwind theme.extend neon config, drop-shadow SVG icon glows, an infinite seamless 3D perspective grid, and five rainbow text cycling techniques. Pure CSS plus scoped JS — no images, no SVG filters, every glow is layered shadow.

13 hand-coded CSS neumorphism (soft-UI) widgets — meditation timer, vinyl music player, smart-home panel, button anatomy lab, audio mixing console, form studio, dark teal IoT hub, champagne finance dashboard with animated credit card, ripple-animated calculator, asymmetric weather grid with live clock, pure-CSS form controls showcase, rose parchment profile + testimonial layout, and a dark-mode neon system hub with glowing neumorphism. Fully interactive, palette-scoped, accessible.

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

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

10 hand-coded CSS parallax effects covering the patterns search demand actually targets — multi-layer scroll hero, cinematic SVG landscape with 5 depth layers, sticky scroll sections (Stripe / Linear marketing pattern), multi-scene sticky-pinned parallax journey, asymmetric image grid parallax, sticky horizontal-scroll panels driven by vertical scroll, text overlay texture, mouse-position 3D card tilt, zoom-in depth illusion, and backdrop-filter blur cross-fade transition. All 10 use requestAnimationFrame-throttled scroll/mouse listeners for the parallax math. Every demo respects prefers-reduced-motion, scoped class names, MIT-licensed.

18 free CSS play / pause button designs for audio, video and podcast UIs — copy-paste HTML, CSS and JS.

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

12 hand-coded CSS progress bar designs — liquid fill, step tracker, conic ring, segmented battery, skill bars, speed gauge and more. Semantic HTML, copy-paste ready.

18 hand-coded CSS radio buttons — pill slider, magnetic orb, ink drop, segmented bar, pricing tier, glow pulse and more. Accessible, drop-in ready.

12 hand-coded retro / vintage UI designs covering the era-aesthetics search demand actually targets — pixel-faithful Windows 95 desktop in pure CSS (no framework dependency), CRT terminal with scanlines and boot reveal, 8-bit pixel-art buttons via box-shadow, neo-brutalism component toggle board, skeuomorphic cassette player, vaporwave scene with masked gradients, retro arcade game UI kit, working ASCII art bash interpreter, Web 1.0 / 90s guestbook with hit counter and webring, Y2K aqua-gloss kit, retro clothing-store storefront, and a draggable desktop-portfolio template. 10 truly pure-CSS, 2 with optional vanilla JS for the interactive bash + window-drag. Scoped class names that never collide, prefers-reduced-motion respected, MIT-licensed.

12 hand-coded CSS ripple animations covering every production pattern in 2026 — interactive water-surface click ripples with multi-ring concentric expansion, vanilla Material Design ink button ripple, animated pond background with bubble particles, neon glow ripple, pure-CSS ripple loading spinner, sonar ping for live status indicators, heartbeat pulse for medical and fitness UIs, ripple card hover effect, sound wave visualiser (no Web Audio API required), liquid drop animation, ripple-driven login form, and aurora borealis ripple background. All GPU-accelerated via transform + opacity only (no layout thrashing, 60fps on mid-tier mobile), respect prefers-reduced-motion, use scoped .rpl-NN__* class names so multiple can coexist on the same page, and ship MIT-licensed with zero framework dependencies. 6 demos are 100% pure CSS, 6 use vanilla JavaScript for click coordinates / particle spawning / live state.

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

32 hand-coded CSS search boxes and search bars — minimal underline, voice, autocomplete dropdown, recent searches, ⌘K command palette and more. Semantic forms, drop-in ready.

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

Hand-coded CSS sidebar navigation patterns — collapsible rails, drawer menus with text and icons, nested vertical navigation, sidebar dropdowns, sticky full-height layouts, glassmorphic blur, mobile slide-out overlays, and bottom-pinned profile sidebars. Pure CSS, no framework, copy-paste ready.

12 hand-coded CSS skeleton loaders — classic shimmer, pulse, avatar card, image card, article page, table rows, stat tiles, comment thread and more.

25 hand-coded CSS spinners covering every production loading-spinner pattern developers reach for in 2026 — 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.

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

28 hand-coded CSS stacked-card designs with live demos — editorial hover-reveal deck, scroll-activated sticky stack, pure-CSS testimonial slider with radio inputs, 3D isometric pricing tiers, swipeable Tinder-style flashcards, minimalist bento grid with embedded mini-stack, poker-deck fan, botanical fan spread, scattered Polaroids, staircase bricks, glassmorphic perspective tunnel, iOS notification pile, receipt roll, real scratch-off cards and more. 20 pure CSS + 8 with a small vanilla JS snippet for drag/click/scroll interactivity. prefers-reduced-motion respected, scoped class names, MIT-licensed.

12 hand-coded CSS stepper UI components covering every production multi-step flow pattern in 2026 — 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.

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

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

15 hand-coded CSS testimonial layouts spanning editorial, brutalist, bento, neon, retro, minimal, crypto, edtech, luxury real estate, gaming, high fashion, fintech, SaaS minimal, horizontal profile, and portrait-led aesthetics. Copy-paste ready, accessible, mobile-first.

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

20 hand-coded CSS toggle switches with live demos — haptic keys, waveform, timed countdown, biometric scan, split-flap board, permission stack, iOS, Material Design, skeuomorphic, neon, brutalist, day/night, flip card, sliding pill, glassmorphism, rotary knob, iOS light, outline, bouncy pebble, and industrial rocker. Pure CSS, fully accessible, copy-paste ready.

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.

22 hand-coded CSS transition effects covering every production motion pattern in 2026 — button hover transitions (9 polished variants: fill sweep, slide-up, neon glow, rotate, border draw, 3D depth, ripple, shimmer, split wipe), scroll-reveal animation, 3D flip card, text reveal with mask clip, image zoom on hover, background color crossfade, border draw animation, fade in/out, navigation menu hover, loading skeleton shimmer, modal open/close, page transitions (Next/Vue/Astro view-transition pattern), ripple effect on click, underline animation, animated number counter, 3D mousemove card tilt, glassmorphism hover, staggered IntersectionObserver list animation, cursor trail effect, magnetic button hover, split text reveal (GSAP-style), and animated progress bars. All GPU-accelerated via transform + opacity only (compositor-thread, no layout thrashing — INP-friendly), respect prefers-reduced-motion, and ship MIT-licensed with zero framework dependencies. 9 demos are 100% pure CSS; 13 use vanilla JavaScript for IntersectionObserver, mousemove, or click coordinates.

Encode or decode Base64 — text, JSON, JWTs, and files up to 5 MB. Standard and URL-safe variants with full UTF-8 support and live preview.

Check WCAG 2.1 contrast ratios between any two colours — instant AA / AAA pass-fail with a live preview.

Convert between hex, rgb, hsl, oklch, oklab, hwb, and named colors. Bulk mode — paste a whole stylesheet and convert every color at once with one click.

Paste minified or messy CSS and instantly get a cleanly indented, readable version — configurable indent, optional alphabetical sorting, lowercase hex, and live preview.

Paste a styled-components or emotion block and get plain CSS — handles tagged templates and object syntax, resolves & nesting into real selectors, converts camelCase to kebab-case, and outputs Plain CSS, CSS Modules, or SCSS.

Paste any CSS and instantly get a minified, production-ready version — strips comments, whitespace, and redundant tokens with live size savings.

Paste any CSS selector and get its (a, b, c) specificity score — with a colour-coded breakdown of every ID, class, attribute, pseudo, and element.

Free CSS to Tailwind converter that turns any CSS block into clean Tailwind utility classes — instantly, in your browser, with no signup. Paste raw CSS, hover/focus pseudo-classes, or @media queries and get back Tailwind v3 or v4 utility classes with auto-applied variant prefixes (hover:, focus:, md:, lg:, dark:) and arbitrary-value fallbacks like px-[14px] for anything outside the default scale. Live preview included. Works offline. 100% client-side.

Convert between every CSS unit — px, rem, em, pt, vw, vh, %, cm, in, deg, rad, ms, dpi — with live context controls and copy-on-click.

Paste any :root block and instantly see every --variable as a swatch, chip, or chain — with live filter, type detection, and var() resolution.

Encode or decode HTML entities — escape <, >, &, quotes, and special characters with named, decimal, or hex output.

Paste HTML, get React JSX — converts class to className, for to htmlFor, void elements to self-closing, event handlers to camelCase, and inline styles to object syntax. Handles 50+ attribute conversions and edge cases.

Paste any JSON and get TypeScript interfaces, Zod schemas, JSON Schema, and Go structs — all four formats from one input, with full inference options.

Convert between JSON, YAML, and CSV in one tool. All 9 conversions, with options for indent, sort keys, YAML quote style, CSV delimiter, nested-object flattening and more.

Convert pixel values to REM units instantly — set your base font size and get exact REM equivalents.

Preview any URL across iPhone, iPad, laptop, and desktop sizes — with Tailwind breakpoint detection, rotation, and live zoom.

Paste any SVG and get a clean React component — auto-renames attributes, swaps hardcoded colors for currentColor or props, wraps in forwardRef with TypeScript and a size prop, and previews the result on light and dark backgrounds.

Pick a primary color, get a complete Tailwind theme — 11-shade color scale, semantic tokens, dark mode variants, and four output formats: Tailwind v3, v4 @theme, plain CSS variables, and shadcn/ui tokens.

Paste any Tailwind CSS class string and instantly get equivalent plain CSS — supports variants (hover, focus, md), arbitrary values, and four output formats: plain CSS, custom properties, SCSS, and @apply.

Convert pixels to vw, vh, vmin, vmax — and back — at any viewport size, with device presets and a fluid-typography reference table.

Convert XML to JSON in your browser — configurable attribute prefix, namespace handling, force-array tag list, type coercion, CDATA preservation, and a JSON to XML reverse direction. Works on SOAP responses, RSS feeds, sitemaps, and Maven POMs. 100% client-side, no upload.

Build CSS keyframe animations visually — pick a preset, tune duration, easing, direction and fill-mode, then copy the output.

Calculate any CSS aspect ratio and visualize it across six device viewports — iPhone, iPad, laptop, desktop, ultrawide, square. Computed values panel, padding-bottom fallback, export to CSS, Tailwind, styled-components, SCSS, React.

Generate pure-CSS background patterns visually — dots, stripes, grids, checkerboards, hexagons, triangles and more. Pick colors, tile size, opacity. Live preview, copy-ready code, no SVG and no PNGs.

Design CSS border-radius shapes visually — round individual corners, create blobs, pills, circles and more, then copy the output.

Build CSS box shadows visually — adjust blur, spread, offset, color and opacity with live preview, then copy the output.

Design a complete CSS button — all 6 interactive states (default, hover, active, focus, disabled, loading) in one editor — with live preview on your real page background, WCAG contrast checking, and export to plain CSS, SCSS, Tailwind, React, or Vue.

Design any CSS clip-path visually — drag polygon vertices, pick from triangle to star presets, switch between polygon/circle/ellipse/inset, and copy the CSS instantly.

Generate a 3–12 color palette from any image directly in your browser. K-means clustering, real WCAG contrast scores, export to CSS variables, Tailwind, design tokens, SCSS, or JS.

Design CSS cubic-bezier easing curves visually — drag two handles, see the curve play live as a moving ball, compare against linear / ease / ease-in-out, export to CSS, Tailwind, JS, or SCSS.

Browse all 36 standard CSS cursors and build custom data-URL cursors from emoji, text badges, or SVG — with a visual hotspot picker and instant export to CSS, Tailwind, styled-components, or SCSS.

Build CSS filter strings visually — blur, brightness, contrast, saturation, hue-rotate, sepia, drop-shadow and more — with a live before/after preview.

Build CSS flexbox layouts visually — control direction, wrapping, alignment, and gap, then copy the output.

Find a working font pairing in seconds — eight curated headings (Inter, Playfair, Space Grotesk, Fraunces) each with 3–4 hand-picked body fonts. Multi-size live preview, auto Google Fonts loading, copy-ready CSS.

Build frosted-glass surfaces visually — live preview against six vivid backgrounds, real-time WCAG contrast scoring, and copy-ready output in CSS, Tailwind, CSS Modules, styled-components, SCSS or React.

Build linear, radial, and conic CSS gradients visually — adjust stops, angles, and colors with a live preview, then copy the output.

Build CSS grid layouts visually — set columns, rows, gaps, and alignment, then copy the output.

Tune CSS letter-spacing and line-height visually — eight font stacks, eight elements (h1 through caption), and a Goldilocks side-by-side comparison so your eye picks the right value, not your guesswork.

Build CSS borders, outlines, and gradient borders visually — with per-side controls, side-by-side border-vs-outline comparison, and copy-ready output in CSS, Tailwind, styled-components, or SCSS.

Generate custom CSS scrollbars visually — width, thumb color, track color, hover state, padding, border-radius. Outputs both modern `scrollbar-color` and legacy `::-webkit-scrollbar` CSS side by side, with a live scrollable preview.

Generate a modular CSS spacing scale visually — pick a base size and a ratio (golden, perfect-fourth, modular fifth), see the cascade as side-by-side rectangles, export to CSS variables, Tailwind, design tokens, SCSS, or JS.

Stack any number of text shadows visually — neon glows, 3D depth, faux outlines, embossed labels and retro layers — with a live preview and copy-on-click CSS.

Stack 2D and 3D CSS transforms visually — translate, rotate, scale, skew, perspective and origin — with a live preview, ghost reference, and copy-on-click CSS.