{"items":[{"title":"Base64 Encoder / Decoder","description":"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.","tags":"base64 encoder decoder jwt data-uri","category":"tool","href":"/tools/base64-encoder-decoder/"},{"title":"Colour Contrast Checker","description":"Check WCAG 2.1 contrast ratios between any two colours — instant AA / AAA pass-fail with a live preview.","tags":"accessibility wcag contrast color a11y","category":"tool","href":"/tools/color-contrast-checker/"},{"title":"Color Format Converter","description":"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.","tags":"color converter hex to rgb rgb to hex hex to hsl color to oklch oklch converter css color tools","category":"tool","href":"/tools/color-format-converter/"},{"title":"CSS Formatter & Beautifier","description":"Paste minified or messy CSS and instantly get a cleanly indented, readable version — configurable indent, optional alphabetical sorting, lowercase hex, and live preview.","tags":"css formatter css beautifier pretty print css format css online css indent css tools free","category":"tool","href":"/tools/css-formatter/"},{"title":"CSS Minifier","description":"Paste any CSS and instantly get a minified, production-ready version — strips comments, whitespace, and redundant tokens with live size savings.","tags":"minifier css performance build optimisation","category":"tool","href":"/tools/css-minifier/"},{"title":"CSS Specificity Calculator","description":"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.","tags":"css specificity selectors cascade debugging","category":"tool","href":"/tools/css-specificity-calculator/"},{"title":"CSS to Tailwind Converter","description":"Paste any CSS and instantly get the Tailwind CSS class equivalents — supports 400+ properties with arbitrary value fallback.","tags":"tailwind css converter utility tool","category":"tool","href":"/tools/css-to-tailwind-converter/"},{"title":"CSS Unit Converter","description":"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.","tags":"css units converter rem vw","category":"tool","href":"/tools/css-unit-converter/"},{"title":"CSS Variable Checker","description":"Paste any :root block and instantly see every --variable as a swatch, chip, or chain — with live filter, type detection, and var() resolution.","tags":"css variable checker css variables css custom properties design tokens theme audit css variables tool","category":"tool","href":"/tools/css-variable-checker/"},{"title":"HTML Entity Encoder / Decoder","description":"Encode or decode HTML entities — escape <, >, &, quotes, and special characters with named, decimal, or hex output.","tags":"html entity encoder decoder escape","category":"tool","href":"/tools/html-entity-encoder/"},{"title":"HTML to JSX Converter","description":"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.","tags":"html jsx react converter framework tool","category":"tool","href":"/tools/html-to-jsx-converter/"},{"title":"JSON to TypeScript Converter","description":"Paste any JSON and get TypeScript interfaces, Zod schemas, JSON Schema, and Go structs — all four formats from one input, with full inference options.","tags":"json typescript zod json schema go converter tool","category":"tool","href":"/tools/json-to-typescript-converter/"},{"title":"JSON / YAML / CSV Converter","description":"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.","tags":"json to yaml yaml to json json to csv csv to json json yaml csv converter json converter format converter","category":"tool","href":"/tools/json-yaml-csv-converter/"},{"title":"PX to REM Converter","description":"Convert pixel values to REM units instantly — set your base font size and get exact REM equivalents.","tags":"converter px rem units responsive","category":"tool","href":"/tools/px-to-rem-converter/"},{"title":"Responsive Breakpoint Tester","description":"Preview any URL across iPhone, iPad, laptop, and desktop sizes — with Tailwind breakpoint detection, rotation, and live zoom.","tags":"responsive breakpoint viewport device testing","category":"tool","href":"/tools/responsive-breakpoint-tester/"},{"title":"Tailwind Config Theme Builder","description":"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.","tags":"tailwind theme generator shadcn oklch framework tool","category":"tool","href":"/tools/tailwind-config-theme-builder/"},{"title":"Tailwind to CSS Converter","description":"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.","tags":"tailwind css converter tailwind to css utility classes tool","category":"tool","href":"/tools/tailwind-to-css-converter/"},{"title":"Viewport Unit Calculator","description":"Convert pixels to vw, vh, vmin, vmax — and back — at any viewport size, with device presets and a fluid-typography reference table.","tags":"viewport vw vh fluid responsive","category":"tool","href":"/tools/viewport-unit-calculator/"},{"title":"CSS Animation Generator","description":"Build CSS keyframe animations visually — pick a preset, tune duration, easing, direction and fill-mode, then copy the output.","tags":"animation keyframes css generator effects","category":"generator","href":"/generators/css-animation-generator/"},{"title":"CSS Aspect Ratio Calculator","description":"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.","tags":"css aspect ratio calculator aspect ratio calculator css aspect-ratio 16:9 calculator padding-bottom hack responsive ratio css generator","category":"generator","href":"/generators/css-aspect-ratio-calculator/"},{"title":"CSS Border Radius Generator","description":"Design CSS border-radius shapes visually — round individual corners, create blobs, pills, circles and more, then copy the output.","tags":"border-radius css generator shapes effects","category":"generator","href":"/generators/css-border-radius-generator/"},{"title":"CSS Box Shadow Generator","description":"Build CSS box shadows visually — adjust blur, spread, offset, colour and opacity with live preview, then copy the output.","tags":"box-shadow shadow css generator effects","category":"generator","href":"/generators/css-box-shadow-generator/"},{"title":"CSS Clip-Path Generator","description":"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.","tags":"clip-path css generator shapes polygon","category":"generator","href":"/generators/css-clip-path-generator/"},{"title":"CSS Color Palette Generator","description":"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.","tags":"color palette generator css color palette color palette from image image to palette css variables design tokens tailwind colors","category":"generator","href":"/generators/css-color-palette-generator/"},{"title":"CSS Cubic Bezier Generator","description":"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.","tags":"cubic bezier generator cubic-bezier editor css easing generator css animation easing transition curve spring easing easing function","category":"generator","href":"/generators/css-cubic-bezier-generator/"},{"title":"CSS Cursor Generator","description":"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.","tags":"cursor css cursor custom cursor cursor generator data url cursor hotspot","category":"generator","href":"/generators/css-cursor-generator/"},{"title":"CSS Filter Generator","description":"Build CSS filter strings visually — blur, brightness, contrast, saturation, hue-rotate, sepia, drop-shadow and more — with a live before/after preview.","tags":"filter css generator image effects","category":"generator","href":"/generators/css-filter-generator/"},{"title":"CSS Flexbox Generator","description":"Build CSS flexbox layouts visually — control direction, wrapping, alignment, and gap, then copy the output.","tags":"flexbox css generator layout effects","category":"generator","href":"/generators/css-flexbox-generator/"},{"title":"Font Pairing Finder — Curated Heading + Body","description":"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.","tags":"font pairing google fonts typography heading body pairing css generator web fonts","category":"generator","href":"/generators/css-font-pairing-finder/"},{"title":"CSS Glassmorphism Generator","description":"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.","tags":"glassmorphism frosted glass backdrop-filter css generator wcag contrast tailwind glass","category":"generator","href":"/generators/css-glassmorphism-generator/"},{"title":"CSS Gradient Generator","description":"Build linear, radial, and conic CSS gradients visually — adjust stops, angles, and colours with a live preview, then copy the output.","tags":"gradient background css generator visual-tool","category":"generator","href":"/generators/css-gradient-generator/"},{"title":"CSS Grid Generator","description":"Build CSS grid layouts visually — set columns, rows, gaps, and alignment, then copy the output.","tags":"grid css generator layout effects","category":"generator","href":"/generators/css-grid-generator/"},{"title":"CSS Letter Spacing Generator","description":"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.","tags":"css letter spacing letter spacing generator line-height generator typography generator css typography tracking web typography","category":"generator","href":"/generators/css-letter-spacing-generator/"},{"title":"CSS Outline & Border Generator","description":"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.","tags":"border outline gradient border css generator per-side border focus ring","category":"generator","href":"/generators/css-outline-border-generator/"},{"title":"CSS Scrollbar Generator","description":"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.","tags":"css scrollbar generator custom scrollbar css scrollbar generator ::-webkit-scrollbar scrollbar-color scrollbar-width css scrollbar","category":"generator","href":"/generators/css-scrollbar-generator/"},{"title":"CSS Spacing Scale Generator","description":"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.","tags":"css spacing scale spacing scale generator modular scale generator design tokens css variables tailwind spacing css generator","category":"generator","href":"/generators/css-spacing-scale-generator/"},{"title":"CSS Text Shadow Generator","description":"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.","tags":"text-shadow css generator typography effects","category":"generator","href":"/generators/css-text-shadow-generator/"},{"title":"CSS Transform Generator","description":"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.","tags":"transform css generator 3d animation","category":"generator","href":"/generators/css-transform-generator/"},{"title":"26 CSS Accordions — Vertical & Horizontal","description":"26 free CSS accordions — 17 vertical and 9 horizontal layouts with copy-paste HTML and CSS.","tags":"accordion vertical accordion horizontal accordion details summary expand collapse navigation css-only interactive","category":"collection","href":"/navigation/css-accordions/"},{"title":"30 CSS Badges","description":"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.","tags":"css badge badge design upload progress typing indicator scrabble tile keycap shortcut transit indicator origami medal hreflang e-e-a-t crawl status schema badge search intent core web vitals ecg heartbeat build pipeline countdown ring live price ticker file extension dice face signal bars reading time aurora status vaporwave chrome risograph wax seal conference lanyard botanical tier cyberpunk glitch art deco medallion brutalist status holographic collectible","category":"collection","href":"/snippets/css-badges/"},{"title":"19 CSS Blockquote Designs","description":"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.","tags":"blockquote css blockquote pull quote testimonial quote design snippets css-only typography","category":"collection","href":"/snippets/css-blockquotes/"},{"title":"22 CSS Breadcrumbs","description":"22 original CSS breadcrumb designs — underline grow, pill, diagonal slash, neon trail, brutalist, frosted glass, vertical stacked, progress track, holographic shimmer and more.","tags":"breadcrumbs navigation css-only animation interactive","category":"collection","href":"/navigation/css-breadcrumbs/"},{"title":"22 CSS Button Group Designs","description":"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.","tags":"button group css button group segmented control toolbar pagination split button components css-only","category":"collection","href":"/components/css-button-groups/"},{"title":"21 CSS Button Hover Effects","description":"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.","tags":"buttons hover animation css-only interactive","category":"collection","href":"/motion/css-button-hover-effects/"},{"title":"31 CSS Button Designs","description":"31 hand-coded CSS buttons styled as real-world materials — brushed brass, holographic foil, vinyl record, velvet ribbon, frosted ice, brutalist concrete and more.","tags":"buttons hover animation css-only interactive","category":"collection","href":"/components/css-buttons/"},{"title":"27 CSS Card Hover Effects","description":"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.","tags":"cards hover animation css-only interactive","category":"collection","href":"/motion/css-card-hover-effects/"},{"title":"20 CSS Cards with Animations","description":"20 hand-crafted CSS card components — aurora glow, 3D tilt, glassmorphism, neon borders, flip card, pricing, terminal, music player, weather widget and more.","tags":"cards components animation css-only ui","category":"collection","href":"/components/css-cards/"},{"title":"23 CSS Checkboxes","description":"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.","tags":"checkboxes forms animation css-only interactive","category":"collection","href":"/components/css-checkboxes/"},{"title":"21 CSS Circular Menu Designs","description":"21 free CSS circular menu designs — radial, dome, orbital and skeumorphic layouts with copy-paste HTML and CSS.","tags":"css circular menu radial menu dome menu speed dial wheel menu pie menu navigation css-only","category":"collection","href":"/navigation/css-circular-menus/"},{"title":"18 CSS Close Buttons","description":"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.","tags":"close buttons dismiss modal css-only interactive","category":"collection","href":"/components/css-close-buttons/"},{"title":"12 CSS Dark Mode UI Patterns","description":"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.","tags":"dark mode dark mode ui oled dark theme dark dashboard design-styles css-only","category":"collection","href":"/design-styles/css-dark-mode-ui/"},{"title":"16 CSS Floating Action Button Designs","description":"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.","tags":"floating action button fab floating button speed dial material design components css-only interactive","category":"collection","href":"/components/css-floating-buttons/"},{"title":"15 CSS Footer Designs","description":"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.","tags":"footer page footer css footer site footer newsletter footer navigation ui templates","category":"collection","href":"/layouts/css-footer-designs/"},{"title":"12 CSS Glassmorphism Designs","description":"12 free CSS glassmorphism designs — cards, modals, navigation, form surfaces and layered effects with copy-paste HTML and CSS.","tags":"glassmorphism frosted glass backdrop-filter glass card frosted modal design-styles css-only","category":"collection","href":"/design-styles/css-glassmorphism/"},{"title":"24 CSS Grid Layouts","description":"24 hand-coded CSS grid layouts — holy grail, 12-column, bento, masonry, subgrid, dashboard, kanban, container queries and more. Pure CSS, copy-paste ready.","tags":"css grid grid layout css layout responsive grid subgrid masonry bento container queries","category":"collection","href":"/layouts/css-grid-layouts/"},{"title":"30 CSS Hero Sections","description":"30 hand-coded CSS hero sections — gradient mesh, glassmorphism, bento, terminal, parallax, 3D card stack, conic orbit and more. No images, copy-paste ready.","tags":"hero section landing page saas hero css hero gradient mesh glassmorphism responsive hero","category":"collection","href":"/layouts/css-hero-sections/"},{"title":"28 CSS Input Field Designs","description":"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.","tags":"input field form input text input form ui components css forms ui templates css-only","category":"collection","href":"/components/css-input-fields/"},{"title":"20 CSS Link Hover Effect Designs","description":"20 free CSS link hover effects — animated underlines, glitches, neon flickers, marker highlights, 3D flips and more, with copy-paste code.","tags":"css link hover link effects underline animation blinking link text hover hover effects motion css-only interactive","category":"collection","href":"/motion/css-link-effects/"},{"title":"15 Pure CSS Loading Animations","description":"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.","tags":"loading spinner animation css-only motion skeleton progress","category":"collection","href":"/motion/css-loading-animations/"},{"title":"24 CSS Login Form Designs with Live Demos","description":"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.","tags":"login form sign in form authentication auth ui components css forms ui templates css-only","category":"collection","href":"/components/css-login-forms/"},{"title":"18 CSS Play / Pause Button Designs","description":"18 free CSS play / pause button designs for audio, video and podcast UIs — copy-paste HTML, CSS and JS.","tags":"play button pause button media controls audio ui video player components css buttons ui templates","category":"collection","href":"/components/css-play-pause-buttons/"},{"title":"21 CSS Pricing Sections","description":"21 hand-coded CSS pricing sections — three-tier cards, comparison tables, billing toggles, usage sliders, per-seat calculators. Copy-paste ready, accessible, mobile-first.","tags":"pricing section saas pricing pricing table css pricing comparison table monthly yearly toggle usage based pricing per seat calculator","category":"collection","href":"/layouts/css-pricing-sections/"},{"title":"12 CSS Progress Bar Designs","description":"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.","tags":"progress bar loader step tracker circular progress gauge skill bar components css-only","category":"collection","href":"/components/css-progress-bars/"},{"title":"18 CSS Radio Button Designs","description":"18 hand-coded CSS radio buttons — pill slider, magnetic orb, ink drop, segmented bar, pricing tier, glow pulse and more. Accessible, drop-in ready.","tags":"radio buttons css radio buttons form inputs pill toggle segmented control components css-only interactive","category":"collection","href":"/components/css-radio-buttons/"},{"title":"32 CSS Search Box Designs","description":"32 hand-coded CSS search boxes — minimal underline, voice, autocomplete dropdown, recent searches, ⌘K command palette and more. Semantic forms, drop-in ready.","tags":"css search box search bar css search input css css search field autocomplete search components css-only forms","category":"collection","href":"/components/css-search-boxes/"},{"title":"23 CSS Sidebar Layouts","description":"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.","tags":"css sidebar layouts sidebar menu css collapsible sidebar off-canvas drawer admin dashboard layout css navigation responsive sidebar css-only","category":"collection","href":"/layouts/css-sidebar-layouts/"},{"title":"12 CSS Skeleton Loaders","description":"12 hand-coded CSS skeleton loaders — classic shimmer, pulse, avatar card, image card, article page, table rows, stat tiles, comment thread and more.","tags":"skeleton loader loading placeholder css-only","category":"collection","href":"/components/css-skeleton-loaders/"},{"title":"22 CSS Split Screen Layouts","description":"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.","tags":"css split screen split screen layout two column hero diagonal split css before after slider hover reveal css landing page css-only","category":"collection","href":"/layouts/css-split-screen/"},{"title":"22 CSS Stacked Card Designs","description":"22 free CSS stacked-card designs — depth stacks, hover reveals, interactive selectors and 3D layouts with copy-paste HTML and CSS.","tags":"stacked cards card stack deck of cards swipe cards fan cards tinder cards components css-only","category":"collection","href":"/components/css-stacked-cards/"},{"title":"32 CSS Tab Designs","description":"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.","tags":"tabs tab navigation navigation typography css-only interactive segmented control ui components","category":"collection","href":"/navigation/css-tabs/"},{"title":"20 CSS Tags & Chips Designs","description":"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.","tags":"css tags css chips filter chips tag input css badge snippets css-only interactive","category":"collection","href":"/snippets/css-tags-chips/"},{"title":"24 CSS Timeline Layouts","description":"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.","tags":"css timeline timeline layout vertical timeline horizontal timeline accordion timeline filmstrip incident log patient journey sustainability report brutalist roadmap neon rail stratigraphy tour stub vitals mission control calendar timeline changelog audit log career timeline portfolio gallery roadmap stations","category":"collection","href":"/layouts/css-timelines/"},{"title":"20 Pure CSS Toggles & Switches","description":"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.","tags":"toggle switch form ios-toggle css-only interactive checkbox dark-mode glassmorphism skeuomorphic bouncy organic haptic biometric split-flap permission","category":"collection","href":"/components/css-toggles-switches/"}]}