# CodeFronts

> CodeFronts publishes free, copy-paste CSS components, interactive tools, and visual CSS generators for frontend developers. Every demo is hand-coded with semantic HTML, modern CSS, and accessibility built in. Code is production-ready.

The site has three content types:
- **Collections** — galleries of CSS demos grouped by component type (buttons, cards, login forms, etc.). Each demo ships with complete HTML, CSS, and (when needed) JS that copies cleanly into any project.
- **Tools** — interactive single-purpose utilities (CSS minifier, formatter, color converter, JSON-to-TypeScript, etc.) that operate on user input.
- **Generators** — visual CSS-output builders (gradient, box-shadow, scrollbar, animation, etc.) that produce ready-to-paste CSS from drag-and-drop controls.

For machine-readable full-content extraction, see https://codefronts.com/llms-full.txt — it includes every demo's HTML, CSS, and JS in plain text, plus descriptions for every tool and generator.

## Collections

- [9 CSS 3D Designs](https://codefronts.com/design-styles/css-3d/) (9 designs): 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 CSS Accordions — Vertical & Horizontal](https://codefronts.com/navigation/css-accordions/) (26 designs): 26 free CSS accordions — 17 vertical and 9 horizontal layouts with copy-paste HTML and CSS.
- [15 CSS Background Animations](https://codefronts.com/motion/css-background-animations/) (15 designs): 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 CSS Badges](https://codefronts.com/snippets/css-badges/) (30 designs): 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.
- [14 CSS Banners & Alerts](https://codefronts.com/snippets/css-banners-alerts/) (14 designs): 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 CSS Blockquote Designs](https://codefronts.com/snippets/css-blockquotes/) (19 designs): 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 CSS Breadcrumbs](https://codefronts.com/navigation/css-breadcrumbs/) (22 designs): 22 original CSS breadcrumb designs — underline grow, pill, diagonal slash, neon trail, brutalist, frosted glass, vertical stacked, progress track, holographic shimmer and more.
- [8 CSS Brutalist Designs](https://codefronts.com/design-styles/css-brutalist/) (8 designs): 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 CSS Button Group Designs](https://codefronts.com/components/css-button-groups/) (22 designs): 22 dynamic CSS button groups with motion-driven interactions — plasma loops, holographic gradients, magnetic discs, wormhole tabs, particle aurora. Pure CSS or light JS, copy-paste ready.
- [27 CSS Button Hover Effects](https://codefronts.com/motion/css-button-hover-effects/) (27 designs): 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 CSS Button Designs](https://codefronts.com/components/css-buttons/) (43 designs): 43 hand-coded CSS buttons — real-world materials like brushed brass and vinyl, interactive use-case buttons (add-to-cart, download, like, delete), and click-effect studies: magnetic mercury ripple, brutalist glitch, neon plasma burst, clay press, ink spread, and particle shards.
- [27 CSS Calendar Designs](https://codefronts.com/components/css-calendar-designs/) (27 designs): 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 CSS Card Hover Effects](https://codefronts.com/motion/css-card-hover-effects/) (33 designs): 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 Cards with Animations](https://codefronts.com/components/css-cards/) (20 designs): 20 hand-crafted CSS card components — aurora glow, 3D tilt, glassmorphism, neon borders, flip card, pricing, terminal, music player, weather widget and more.
- [CSS Center a Div](https://codefronts.com/layouts/css-center-div-designs/) (5 designs): 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 CSS Checkboxes](https://codefronts.com/components/css-checkboxes/) (23 designs): 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 CSS Circular & Radial Menu Designs](https://codefronts.com/navigation/css-circular-menus/) (21 designs): 21 free CSS circular and radial menu designs — pie, dome, orbital and skeumorphic layouts with copy-paste HTML and CSS.
- [18 CSS Close Buttons](https://codefronts.com/components/css-close-buttons/) (18 designs): 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.
- [12 CSS Code Blocks](https://codefronts.com/snippets/css-code-blocks/) (12 designs): 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.
- [6 CSS Countdown Timers](https://codefronts.com/snippets/css-countdown-timers/) (6 designs): 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 CSS Dark Mode UI Patterns](https://codefronts.com/design-styles/css-dark-mode-ui/) (12 designs): 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 CSS Divider Collections](https://codefronts.com/snippets/css-dividers/) (18 designs): 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.
- [22 CSS Dropdown Menu Designs](https://codefronts.com/navigation/css-dropdown-menus/) (22 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.
- [16 CSS Fade In Animation Designs](https://codefronts.com/motion/css-fade-in-animation/) (16 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.
- [10 CSS Feature Sections](https://codefronts.com/layouts/css-feature-sections/) (10 designs): 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 CSS Flexbox Layouts](https://codefronts.com/layouts/css-flexbox-layouts/) (15 designs): 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 CSS Floating Action Button Designs](https://codefronts.com/components/css-floating-buttons/) (32 designs): 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 CSS Footer Designs](https://codefronts.com/layouts/css-footer-designs/) (15 designs): 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 CSS Glassmorphism Designs](https://codefronts.com/design-styles/css-glassmorphism/) (12 designs): 12 free CSS glassmorphism designs — cards, modals, navigation, form surfaces and layered effects with copy-paste HTML and CSS.
- [20 CSS Gradient Text Designs](https://codefronts.com/design-styles/css-gradient-text/) (20 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.
- [24 CSS Grid Layouts](https://codefronts.com/layouts/css-grid-layouts/) (24 designs): 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 CSS Hamburger Menus](https://codefronts.com/navigation/css-hamburger-menus/) (20 designs): 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 CSS Header Designs](https://codefronts.com/layouts/css-header-designs/) (11 designs): 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 CSS Hero Sections](https://codefronts.com/layouts/css-hero-sections/) (30 designs): 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 CSS Hover Effects](https://codefronts.com/motion/css-hover-effects/) (30 designs): 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.
- [16 CSS Image Gallery Designs](https://codefronts.com/snippets/css-image-gallery/) (16 designs): 16 hand-coded CSS image gallery designs with live demos — CSS columns masonry grid, click-to-zoom lightbox overlay with focus trap, infinite scroll filmstrip, polaroid stack, tilt parallax cards with mousemove tracking, magazine grid layout, mosaic zoom hover, metro tile grid, perspective depth stack, diagonal clip-path slice reveal, glassmorphism hover cards, 3D cube viewer with perspective rotateY navigation, scattered random-rotation polaroid wall, Ken Burns auto-advancing slideshow, and accordion image gallery. 7 pure CSS + 9 with a tiny vanilla JS snippet — no framework. Every photo is an illustrated inline SVG scene (not a gradient placeholder), prefers-reduced-motion honoured, MIT licensed.
- [28 CSS Input Field Designs](https://codefronts.com/components/css-input-fields/) (28 designs): 28 hand-coded CSS input field designs — floating label, OTP, password strength, voice search, autocomplete, range slider, credit card and more. Semantic HTML, copy-paste ready.
- [30 CSS Keyframe Animations](https://codefronts.com/motion/css-keyframe-animations/) (30 designs): 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 CSS Link Hover Effect Designs](https://codefronts.com/motion/css-link-effects/) (20 designs): 20 free CSS link hover effects — animated underlines, glitches, neon flickers, marker highlights, 3D flips and more, with copy-paste code.
- [20 CSS Loaders](https://codefronts.com/motion/css-loader-designs/) (20 designs): 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 Pure CSS Loading Animations](https://codefronts.com/motion/css-loading-animations/) (15 designs): 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 CSS Login Form Designs with Live Demos](https://codefronts.com/components/css-login-forms/) (24 designs): 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 Material Design CSS Components](https://codefronts.com/design-styles/css-material-designs/) (14 designs): 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 CSS Mega Menus & Dropdown Menus](https://codefronts.com/navigation/css-mega-menus/) (6 designs): 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 CSS Minimalist UI Designs](https://codefronts.com/design-styles/css-minimalist-ui/) (6 designs): 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 CSS Mobile Navigation Patterns](https://codefronts.com/navigation/css-mobile-navigation/) (16 designs): 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 CSS Navbar Designs](https://codefronts.com/navigation/css-navbars/) (8 designs): 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 CSS Navigation Menu Designs](https://codefronts.com/navigation/css-navigation-menu-designs/) (15 designs): 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 CSS Neon Designs](https://codefronts.com/design-styles/css-neon/) (12 designs): 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 CSS Neumorphism & Soft UI Designs](https://codefronts.com/design-styles/css-neumorphism/) (13 designs): 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 CSS Number Counter Animations](https://codefronts.com/motion/css-number-counter-animations/) (15 designs): 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 CSS Page Transitions](https://codefronts.com/motion/css-page-transitions/) (11 designs): 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 CSS Parallax Effects](https://codefronts.com/motion/css-parallax-designs/) (10 designs): 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 CSS Play / Pause Button Designs](https://codefronts.com/components/css-play-pause-buttons/) (18 designs): 18 free CSS play / pause button designs for audio, video and podcast UIs — copy-paste HTML, CSS and JS.
- [21 CSS Pricing Sections](https://codefronts.com/layouts/css-pricing-sections/) (21 designs): 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 CSS Progress Bar Designs](https://codefronts.com/components/css-progress-bars/) (12 designs): 12 hand-coded CSS progress bar designs — liquid fill, step tracker, conic ring, segmented battery, skill bars, speed gauge and more. Semantic HTML, copy-paste ready.
- [18 CSS Radio Button Designs](https://codefronts.com/components/css-radio-buttons/) (18 designs): 18 hand-coded CSS radio buttons — pill slider, magnetic orb, ink drop, segmented bar, pricing tier, glow pulse and more. Accessible, drop-in ready.
- [20 CSS Responsive Navbar Designs](https://codefronts.com/navigation/css-responsive-navbar/) (20 designs): 20 hand-coded CSS responsive navbar designs with live demos — glassmorphism frosted bar, CSS-only mega menu, sidebar drawer, animated underline tabs, pill highlight, scroll-shrink on scroll, synthwave neon, reading-progress breadcrumb, split two-tone, mobile bottom tab bar, conic-gradient animated border, centered logo, icon dot indicator, full-screen overlay, morphing search expand, floating island, step wizard, vertical rail, dual announcement bar, and scroll-spy active highlight. 14 pure CSS + 6 with a tiny vanilla JS snippet — no framework. Mobile-first, WCAG-friendly, copy-paste ready, MIT licensed.
- [12 CSS Retro UI Designs](https://codefronts.com/design-styles/css-retro-designs/) (12 designs): 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 CSS Ripple Effects](https://codefronts.com/motion/css-ripple-designs/) (12 designs): 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 CSS Scroll Animations](https://codefronts.com/motion/css-scroll-animations/) (12 designs): 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 CSS Search Box & Search Bar Designs](https://codefronts.com/components/css-search-boxes/) (32 designs): 32 hand-coded CSS search boxes and search bars — minimal underline, voice, autocomplete dropdown, recent searches, ⌘K command palette and more. Semantic forms, drop-in ready.
- [23 CSS Sidebar Layouts](https://codefronts.com/layouts/css-sidebar-layouts/) (23 designs): 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.
- [10 CSS Sidebar Navigation](https://codefronts.com/navigation/css-sidebar-navigation/) (10 designs): 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 CSS Skeleton Loaders](https://codefronts.com/components/css-skeleton-loaders/) (12 designs): 12 hand-coded CSS skeleton loaders — classic shimmer, pulse, avatar card, image card, article page, table rows, stat tiles, comment thread and more.
- [25 CSS Spinners](https://codefronts.com/motion/css-spinner-designs/) (25 designs): 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 CSS Split Screen Layouts](https://codefronts.com/layouts/css-split-screen/) (22 designs): 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 CSS Stacked Card Designs](https://codefronts.com/components/css-stacked-cards/) (28 designs): 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 CSS Steppers](https://codefronts.com/components/css-stepper-designs/) (12 designs): 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](https://codefronts.com/navigation/css-tabs/) (32 designs): 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 CSS Tags & Chips Designs](https://codefronts.com/snippets/css-tags-chips/) (20 designs): 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 CSS Testimonials & Reviews](https://codefronts.com/components/css-testimonials-reviews/) (15 designs): 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 CSS Timeline Layouts](https://codefronts.com/layouts/css-timelines/) (24 designs): 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 Pure CSS Toggles & Switches](https://codefronts.com/components/css-toggles-switches/) (20 designs): 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 CSS Tooltips](https://codefronts.com/snippets/css-tooltips/) (21 designs): 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 CSS Transition Effects](https://codefronts.com/motion/css-transition-designs/) (22 designs): 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.
- [14 CSS Typewriter Effect Designs](https://codefronts.com/motion/css-typewriter-effect/) (14 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.

## Tools

- [Base64 Encoder / Decoder](https://codefronts.com/tools/base64-encoder-decoder/): 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.
- [Colour Contrast Checker](https://codefronts.com/tools/color-contrast-checker/): Check WCAG 2.1 contrast ratios between any two colours — instant AA / AAA pass-fail with a live preview.
- [Color Format Converter](https://codefronts.com/tools/color-format-converter/): 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.
- [CSS Formatter & Beautifier](https://codefronts.com/tools/css-formatter/): Paste minified or messy CSS and instantly get a cleanly indented, readable version — configurable indent, optional alphabetical sorting, lowercase hex, and live preview.
- [CSS-in-JS to CSS Converter](https://codefronts.com/tools/css-in-js-to-css-converter/): 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.
- [CSS Minifier](https://codefronts.com/tools/css-minifier/): Paste any CSS and instantly get a minified, production-ready version — strips comments, whitespace, and redundant tokens with live size savings.
- [CSS Specificity Calculator](https://codefronts.com/tools/css-specificity-calculator/): 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.
- [CSS to Tailwind Converter](https://codefronts.com/tools/css-to-tailwind-converter/): 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.
- [CSS Unit Converter](https://codefronts.com/tools/css-unit-converter/): 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.
- [CSS Variable Checker](https://codefronts.com/tools/css-variable-checker/): Paste any :root block and instantly see every --variable as a swatch, chip, or chain — with live filter, type detection, and var() resolution.
- [HTML Entity Encoder / Decoder](https://codefronts.com/tools/html-entity-encoder/): Encode or decode HTML entities — escape <, >, &, quotes, and special characters with named, decimal, or hex output.
- [HTML to JSX Converter](https://codefronts.com/tools/html-to-jsx-converter/): 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.
- [JSON to TypeScript Converter](https://codefronts.com/tools/json-to-typescript-converter/): Paste any JSON and get TypeScript interfaces, Zod schemas, JSON Schema, and Go structs — all four formats from one input, with full inference options.
- [JSON / YAML / CSV Converter](https://codefronts.com/tools/json-yaml-csv-converter/): 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.
- [PX to REM Converter](https://codefronts.com/tools/px-to-rem-converter/): Convert pixel values to REM units instantly — set your base font size and get exact REM equivalents.
- [Responsive Breakpoint Tester](https://codefronts.com/tools/responsive-breakpoint-tester/): Preview any URL across iPhone, iPad, laptop, and desktop sizes — with Tailwind breakpoint detection, rotation, and live zoom.
- [SVG to JSX Converter](https://codefronts.com/tools/svg-to-jsx-converter/): 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.
- [Tailwind Config Theme Builder](https://codefronts.com/tools/tailwind-config-theme-builder/): 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.
- [Tailwind to CSS Converter](https://codefronts.com/tools/tailwind-to-css-converter/): 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.
- [Viewport Unit Calculator](https://codefronts.com/tools/viewport-unit-calculator/): Convert pixels to vw, vh, vmin, vmax — and back — at any viewport size, with device presets and a fluid-typography reference table.
- [XML to JSON Converter](https://codefronts.com/tools/xml-to-json-converter/): 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.

## Generators

- [CSS Animation Generator](https://codefronts.com/generators/css-animation-generator/): Build CSS keyframe animations visually — pick a preset, tune duration, easing, direction and fill-mode, then copy the output.
- [CSS Aspect Ratio Calculator](https://codefronts.com/generators/css-aspect-ratio-calculator/): 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.
- [CSS Background Pattern Generator](https://codefronts.com/generators/css-background-pattern-generator/): 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.
- [CSS Border Radius Generator](https://codefronts.com/generators/css-border-radius-generator/): Design CSS border-radius shapes visually — round individual corners, create blobs, pills, circles and more, then copy the output.
- [CSS Box Shadow Generator](https://codefronts.com/generators/css-box-shadow-generator/): Build CSS box shadows visually — adjust blur, spread, offset, color and opacity with live preview, then copy the output.
- [CSS Button Generator](https://codefronts.com/generators/css-button-generator/): 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.
- [CSS Clip-Path Generator](https://codefronts.com/generators/css-clip-path-generator/): 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.
- [CSS Color Palette Generator](https://codefronts.com/generators/css-color-palette-generator/): 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.
- [CSS Cubic Bezier Generator](https://codefronts.com/generators/css-cubic-bezier-generator/): 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.
- [CSS Cursor Generator](https://codefronts.com/generators/css-cursor-generator/): 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.
- [CSS Filter Generator](https://codefronts.com/generators/css-filter-generator/): Build CSS filter strings visually — blur, brightness, contrast, saturation, hue-rotate, sepia, drop-shadow and more — with a live before/after preview.
- [CSS Flexbox Generator](https://codefronts.com/generators/css-flexbox-generator/): Build CSS flexbox layouts visually — control direction, wrapping, alignment, and gap, then copy the output.
- [Font Pairing Finder — Curated Heading + Body](https://codefronts.com/generators/css-font-pairing-finder/): 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.
- [CSS Glassmorphism Generator](https://codefronts.com/generators/css-glassmorphism-generator/): 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.
- [CSS Gradient Generator](https://codefronts.com/generators/css-gradient-generator/): Build linear, radial, and conic CSS gradients visually — adjust stops, angles, and colors with a live preview, then copy the output.
- [CSS Grid Generator](https://codefronts.com/generators/css-grid-generator/): Build CSS grid layouts visually — set columns, rows, gaps, and alignment, then copy the output.
- [CSS Letter Spacing Generator](https://codefronts.com/generators/css-letter-spacing-generator/): 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.
- [CSS Outline & Border Generator](https://codefronts.com/generators/css-outline-border-generator/): 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.
- [CSS Scrollbar Generator](https://codefronts.com/generators/css-scrollbar-generator/): 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.
- [CSS Spacing Scale Generator](https://codefronts.com/generators/css-spacing-scale-generator/): 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.
- [CSS Text Shadow Generator](https://codefronts.com/generators/css-text-shadow-generator/): 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.
- [CSS Transform Generator](https://codefronts.com/generators/css-transform-generator/): 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.
- [Neumorphism Generator](https://codefronts.com/generators/neumorphism-generator/): Design soft-UI neumorphism visually — three depth modes (convex, flat, concave), six palettes including dark mode, multi-component preview (button, card, input, toggle), four interactive states, WCAG contrast checker, and one-click export to plain CSS, SCSS, Tailwind, styled-components, React, or Vue.

## Optional

- [Sitemap](https://codefronts.com/sitemap-index.xml): full URL list, machine-readable.
- [About](https://codefronts.com/about/): site background, contact, license.