Search

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

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.

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

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

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 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.

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

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

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

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

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

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

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

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

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

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 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 free CSS link hover effects — animated underlines, glitches, neon flickers, marker highlights, 3D flips and more, with copy-paste code.

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

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

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.

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

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

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

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

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

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

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

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

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

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

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 free CSS stacked-card designs — depth stacks, hover reveals, interactive selectors and 3D layouts with copy-paste HTML and CSS.

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

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

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

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

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

21 hand-coded CSS tooltips spanning icon toolbars, form-field help, code docs, editorial footnotes, profile cards, schematics, inventories, keyboard shortcuts, glossary words, status dots, table cells, content tags, departures boards, recipe ingredients, constellation maps, periodic-table elements, photo EXIF cards, org charts, and event timelines.

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

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

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

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

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

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

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

Paste any CSS and instantly get the Tailwind CSS class equivalents — supports 400+ properties with arbitrary value fallback.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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