# 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

- [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.
- [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.
- [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.
- [21 CSS Button Hover Effects](https://codefronts.com/motion/css-button-hover-effects/) (21 designs): 21 original CSS button hover effects — liquid fill, glitch, neon pulse, 3D flip, particle burst and more. Pure CSS with 3 vanilla JS enhancements. Copy-paste ready.
- [31 CSS Button Designs](https://codefronts.com/components/css-buttons/) (31 designs): 31 hand-coded CSS buttons styled as real-world materials — brushed brass, holographic foil, vinyl record, velvet ribbon, frosted ice, brutalist concrete and more.
- [27 CSS Card Hover Effects](https://codefronts.com/motion/css-card-hover-effects/) (27 designs): 27 original CSS card hover effects — elastic lift, 3D tilt, holographic shimmer, spotlight, aurora and more. Pure CSS with 4 vanilla JS enhancements. Copy-paste ready.
- [20 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.
- [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 Menu Designs](https://codefronts.com/navigation/css-circular-menus/) (21 designs): 21 free CSS circular menu designs — radial, 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 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.
- [16 CSS Floating Action Button Designs](https://codefronts.com/components/css-floating-buttons/) (16 designs): 16 hand-coded CSS floating action button designs — speed dial, pulse, morphing FAB, scroll-to-top, notification badge, voice action and more. Semantic HTML, copy-paste ready.
- [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.
- [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.
- [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.
- [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.
- [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.
- [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.
- [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.
- [32 CSS Search Box Designs](https://codefronts.com/components/css-search-boxes/) (32 designs): 32 hand-coded CSS search boxes — 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.
- [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.
- [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.
- [22 CSS Stacked Card Designs](https://codefronts.com/components/css-stacked-cards/) (22 designs): 22 free CSS stacked-card designs — depth stacks, hover reveals, interactive selectors and 3D layouts with copy-paste HTML and CSS.
- [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.
- [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.

## 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 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/): Paste any CSS and instantly get the Tailwind CSS class equivalents — supports 400+ properties with arbitrary value fallback.
- [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.
- [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.

## 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 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, colour and opacity with live preview, then copy the output.
- [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 colours 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.

## Optional

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