# designforai.dev > CSS snippets, design styles and new CSS features, each with a prompt written for AI coding tools. Every page has a markdown twin (same URL with .md). ## Snippets - [Ink flat](https://designforai.dev/snippet/btn-001.md): Buttons, solid, flat, rectangle, subtle-lift - [Cobalt block](https://designforai.dev/snippet/btn-002.md): Buttons, solid, flat, rectangle, brand-blue - [Mint soft-flat](https://designforai.dev/snippet/btn-003.md): Buttons, solid, flat, rounded, tinted-background - [Crimson wide](https://designforai.dev/snippet/btn-004.md): Buttons, solid, flat, full-width, uppercase - [Slate square](https://designforai.dev/snippet/btn-005.md): Buttons, solid, flat, square-corners, monochrome - [Sunflower bold](https://designforai.dev/snippet/btn-006.md): Buttons, solid, flat, rounded, warm, dark-text - [Violet text-lift](https://designforai.dev/snippet/btn-007.md): Buttons, solid, flat, rounded, letter-spacing-hover - [Charcoal micro](https://designforai.dev/snippet/btn-008.md): Buttons, solid, flat, small, compact - [Hairline outline](https://designforai.dev/snippet/btn-009.md): Buttons, outline, ghost, rectangle, thin-border - [Bold outline fill](https://designforai.dev/snippet/btn-010.md): Buttons, outline, rectangle, fill-on-hover, 2px-border - [Ghost text](https://designforai.dev/snippet/btn-011.md): Buttons, ghost, borderless, text-button, minimal - [Dashed outline](https://designforai.dev/snippet/btn-012.md): Buttons, outline, dashed, rectangle, add-action - [Double-line outline](https://designforai.dev/snippet/btn-013.md): Buttons, outline, double-border, editorial, square - [Ghost with border-on-hover](https://designforai.dev/snippet/btn-014.md): Buttons, ghost, outline, rounded, border-appears - [Rose outline pill](https://designforai.dev/snippet/btn-015.md): Buttons, outline, pill, thin-border, tinted-hover - [Inverted ghost (on dark)](https://designforai.dev/snippet/btn-016.md): Buttons, ghost, outline, dark-background, white-border - [Classic pill](https://designforai.dev/snippet/btn-017.md): Buttons, pill, solid, rounded, shadow-lift - [Two-tone pill](https://designforai.dev/snippet/btn-018.md): Buttons, pill, solid, two-tone, badge - [Pill with ring](https://designforai.dev/snippet/btn-019.md): Buttons, pill, outline, ring-hover, rounded - [Squircle](https://designforai.dev/snippet/btn-020.md): Buttons, rounded, solid, squircle, large-radius - [Pill shrink-on-press](https://designforai.dev/snippet/btn-021.md): Buttons, pill, solid, scale, press - [Capsule with dot](https://designforai.dev/snippet/btn-022.md): Buttons, pill, status, indicator, pulse - [Asymmetric radius](https://designforai.dev/snippet/btn-023.md): Buttons, rounded, solid, asymmetric, playful - [Sunset gradient](https://designforai.dev/snippet/btn-024.md): Buttons, gradient, solid, rounded, warm - [Aurora shift](https://designforai.dev/snippet/btn-025.md): Buttons, gradient, animated, background-position, rounded - [Gradient border](https://designforai.dev/snippet/btn-026.md): Buttons, gradient, outline, border-gradient, mask - [Gradient text ghost](https://designforai.dev/snippet/btn-027.md): Buttons, gradient, ghost, text-gradient, background-clip - [Deep ocean](https://designforai.dev/snippet/btn-028.md): Buttons, gradient, solid, vertical, dark - [Radial hotspot](https://designforai.dev/snippet/btn-029.md): Buttons, gradient, radial, hover-move, rounded - [Mesh pastel](https://designforai.dev/snippet/btn-030.md): Buttons, gradient, multi-layer, pastel, soft - [Metallic gold](https://designforai.dev/snippet/btn-031.md): Buttons, gradient, metallic, shine, luxury - [Frosted glass pill](https://designforai.dev/snippet/btn-032.md): Buttons, glassmorphism, pill, blur, translucent - [Dark glass](https://designforai.dev/snippet/btn-033.md): Buttons, glassmorphism, dark, rounded, blur - [Glass with glow edge](https://designforai.dev/snippet/btn-034.md): Buttons, glassmorphism, glow, pill, border-gradient - [Clear glass card button](https://designforai.dev/snippet/btn-035.md): Buttons, glassmorphism, light, rectangle, shadow - [Glass segment tab](https://designforai.dev/snippet/btn-036.md): Buttons, glassmorphism, pill, small, tab-like - [Glass with inner light](https://designforai.dev/snippet/btn-037.md): Buttons, glassmorphism, rounded, inner-gradient, premium - [Soft clay raised](https://designforai.dev/snippet/btn-038.md): Buttons, neumorphic, soft-ui, raised, rounded - [Soft pressed](https://designforai.dev/snippet/btn-039.md): Buttons, neumorphic, soft-ui, inset, rounded - [Soft circle icon](https://designforai.dev/snippet/btn-040.md): Buttons, neumorphic, soft-ui, circle, icon - [Soft dark mode](https://designforai.dev/snippet/btn-041.md): Buttons, neumorphic, soft-ui, dark, rounded - [Soft pill accent](https://designforai.dev/snippet/btn-042.md): Buttons, neumorphic, soft-ui, pill, accent-text - [Soft toggle chip](https://designforai.dev/snippet/btn-043.md): Buttons, neumorphic, soft-ui, small, chip - [Neo-brutal yellow](https://designforai.dev/snippet/btn-044.md): Buttons, brutalist, neo-brutalist, hard-shadow, square - [Neo-brutal pink pill](https://designforai.dev/snippet/btn-045.md): Buttons, brutalist, neo-brutalist, pill, hard-shadow - [Brutalist mono](https://designforai.dev/snippet/btn-046.md): Buttons, brutalist, monospace, square, inverted-hover - [Neo-brutal colour shadow](https://designforai.dev/snippet/btn-047.md): Buttons, brutalist, neo-brutalist, coloured-shadow, rounded - [Brutalist stripe](https://designforai.dev/snippet/btn-048.md): Buttons, brutalist, pattern, stripes, square - [Neo-brutal dark](https://designforai.dev/snippet/btn-049.md): Buttons, brutalist, neo-brutalist, dark, hard-shadow - [Brutalist tag](https://designforai.dev/snippet/btn-050.md): Buttons, brutalist, small, tag, rotate - [Candy press](https://designforai.dev/snippet/btn-051.md): Buttons, 3d, press-down, rounded, bottom-edge - [Keycap](https://designforai.dev/snippet/btn-052.md): Buttons, 3d, press-down, keyboard, square - [Arcade red](https://designforai.dev/snippet/btn-053.md): Buttons, 3d, press-down, circle, arcade - [Tilt card press](https://designforai.dev/snippet/btn-054.md): Buttons, 3d, perspective, tilt, hover-rotate - [Stacked layers](https://designforai.dev/snippet/btn-055.md): Buttons, 3d, layered, offset, retro - [Bevel chrome](https://designforai.dev/snippet/btn-056.md): Buttons, 3d, bevel, chrome, retro - [Ember slide fill](https://designforai.dev/snippet/btn-057.md): Buttons, hover-fill, slide-left, outline, rounded - [Rise fill](https://designforai.dev/snippet/btn-058.md): Buttons, hover-fill, slide-up, outline, square - [Center bloom](https://designforai.dev/snippet/btn-059.md): Buttons, hover-fill, grow-center, pill, scale - [Diagonal wipe](https://designforai.dev/snippet/btn-060.md): Buttons, hover-fill, diagonal, skew, rectangle - [Split curtain](https://designforai.dev/snippet/btn-061.md): Buttons, hover-fill, split, two-panels, outline - [Top-down shutter](https://designforai.dev/snippet/btn-062.md): Buttons, hover-fill, slide-down, solid, dark - [Corner sweep](https://designforai.dev/snippet/btn-063.md): Buttons, hover-fill, corner, circle-grow, rounded - [Text swap slide](https://designforai.dev/snippet/btn-064.md): Buttons, hover-fill, text-swap, slide-up, solid - [Underline grow](https://designforai.dev/snippet/btn-065.md): Buttons, underline, text-button, border-draw, minimal - [Underline from centre](https://designforai.dev/snippet/btn-066.md): Buttons, underline, text-button, border-draw, center-origin - [Border trace](https://designforai.dev/snippet/btn-067.md): Buttons, border-draw, outline, corners, animated-border - [Bracket reveal](https://designforai.dev/snippet/btn-068.md): Buttons, border-draw, brackets, text-button, minimal - [Double underline](https://designforai.dev/snippet/btn-069.md): Buttons, underline, text-button, two-lines, offset - [Highlighter swipe](https://designforai.dev/snippet/btn-070.md): Buttons, underline, highlight, text-button, marker - [Sheen sweep dark](https://designforai.dev/snippet/btn-071.md): Buttons, shine, sheen, solid, dark, sweep - [Continuous shimmer](https://designforai.dev/snippet/btn-072.md): Buttons, shine, shimmer, animated, gradient, loop - [Glossy top-light](https://designforai.dev/snippet/btn-073.md): Buttons, shine, gloss, static-highlight, rounded - [Light sweep outline](https://designforai.dev/snippet/btn-074.md): Buttons, shine, sheen, outline, border-sweep - [Sheen on gold pill](https://designforai.dev/snippet/btn-075.md): Buttons, shine, sheen, pill, gradient, luxury - [Arrow nudge](https://designforai.dev/snippet/btn-076.md): Buttons, icon, arrow, inline-svg, nudge - [Plus rotate](https://designforai.dev/snippet/btn-077.md): Buttons, icon, plus, inline-svg, rotate, circle - [Download drop](https://designforai.dev/snippet/btn-078.md): Buttons, icon, download, inline-svg, bounce - [Icon-only ghost square](https://designforai.dev/snippet/btn-079.md): Buttons, icon, ghost, square, toolbar - [Icon box split](https://designforai.dev/snippet/btn-080.md): Buttons, icon, arrow, boxed-icon, two-part - [Chevron reveal](https://designforai.dev/snippet/btn-081.md): Buttons, icon, chevron, hidden-icon, width-grow - [Ring spinner loading](https://designforai.dev/snippet/btn-082.md): Buttons, loading, spinner, css-animation, solid - [Three-dot loader](https://designforai.dev/snippet/btn-083.md): Buttons, loading, dots, css-animation, pill - [Progress bar fill](https://designforai.dev/snippet/btn-084.md): Buttons, loading, progress, animated-fill, outline - [Pulse loading ghost](https://designforai.dev/snippet/btn-085.md): Buttons, loading, pulse, skeleton, ghost - [Switch toggle (checkbox)](https://designforai.dev/snippet/btn-086.md): Buttons, toggle, switch, checkbox, pill - [Toggle pill (pressed state)](https://designforai.dev/snippet/btn-087.md): Buttons, toggle, pressed, aria-pressed, pill - [Sliding tab toggle](https://designforai.dev/snippet/btn-088.md): Buttons, toggle, two-option, radio, segmented, slider - [Split action](https://designforai.dev/snippet/btn-089.md): Buttons, split, dual, dropdown, solid - [Dual pair](https://designforai.dev/snippet/btn-090.md): Buttons, split, dual, primary-secondary, pair - [Split with counter](https://designforai.dev/snippet/btn-091.md): Buttons, split, dual, counter, badge - [Pixel 8-bit](https://designforai.dev/snippet/btn-092.md): Buttons, retro, pixel, 8-bit, stepped-corners - [Terminal prompt](https://designforai.dev/snippet/btn-093.md): Buttons, retro, terminal, monospace, blink - [CRT amber](https://designforai.dev/snippet/btn-094.md): Buttons, retro, terminal, amber, scanlines - [Win95 grey](https://designforai.dev/snippet/btn-095.md): Buttons, retro, win95, bevel, system - [Midnight primary](https://designforai.dev/snippet/btn-096.md): Buttons, dark-mode, solid, rounded, glow - [Midnight secondary](https://designforai.dev/snippet/btn-097.md): Buttons, dark-mode, outline, subtle, rounded - [Segmented three-way](https://designforai.dev/snippet/btn-098.md): Buttons, group, segmented, radio, three-options - [Joined button group](https://designforai.dev/snippet/btn-099.md): Buttons, group, joined, outline, toolbar - [Pill filter group](https://designforai.dev/snippet/btn-100.md): Buttons, group, pills, checkbox, multi-select - [Conic ring spin](https://designforai.dev/snippet/btn-101.md): Buttons, gradient-border, animated, pill, conic, property - [Conic wedge orbit](https://designforai.dev/snippet/btn-102.md): Buttons, gradient-border, animated, rounded, conic, property, hover-start - [Halo ring](https://designforai.dev/snippet/btn-103.md): Buttons, gradient-border, animated, pill, conic, glow, property - [Dashed gradient march](https://designforai.dev/snippet/btn-104.md): Buttons, gradient-border, animated, rectangle, conic, dashed - [Highlight sweep](https://designforai.dev/snippet/btn-105.md): Buttons, gradient-border, animated, rounded, conic, monochrome, property - [Neon pulse cyan](https://designforai.dev/snippet/btn-106.md): Buttons, glow, neon, pill, pulse, dark - [Magenta heartbeat](https://designforai.dev/snippet/btn-107.md): Buttons, glow, neon, rounded, pulse, ring - [Lime tube flicker](https://designforai.dev/snippet/btn-108.md): Buttons, glow, neon, rectangle, dark, flicker - [Ember breathing](https://designforai.dev/snippet/btn-109.md): Buttons, glow, warm, pill, pulse, soft-shadow - [Ghost glow edge](https://designforai.dev/snippet/btn-110.md): Buttons, glow, outline, rounded, subtle, light-background - [Blob morph](https://designforai.dev/snippet/btn-111.md): Buttons, liquid, blob, morph, border-radius, organic - [Liquid pill wobble](https://designforai.dev/snippet/btn-112.md): Buttons, liquid, pill, morph, animated, loop - [Lava lamp interior](https://designforai.dev/snippet/btn-113.md): Buttons, liquid, pill, animated, gradient, blob-inside - [Droplet corner](https://designforai.dev/snippet/btn-114.md): Buttons, liquid, morph, rounded, asymmetric, spring - [Squircle squeeze](https://designforai.dev/snippet/btn-115.md): Buttons, liquid, squircle, morph, scale, soft-body - [Vertical text swap](https://designforai.dev/snippet/btn-116.md): Buttons, text-swap, slide, rectangle, two-labels - [Cube face flip](https://designforai.dev/snippet/btn-117.md): Buttons, text-swap, flip, 3d, rounded, two-labels - [Tracking reveal](https://designforai.dev/snippet/btn-118.md): Buttons, text-swap, expand, pill, uppercase, letter-spacing - [Strike and replace](https://designforai.dev/snippet/btn-119.md): Buttons, text-swap, strikethrough, rectangle, price, reveal - [Typewriter erase](https://designforai.dev/snippet/btn-120.md): Buttons, text-swap, typewriter, mono, steps, terminal - [Tilt card lift](https://designforai.dev/snippet/btn-121.md): Buttons, tilt, 3d, rounded, perspective, lift - [Magnetic pull](https://designforai.dev/snippet/btn-122.md): Buttons, tilt, magnetic, pill, translate, overshoot - [Parallax layers](https://designforai.dev/snippet/btn-123.md): Buttons, tilt, 3d, layered, rectangle, depth - [Pendulum swing](https://designforai.dev/snippet/btn-124.md): Buttons, tilt, rotate, rounded, hinge, animated - [Skew lean](https://designforai.dev/snippet/btn-125.md): Buttons, tilt, skew, rectangle, italic, shadow-offset - [Brushed metal](https://designforai.dev/snippet/btn-126.md): Buttons, skeuomorphic, embossed, rectangle, metallic, gradient - [Leather stitch](https://designforai.dev/snippet/btn-127.md): Buttons, skeuomorphic, embossed, rounded, stitched, warm - [Embossed paper](https://designforai.dev/snippet/btn-128.md): Buttons, skeuomorphic, embossed, rectangle, letterpress, light - [Glass dome key](https://designforai.dev/snippet/btn-129.md): Buttons, skeuomorphic, embossed, pill, glossy, jelly - [Pressed dial](https://designforai.dev/snippet/btn-130.md): Buttons, skeuomorphic, embossed, circle, icon, ring - [Clay bubble](https://designforai.dev/snippet/btn-131.md): Buttons, claymorphism, pill, soft, inset-shadow, pastel - [Clay peach](https://designforai.dev/snippet/btn-132.md): Buttons, claymorphism, rounded, soft, pastel, warm - [Clay mint icon](https://designforai.dev/snippet/btn-133.md): Buttons, claymorphism, circle, icon, soft, pastel - [Clay lavender wide](https://designforai.dev/snippet/btn-134.md): Buttons, claymorphism, full-width, soft, pastel, subtitle - [Clay dark mode](https://designforai.dev/snippet/btn-135.md): Buttons, claymorphism, rounded, dark, soft, inset-shadow - [Aurora drift](https://designforai.dev/snippet/btn-136.md): Buttons, aurora, mesh, pill, animated, gradient - [Mesh sunrise](https://designforai.dev/snippet/btn-137.md): Buttons, aurora, mesh, rounded, warm, static-with-hover - [Northern lights bar](https://designforai.dev/snippet/btn-138.md): Buttons, aurora, full-width, animated, dark, gradient-sweep - [Holographic foil](https://designforai.dev/snippet/btn-139.md): Buttons, aurora, holographic, pill, animated, iridescent - [Aurora outline text](https://designforai.dev/snippet/btn-140.md): Buttons, aurora, outline, gradient-text, rounded, animated - [Glitch slice](https://designforai.dev/snippet/btn-141.md): Buttons, cyberpunk, glitch, rectangle, clip-path, animated - [Chamfered corners](https://designforai.dev/snippet/btn-142.md): Buttons, cyberpunk, clip-path, rectangle, angular, hud - [Scanline sweep](https://designforai.dev/snippet/btn-143.md): Buttons, cyberpunk, scanline, rectangle, dark, animated - [Notched tag](https://designforai.dev/snippet/btn-144.md): Buttons, cyberpunk, clip-path, rectangle, notch, label - [RGB split hover](https://designforai.dev/snippet/btn-145.md): Buttons, cyberpunk, glitch, pill, chromatic, text-shadow - [Inset fill sweep](https://designforai.dev/snippet/btn-146.md): Buttons, inset-fill, outline, rectangle, box-shadow, left-to-right - [Inset fill vertical](https://designforai.dev/snippet/btn-147.md): Buttons, inset-fill, outline, pill, box-shadow, bottom-up - [Inset fill centre](https://designforai.dev/snippet/btn-148.md): Buttons, inset-fill, outline, rounded, box-shadow, spread-from-centre - [Inset fill diagonal duo](https://designforai.dev/snippet/btn-149.md): Buttons, inset-fill, outline, rectangle, box-shadow, two-shadows - [Inset fill ring pop](https://designforai.dev/snippet/btn-150.md): Buttons, inset-fill, outline, circle, icon, box-shadow - [Corner brackets](https://designforai.dev/snippet/btn-151.md): Buttons, bracket, corner-mark, rectangle, outline, hover-expand - [Four-corner ticks](https://designforai.dev/snippet/btn-152.md): Buttons, bracket, corner-mark, rectangle, outline, viewfinder - [Bracket text wrap](https://designforai.dev/snippet/btn-153.md): Buttons, bracket, corner-mark, text, minimal, slide-in - [Corner dot markers](https://designforai.dev/snippet/btn-154.md): Buttons, bracket, corner-mark, rounded, dots, outline - [Angle brackets arrow](https://designforai.dev/snippet/btn-155.md): Buttons, bracket, corner-mark, text, code, chevron - [Sticker tilt](https://designforai.dev/snippet/btn-156.md): Buttons, sticker, badge, rotation, rounded, white-edge - [Price tag hole](https://designforai.dev/snippet/btn-157.md): Buttons, sticker, badge, tag, rotation, clip-path - [Stamp badge](https://designforai.dev/snippet/btn-158.md): Buttons, sticker, badge, circle, rotation, double-ring - [Ribbon corner](https://designforai.dev/snippet/btn-159.md): Buttons, sticker, badge, ribbon, rotation, rectangle - [Puffy sticker outline](https://designforai.dev/snippet/btn-160.md): Buttons, sticker, badge, pill, rotation, outline-stroke - [Chip close soft](https://designforai.dev/snippet/btn-161.md): Buttons, chip, pill, close-x, small, tinted - [Chip close outline](https://designforai.dev/snippet/btn-162.md): Buttons, chip, pill, close-x, outline, small - [Chip selectable check](https://designforai.dev/snippet/btn-163.md): Buttons, chip, pill, toggle, small, checkbox-driven - [Chip with count and close](https://designforai.dev/snippet/btn-164.md): Buttons, chip, rounded, close-x, count, small - [Chip avatar close](https://designforai.dev/snippet/btn-165.md): Buttons, chip, pill, close-x, avatar, small - [FAB classic](https://designforai.dev/snippet/btn-166.md): Buttons, fab, circle, icon, elevated, floating - [FAB extended](https://designforai.dev/snippet/btn-167.md): Buttons, fab, pill, icon, label, floating - [FAB rotating plus](https://designforai.dev/snippet/btn-168.md): Buttons, fab, circle, icon, rotate, floating - [FAB squircle gradient](https://designforai.dev/snippet/btn-169.md): Buttons, fab, squircle, icon, gradient, floating - [FAB mini stack](https://designforai.dev/snippet/btn-170.md): Buttons, fab, circle, icon, small, group - [Arrow link slide](https://designforai.dev/snippet/btn-171.md): Buttons, link-style, arrow, text, minimal, slide - [Arrow swap in](https://designforai.dev/snippet/btn-172.md): Buttons, link-style, arrow, text, reveal, underline - [Arrow circle grow](https://designforai.dev/snippet/btn-173.md): Buttons, link-style, arrow, icon-circle, text, expand - [Arrow long line](https://designforai.dev/snippet/btn-174.md): Buttons, link-style, arrow, line, editorial, expand - [Arrow bounce](https://designforai.dev/snippet/btn-175.md): Buttons, link-style, arrow, text, animated, bounce - [Sparkle AI gradient](https://designforai.dev/snippet/btn-176.md): Buttons, sparkle, ai, pill, gradient, icon, animated - [Sparkle AI outline](https://designforai.dev/snippet/btn-177.md): Buttons, sparkle, ai, rounded, outline, gradient-border, icon - [Sparkle orbit](https://designforai.dev/snippet/btn-178.md): Buttons, sparkle, ai, pill, dark, animated, orbit - [Sparkle shimmer text](https://designforai.dev/snippet/btn-179.md): Buttons, sparkle, ai, rounded, shimmer, light - [Sparkle magic wand](https://designforai.dev/snippet/btn-180.md): Buttons, sparkle, ai, pill, icon, rotate, gradient - [Hold-to-confirm fill](https://designforai.dev/snippet/btn-181.md): Buttons, progress, hold, rectangle, fill, active-driven - [Progress stripe static](https://designforai.dev/snippet/btn-182.md): Buttons, progress, rectangle, fill, custom-property, percentage - [Progress ring conic](https://designforai.dev/snippet/btn-183.md): Buttons, progress, circle, ring, conic, custom-property - [Indeterminate stripes](https://designforai.dev/snippet/btn-184.md): Buttons, progress, rectangle, striped, animated, busy - [Countdown drain](https://designforai.dev/snippet/btn-185.md): Buttons, progress, pill, drain, animated, timed - [Share pill icon](https://designforai.dev/snippet/btn-186.md): Buttons, share, pill, icon, outline, generic - [Copy link feedback](https://designforai.dev/snippet/btn-187.md): Buttons, share, copy-link, rounded, icon, text-swap - [Share row split](https://designforai.dev/snippet/btn-188.md): Buttons, share, group, rounded, icon-buttons, generic - [Share fan-out hover](https://designforai.dev/snippet/btn-189.md): Buttons, share, group, reveal, icon-buttons, hover-expand - [Share count pill](https://designforai.dev/snippet/btn-190.md): Buttons, share, pill, count, icon, split - [CTA banner subtitle](https://designforai.dev/snippet/btn-191.md): Buttons, cta, banner, wide, subtitle, dark - [CTA banner arrow end](https://designforai.dev/snippet/btn-192.md): Buttons, cta, banner, wide, subtitle, arrow, light - [CTA banner gradient](https://designforai.dev/snippet/btn-193.md): Buttons, cta, banner, wide, subtitle, gradient, centered - [CTA banner icon left](https://designforai.dev/snippet/btn-194.md): Buttons, cta, banner, wide, subtitle, icon, soft - [Micro pill](https://designforai.dev/snippet/btn-195.md): Buttons, xs, micro, pill, tiny, neutral - [Micro kbd](https://designforai.dev/snippet/btn-196.md): Buttons, xs, micro, keyboard, mono, rectangle - [Micro icon square](https://designforai.dev/snippet/btn-197.md): Buttons, xs, micro, icon, square, ghost - [color-mix tint scale](https://designforai.dev/snippet/btn-198.md): Buttons, modern-css, color-mix, rounded, single-hue, fallback - [light-dark auto theme](https://designforai.dev/snippet/btn-199.md): Buttons, modern-css, light-dark, rounded, theme-aware, fallback - [corner-shape squircle](https://designforai.dev/snippet/btn-200.md): Buttons, modern-css, corner-shape, oklch, squircle, fallback - [Quiet content](https://designforai.dev/snippet/card-001.md): Cards, content, basic, image-top, light, hover-lift - [Tagged photo](https://designforai.dev/snippet/card-002.md): Cards, content, basic, image-top, tag, light - [Bottom fade image](https://designforai.dev/snippet/card-003.md): Cards, content, image-top, overlay, dark, gradient - [Soft shadow footer](https://designforai.dev/snippet/card-004.md): Cards, content, basic, footer, light, soft-shadow - [Hover zoom image](https://designforai.dev/snippet/card-005.md): Cards, content, basic, image-top, hover-zoom, light - [Media left row](https://designforai.dev/snippet/card-006.md): Cards, horizontal, media-left, light, hover-lift - [Thumbnail row](https://designforai.dev/snippet/card-007.md): Cards, horizontal, media-left, compact, list-item, light - [Dark accent bar](https://designforai.dev/snippet/card-008.md): Cards, horizontal, media-left, dark, accent - [Media right](https://designforai.dev/snippet/card-009.md): Cards, horizontal, media-right, light, split - [Centered avatar](https://designforai.dev/snippet/card-010.md): Cards, profile, avatar, centered, light, cta - [Banner stats profile](https://designforai.dev/snippet/card-011.md): Cards, profile, avatar, banner, stats, light - [Team member row](https://designforai.dev/snippet/card-012.md): Cards, profile, avatar, horizontal, socials, light - [Status dot profile](https://designforai.dev/snippet/card-013.md): Cards, profile, avatar, dark, status, glow - [Square avatar ID](https://designforai.dev/snippet/card-014.md): Cards, profile, id-card, mono, minimal, light - [Classic pricing](https://designforai.dev/snippet/card-015.md): Cards, pricing, feature-list, cta, light - [Featured pro tier](https://designforai.dev/snippet/card-016.md): Cards, pricing, featured, badge, dark, gradient - [Line pricing](https://designforai.dev/snippet/card-017.md): Cards, pricing, minimal, mono, light, hover-border - [Tiered divider](https://designforai.dev/snippet/card-018.md): Cards, pricing, tiered, accent, light, shadow - [Per seat pricing](https://designforai.dev/snippet/card-019.md): Cards, pricing, compact, per-seat, light, badge - [Badge add to cart](https://designforai.dev/snippet/card-020.md): Cards, product, ecommerce, badge, price, light, hover-lift - [Slide-up add](https://designforai.dev/snippet/card-021.md): Cards, product, ecommerce, hover-reveal, minimal, light - [Rating swatches](https://designforai.dev/snippet/card-022.md): Cards, product, ecommerce, rating, swatches, light - [Discount ribbon](https://designforai.dev/snippet/card-023.md): Cards, product, ecommerce, dark, ribbon, discount - [Cart line](https://designforai.dev/snippet/card-024.md): Cards, product, cart-item, horizontal, quantity, light - [Big quote mark](https://designforai.dev/snippet/card-025.md): Cards, testimonial, quote, light, serif - [Dark stars quote](https://designforai.dev/snippet/card-026.md): Cards, testimonial, quote, dark, stars, avatar - [Accent bar quote](https://designforai.dev/snippet/card-027.md): Cards, testimonial, quote, accent, light, logo - [Frosted glass](https://designforai.dev/snippet/card-028.md): Cards, glass, glassmorphism, blur, gradient, light - [Night glass blobs](https://designforai.dev/snippet/card-029.md): Cards, glass, glassmorphism, dark, blur, highlight - [Soft embossed](https://designforai.dev/snippet/card-030.md): Cards, neumorphic, soft-ui, light, embossed, button - [Dark embossed stat](https://designforai.dev/snippet/card-031.md): Cards, neumorphic, soft-ui, dark, stat, embossed - [Hard shadow brutal](https://designforai.dev/snippet/card-032.md): Cards, brutalist, neo-brutalist, hard-shadow, thick-border, light - [Sticker tag poster](https://designforai.dev/snippet/card-033.md): Cards, brutalist, neo-brutalist, image-top, sticker, hard-shadow - [Spinning conic edge](https://designforai.dev/snippet/card-034.md): Cards, gradient-border, conic, animated, dark, property - [Clipped gradient border](https://designforai.dev/snippet/card-035.md): Cards, gradient-border, background-clip, light, hover-shift - [Tinted glow lift](https://designforai.dev/snippet/card-036.md): Cards, hover-lift, glow, image-top, light, shadow - [Perspective tilt](https://designforai.dev/snippet/card-037.md): Cards, 3d, tilt, perspective, hover, dark, shine - [Hover flip](https://designforai.dev/snippet/card-038.md): Cards, flip, 3d, hover, two-sided, light - [Tap to flip](https://designforai.dev/snippet/card-039.md): Cards, flip, 3d, toggle, checkbox, no-js, dark - [Sliding caption](https://designforai.dev/snippet/card-040.md): Cards, image, overlay, hover-reveal, caption, slide-up - [Darken overlay](https://designforai.dev/snippet/card-041.md): Cards, image, overlay, hover-reveal, icon, dark, zoom - [Bento stat tiles](https://designforai.dev/snippet/card-042.md): Cards, bento, grid, tiles, layout, light - [Dotted bento tile](https://designforai.dev/snippet/card-043.md): Cards, bento, feature, pattern, dots, light - [Success toast](https://designforai.dev/snippet/card-044.md): Cards, toast, notification, success, light, icon - [Countdown error toast](https://designforai.dev/snippet/card-045.md): Cards, toast, notification, error, dark, progress, animated - [Release timeline](https://designforai.dev/snippet/card-046.md): Cards, timeline, steps, list, light, dots - [Step wizard](https://designforai.dev/snippet/card-047.md): Cards, steps, progress, wizard, light, numbered - [System theme aware](https://designforai.dev/snippet/card-048.md): Cards, dark-mode, theme, tokens, media-query, adaptive - [Light dark colors](https://designforai.dev/snippet/card-049.md): Cards, dark-mode, theme, light-dark, color-scheme, modern-css - [Shimmer skeleton](https://designforai.dev/snippet/card-050.md): Cards, skeleton, loading, shimmer, placeholder, animated - [Pulse skeleton row](https://designforai.dev/snippet/card-051.md): Cards, skeleton, loading, pulse, list-item, placeholder - [File download](https://designforai.dev/snippet/card-052.md): Cards, file, download, document, light, icon - [Upload dropzone](https://designforai.dev/snippet/card-053.md): Cards, file, upload, dropzone, dashed, light, hover - [Link preview](https://designforai.dev/snippet/card-054.md): Cards, link-preview, og, bookmark, image-top, light - [Favicon link chip](https://designforai.dev/snippet/card-055.md): Cards, link-preview, compact, inline, favicon, light - [Big date](https://designforai.dev/snippet/card-056.md): Cards, event, date, calendar, big-number, light - [Time strip](https://designforai.dev/snippet/card-057.md): Cards, event, date, dark, time-strip, cta - [Music player](https://designforai.dev/snippet/card-058.md): Cards, music, player, media, dark, progress, controls - [Equalizer now playing](https://designforai.dev/snippet/card-059.md): Cards, music, now-playing, mini, equalizer, animated, light - [Delta pill](https://designforai.dev/snippet/card-060.md): Cards, stat, kpi, metric, delta, light, dashboard - [Sparkline stat](https://designforai.dev/snippet/card-061.md): Cards, stat, kpi, sparkline, chart, light, svg - [Progress ring stat](https://designforai.dev/snippet/card-062.md): Cards, stat, kpi, progress, ring, conic, light - [Icon tile feature](https://designforai.dev/snippet/card-063.md): Cards, feature, icon, light, marketing, hover-lift - [Gradient icon](https://designforai.dev/snippet/card-064.md): Cards, feature, icon, dark, gradient, arrow, hover - [Author meta blog](https://designforai.dev/snippet/card-065.md): Cards, blog, article, meta, avatar, image-top, light - [Editorial essay row](https://designforai.dev/snippet/card-066.md): Cards, blog, article, editorial, serif, horizontal, meta - [Enterprise two column](https://designforai.dev/snippet/card-067.md): Cards, pricing, enterprise, feature-list, cta, light, gradient-top - [Gradient ring skills](https://designforai.dev/snippet/card-068.md): Cards, profile, avatar, gradient-ring, tags, light, hover - [Container query stack](https://designforai.dev/snippet/card-069.md): Cards, container-query, responsive, modern-css, adaptive, light - [Tick to select](https://designforai.dev/snippet/card-070.md): Cards, has, selectable, checkbox, state, modern-css, light - [Radio plan picker](https://designforai.dev/snippet/card-071.md): Cards, has, radio, pricing, selectable, state, light - [Subgrid aligned row](https://designforai.dev/snippet/card-072.md): Cards, subgrid, grid, aligned, layout, modern-css, light - [Squircle corners](https://designforai.dev/snippet/card-073.md): Cards, corner-shape, squircle, modern-css, fallback, light - [Bevel ticket](https://designforai.dev/snippet/card-074.md): Cards, corner-shape, bevel, ticket, modern-css, fallback, dark - [Notched boarding pass](https://designforai.dev/snippet/card-075.md): Cards, ticket, notches, mask, dashed, light - [Dashed coupon code](https://designforai.dev/snippet/card-076.md): Cards, coupon, discount, dashed, promo, light - [Social post](https://designforai.dev/snippet/card-077.md): Cards, social, post, feed, avatar, actions, light - [Nested comment thread](https://designforai.dev/snippet/card-078.md): Cards, comment, thread, nested, avatar, light - [Chat bubbles](https://designforai.dev/snippet/card-079.md): Cards, chat, messages, bubbles, dark, conversation - [Weather widget](https://designforai.dev/snippet/card-080.md): Cards, weather, widget, gradient, big-number, svg, light - [Recipe chips](https://designforai.dev/snippet/card-081.md): Cards, recipe, food, chips, image-top, light - [Job listing](https://designforai.dev/snippet/card-082.md): Cards, job, listing, tags, logo, light, hover - [Course progress](https://designforai.dev/snippet/card-083.md): Cards, course, learning, progress, image-top, light - [Ticked task](https://designforai.dev/snippet/card-084.md): Cards, task, todo, checkbox, has, state, light - [Sticky note](https://designforai.dev/snippet/card-085.md): Cards, sticky-note, paper, rotated, handwritten, yellow - [Polaroid frame](https://designforai.dev/snippet/card-086.md): Cards, photo, polaroid, frame, rotated, light, caption - [Glossy payment](https://designforai.dev/snippet/card-087.md): Cards, payment, credit-card, dark, gradient, chip, glossy - [Fanned deck](https://designforai.dev/snippet/card-088.md): Cards, stack, deck, layered, hover, light, playful - [Corner spotlight](https://designforai.dev/snippet/card-089.md): Cards, spotlight, glow, radial, hover, dark, subtle - [Drifting gradient](https://designforai.dev/snippet/card-090.md): Cards, gradient, animated, keyframes, colorful, cta - [Paper grain noise](https://designforai.dev/snippet/card-091.md): Cards, texture, grain, noise, svg, warm, editorial - [Neon tube edge](https://designforai.dev/snippet/card-092.md): Cards, neon, glow, dark, cyberpunk, border-glow, hover - [Add new placeholder](https://designforai.dev/snippet/card-093.md): Cards, placeholder, add-new, dashed, empty-state, light - [Logo mini quote](https://designforai.dev/snippet/card-094.md): Cards, testimonial, logo, mini, quote, light, row - [Version changelog](https://designforai.dev/snippet/card-095.md): Cards, changelog, release, version, badge, list, light - [Before after metrics](https://designforai.dev/snippet/card-096.md): Cards, comparison, two-column, metrics, light, versus - [App store row](https://designforai.dev/snippet/card-097.md): Cards, app, install, icon, rating, light, row - [Play thumbnail](https://designforai.dev/snippet/card-098.md): Cards, video, thumbnail, play, duration, dark, hover - [Map pin address](https://designforai.dev/snippet/card-099.md): Cards, location, map, pin, svg, address, light - [Newsletter signup](https://designforai.dev/snippet/card-100.md): Cards, newsletter, form, input, cta, dark, gradient ## Shelves - [Pill buttons](https://designforai.dev/buttons/pill): Fully rounded buttons for chips, filters, toggles and the odd share count: outlined, solid, two-tone and glass. Copy the CSS, or the prompt that rebuilds one in your AI coding tool. - [Outline buttons](https://designforai.dev/buttons/outline): Outline and ghost buttons: hairline, dashed, double and fill-on-hover borders, for the secondary action that should not shout. - [Gradient buttons](https://designforai.dev/buttons/gradient): Gradient fills and gradient borders, including conic borders that rotate with @property and mesh washes that stay readable. - [Icon buttons](https://designforai.dev/buttons/icon): Buttons that carry an inline SVG: arrows that nudge, plus signs that rotate, downloads that fill, all with an accessible label. - [Animated buttons](https://designforai.dev/buttons/animated): Shimmers, spinners, progress fills and pulses, each with a prefers-reduced-motion guard already in the copied CSS. - [Solid buttons](https://designforai.dev/buttons/solid): Flat, filled buttons in one colour with a proper hover, focus and active state. The workhorse shelf. - [3D buttons](https://designforai.dev/buttons/3d): Buttons with a physical edge: pressed states, bevels, drop faces and tilt, built with box-shadow and translate, no images. - [Glass buttons](https://designforai.dev/buttons/glass): Translucent fills, backdrop blur and light edges. They only work over colour, so each demo brings its own background and a solid fallback. - [Neumorphic buttons](https://designforai.dev/buttons/neumorphic): Soft UI buttons that rise out of the page with a light and a dark shadow, and sink in on press. - [Brutalist buttons](https://designforai.dev/buttons/brutalist): Thick borders, hard offset shadows, zero radius and loud fills. The button moves into its shadow when pressed. - [Dark buttons](https://designforai.dev/buttons/dark): Buttons designed for dark interfaces: ink fills, hairline edges and glows that read on near-black. - [Neon buttons](https://designforai.dev/buttons/neon): Tube outlines, glow halos and flicker, kept legible with a solid text colour under the glow. - [Pricing cards](https://designforai.dev/cards/pricing): Tiers, a highlighted plan, feature lists and a CTA, each one copyable on its own. - [Profile cards](https://designforai.dev/cards/profile): Avatar, name, role and a status or follow action, from ID-card mono to soft rounded. - [Image cards](https://designforai.dev/cards/image): Cards led by a picture: image on top, full-bleed covers and text over a fade or a darken overlay. - [Horizontal cards](https://designforai.dev/cards/horizontal): Media on one side, text on the other, for lists, feeds and search results. - [Hover cards](https://designforai.dev/cards/hover): Cards that react on hover: lifts, flips, reveals and border changes, each with a reduced-motion guard. - [Dark cards](https://designforai.dev/cards/dark): Cards for dark interfaces: raised surfaces, hairline borders and glows on near-black. ## Styles - [Glassmorphism](https://designforai.dev/style/glassmorphism.md): frosted glass UI, glass cards, backdrop blur UI, translucent UI - [Liquid glass](https://designforai.dev/style/liquid-glass.md): Apple liquid glass, iOS 26 glass, refractive UI, lensing glass - [Neumorphism](https://designforai.dev/style/neumorphism.md): soft UI, neomorphism, extruded UI, soft shadow UI - [Claymorphism](https://designforai.dev/style/claymorphism.md): clay UI, 3D clay, inflated UI, puffy UI - [Neo-brutalism](https://designforai.dev/style/neo-brutalism.md): neubrutalism, neo-brutalist web, Gumroad style, thick-border UI - [Classic brutalism](https://designforai.dev/style/classic-brutalism.md): raw web, brutalist websites, anti-design, default-HTML aesthetic, web 1.0 brutalism - [Swiss / International Typographic Style](https://designforai.dev/style/swiss-international-typographic-style.md): Swiss style, International Style, grid design, Helvetica design, Müller-Brockmann style - [Editorial / magazine](https://designforai.dev/style/editorial-magazine.md): editorial design, magazine layout, newspaper web, long-form editorial - [Minimalism](https://designforai.dev/style/minimalism.md): minimal web design, less is more, clean UI, white space design - [Maximalism](https://designforai.dev/style/maximalism.md): maximalist web, more is more, anti-minimalism, visual overload design - [Bento grid](https://designforai.dev/style/bento-grid.md): bento box layout, bento UI, Apple keynote grid, feature grid tiles - [Midnight SaaS](https://designforai.dev/style/midnight-saas.md): Linear style, dark SaaS, dark mode developer landing, dark product UI, Raycast look - [Terminal / hacker](https://designforai.dev/style/terminal-hacker.md): hacker aesthetic, CLI UI, command-line website, green screen, TUI style - [Retro pixel / 8-bit](https://designforai.dev/style/retro-pixel-8-bit.md): pixel art UI, 8-bit design, NES style, 16-bit, retro game UI - [Y2K / Frutiger Aero](https://designforai.dev/style/y2k-frutiger-aero.md): Y2K web, Frutiger Aero, aero glass, Windows Vista style, 2000s futurism, bubble UI - [Vaporwave](https://designforai.dev/style/vaporwave.md): vaporwave aesthetic, a e s t h e t i c web, synthwave-adjacent, Windows 95 retro - [Cyberpunk / neon](https://designforai.dev/style/cyberpunk-neon.md): cyberpunk UI, neon UI, synthwave, glitch design, night city - [Memphis](https://designforai.dev/style/memphis.md): Memphis design, Memphis Group style, 80s postmodern, squiggle design - [Bauhaus](https://designforai.dev/style/bauhaus.md): Bauhaus design, Bauhaus web, geometric modernism, primary colour design - [Art Deco](https://designforai.dev/style/art-deco.md): Art Deco web, Gatsby style, 1920s luxury, geometric luxury, deco gold - [Flat 2.0](https://designforai.dev/style/flat-2-0.md): flat design 2.0, semi-flat, almost flat, flat with shadows, Material-lite - [Material 3 Expressive](https://designforai.dev/style/material-3-expressive.md): Material You, Material Design 3, M3 Expressive, Android 16 style, dynamic colour - [Skeuomorphism](https://designforai.dev/style/skeuomorphism.md): skeuomorphic design, realistic UI, iOS 6 style, leather and linen UI, skeuomorph revival - [Paper / notebook](https://designforai.dev/style/paper-notebook.md): notebook UI, ruled paper design, sketchbook web, sticky note UI, stationery style - [Cream-paper warm minimal](https://designforai.dev/style/cream-paper-warm-minimal.md): warm minimalism, cream minimal, beige UI, cozy minimal, paper-white design, quiet luxury web - [Corporate Memphis (illustration style)](https://designforai.dev/style/corporate-memphis.md): Alegria style, big tech illustration, flat people illustration, Facebook illustration style, globohomo (pejorative) - [Monochrome black and white](https://designforai.dev/style/monochrome-black-and-white.md): black and white web design, monochrome UI, achromatic design, no-colour design, greyscale site - [High-contrast accessibility](https://designforai.dev/style/high-contrast-accessibility.md): accessible design, WCAG AAA design, high contrast mode, inclusive UI, a11y-first - [Pastel soft UI](https://designforai.dev/style/pastel-soft-ui.md): pastel design, soft pastel UI, candy UI, dreamy UI, soft aesthetic, kawaii-lite - [Gradient mesh / aurora](https://designforai.dev/style/gradient-mesh-aurora.md): mesh gradient, aurora background, gradient blobs, northern lights UI, Stripe gradient - [Glass + noise grain](https://designforai.dev/style/glass-noise-grain.md): grainy glass, frosted grain UI, noise gradient UI, film grain web, textured glass - [Hand-drawn / sketch](https://designforai.dev/style/hand-drawn-sketch.md): sketchy UI, doodle design, hand-drawn website, wobbly UI, Excalidraw style - [Zine / collage](https://designforai.dev/style/zine-collage.md): zine design, punk collage, cut-and-paste web, DIY aesthetic, xerox style, riso style - [Japanese minimal (ma)](https://designforai.dev/style/japanese-minimal.md): Japanese minimalism, ma design, wabi-sabi web, zen UI, Muji style, kanso - [Scandinavian](https://designforai.dev/style/scandinavian.md): Scandi design, Nordic minimalism, hygge web, Nordic clean, Danish modern - [Industrial / blueprint / engineering](https://designforai.dev/style/industrial-blueprint-engineering.md): blueprint design, engineering UI, technical drawing style, CAD aesthetic, schematic web - [Luxury / fashion serif](https://designforai.dev/style/luxury-fashion-serif.md): luxury web design, fashion editorial, high-end brand site, couture web, quiet luxury - [Playful rounded (Duolingo-like)](https://designforai.dev/style/playful-rounded.md): Duolingo style, chunky playful UI, 3D button UI, gamified UI, friendly rounded design - [Kids / storybook](https://designforai.dev/style/kids-storybook.md): children's website design, storybook UI, picture book style, kids app design, whimsical illustration site - [Retro-futurism](https://designforai.dev/style/retro-futurism.md): retrofuturism, atomic age design, space age UI, 1950s future, Jetsons style, mid-century futurism - [Sci-fi HUD](https://designforai.dev/style/sci-fi-hud.md): HUD UI, FUI (fictional UI), heads-up display, spaceship interface, Iron Man UI, holographic UI - [Organic / blob shapes](https://designforai.dev/style/organic-blob-shapes.md): blob design, organic shapes UI, fluid shapes, amoeba shapes, morphing blobs, biomorphic web - [Typographic-only](https://designforai.dev/style/typographic-only.md): type-driven design, typography-first, text-only website, no-image design, type as image - [Photography-led](https://designforai.dev/style/photography-led.md): photo-first design, image-led website, full-bleed photography, visual storytelling site, lookbook - [Kinetic / motion-first](https://designforai.dev/style/kinetic-motion-first.md): motion design web, kinetic typography site, animated website, scroll-driven design, awwwards style - [E-ink / low-contrast calm](https://designforai.dev/style/e-ink-low-contrast-calm.md): e-ink UI, calm technology design, low-contrast UI, paper display style, reader mode, Kindle style - [Dashboard / data-dense](https://designforai.dev/style/dashboard-data-dense.md): data-dense UI, admin dashboard design, analytics UI, Bloomberg terminal style, dense enterprise UI, Tufte style - [Government / institutional clean](https://designforai.dev/style/government-institutional-clean.md): gov design system, GOV.UK style, USWDS, civic design, public sector UI, institutional web - [Neo-grotesque tech](https://designforai.dev/style/neo-grotesque-tech.md): tech grotesk style, Helvetica tech, Stripe-Vercel typography style, developer-brand grotesk, modernist SaaS - [AI startup gradient glow (the default slop look)](https://designforai.dev/style/ai-startup-gradient-glow.md): AI landing page style, purple gradient SaaS, generic AI aesthetic, gradient glow dark mode, v0 default look, AI slop design ## New in CSS - [Container queries (size) + cqi/cqw units](https://designforai.dev/css/container-queries.md): Baseline 2023 (Chrome 105, Safari 16, Firefox 110); widely available since 2025. Name-only queries (no size condition) are Baseline 2026 (Chrome 148, Safari 26.4, Firefox 149). - [:has() relational selector](https://designforai.dev/css/has-relational-selector.md): Baseline 2023 (Chrome 105, Safari 15.4, Firefox 121); widely available. - [CSS nesting](https://designforai.dev/css/nesting.md): Baseline 2023 (Chrome 120 relaxed syntax, Safari 17.2, Firefox 117); widely available. - [Cascade layers (@layer)](https://designforai.dev/css/cascade-layers.md): Baseline 2022 (Chrome 99, Safari 15.4, Firefox 97); widely available. - [Subgrid](https://designforai.dev/css/subgrid.md): Baseline 2023 (Chrome 117, Safari 16, Firefox 71); widely available. - [color-mix()](https://designforai.dev/css/color-mix.md): Baseline 2023 (Chrome 111, Safari 16.2, Firefox 113). Omitting the color space defaults to oklab (Safari 26.2, Chrome, Firefox); more than two colors is newer (Chrome 150, Firefox 150). - [oklch() / oklab() colors](https://designforai.dev/css/oklch.md): Baseline 2023 (Chrome 111, Safari 15.4, Firefox 113); widely available. - [Relative color syntax (from)](https://designforai.dev/css/relative-color-syntax.md): Baseline 2024 (Chrome 119, Safari 16.4, Firefox 128). - [light-dark()](https://designforai.dev/css/light-dark.md): Baseline 2024 (Chrome 123, Safari 17.5, Firefox 120). Image values in light-dark() are newer (Chrome 150, Firefox 150). - [@property (registered custom properties)](https://designforai.dev/css/property.md): Baseline 2024 (Chrome 85, Safari 16.4, Firefox 128). - [text-wrap: balance](https://designforai.dev/css/text-wrap.md): Baseline 2024 (Chrome 114, Safari 17.5, Firefox 121). - [Popover attribute + ::backdrop](https://designforai.dev/css/popover-attribute.md): Baseline 2024 (Chrome 114, Safari 17, Firefox 125). `popover="hint"` is not yet Baseline (see fx-042). - [ improvements (closedby, :modal, requestClose)](https://designforai.dev/css/dialog-improvements.md): `` + `:modal` Baseline 2022. `closedby` attribute: Chrome 134, Firefox 137; Safari pending (Interop 2026 item), so not Baseline as of 2026-09. - [@starting-style + transition-behavior: allow-discrete](https://designforai.dev/css/starting-style.md): Baseline 2024 (Chrome 117, Safari 17.5, Firefox 129). - [inert attribute](https://designforai.dev/css/inert-attribute.md): Baseline 2023 (Chrome 102, Safari 15.5, Firefox 112); widely available. - [:user-valid / :user-invalid](https://designforai.dev/css/user-valid-user-invalid.md): Baseline 2023 (Chrome 119, Safari 16.5, Firefox 88); `:user-invalid` widely available since May 2026. - [accent-color](https://designforai.dev/css/accent-color.md): Baseline 2022 (Chrome 93, Safari 15.4, Firefox 92); widely available. Safari 26.2 added automatic legibility adjustment. - [Stepped value functions: round(), mod(), rem(), abs(), sign()](https://designforai.dev/css/stepped-value-functions.md): Baseline 2024 (round/mod/rem: Chrome 125, Safari 15.4, Firefox 118; abs/sign: Chrome 125, Safari 15.4, Firefox 118). - [Trigonometric functions: sin(), cos(), tan(), atan2()](https://designforai.dev/css/trigonometric-functions.md): Baseline 2023 (Chrome 111, Safari 15.4, Firefox 108); widely available. - [animation-composition](https://designforai.dev/css/animation-composition.md): Baseline 2023 (Chrome 112, Safari 16, Firefox 115). - [offset-path with shapes (motion path)](https://designforai.dev/css/offset-path.md): Baseline 2024 for `offset-path` with basic shapes and coord-box (Chrome 116, Safari 16, Firefox 122). `shape()` in offset-path is Baseline 2026 (fx-033). - [CSS masking (mask, mask-image, mask-composite) unprefixed](https://designforai.dev/css/masking.md): Baseline 2023 (Chrome 120, Safari 15.4, Firefox 53); widely available. - [backdrop-filter](https://designforai.dev/css/backdrop-filter.md): Baseline 2024 (Chrome 76, Safari 18 unprefixed, Firefox 103). - [scrollbar-gutter, scrollbar-width, scrollbar-color](https://designforai.dev/css/scrollbar-gutter.md): scrollbar-gutter Baseline 2024 (Chrome 94, Safari 18.2, Firefox 97). scrollbar-width Baseline 2024 (Safari 18.2). scrollbar-color newly available (Chrome 121, Firefox 64, Safari 26.2). - [Exclusive accordions (details name=) + ::details-content](https://designforai.dev/css/exclusive-accordions.md): `name` attribute Baseline 2024 (Chrome 120, Safari 17.2, Firefox 130). `::details-content` Baseline 2025 (Chrome 131, Safari 18.4, Firefox 144). - [Custom Highlight API (::highlight()) + ::target-text](https://designforai.dev/css/custom-highlight-api.md): Custom highlights Baseline 2025 (Chrome 105, Safari 17.2, Firefox 140). `::target-text` Baseline 2025 (Chrome 89, Safari 18.2, Firefox 131). - [View transitions, same document (document.startViewTransition)](https://designforai.dev/css/view-transitions.md): Baseline 2025 (Chrome 111, Safari 18, Firefox 144). `:active-view-transition` Baseline January 2026. View transition types: Chrome 125, Safari 18.2, Firefox 147. - [:open pseudo-class](https://designforai.dev/css/open-pseudo-class.md): Baseline 2026 newly available (Chrome 133, Firefox 136, Safari 26.5). - [Container style queries (custom properties)](https://designforai.dev/css/container-style-queries.md): Baseline 2026 (Chrome 111, Safari 18, Firefox 151 in May 2026). Range syntax for style() is still flagged in Firefox. - [@scope](https://designforai.dev/css/scope.md): Baseline 2026 (Chrome 118, Safari 17.4, Firefox 146 in December 2025). - [field-sizing: content](https://designforai.dev/css/field-sizing.md): Baseline 2026 (Chrome 123, Safari 26.2, Firefox 152 in June 2026). - [contrast-color()](https://designforai.dev/css/contrast-color.md): Baseline 2026 newly available April 2026 (Chrome 147, Firefox 146, Safari 26). - [shape() for clip-path / offset-path](https://designforai.dev/css/shape.md): Baseline 2026 (Chrome 135, Safari 18.4, Firefox 148 in February 2026). Chrome 149 also allows it in `shape-outside`. - [sibling-index() and sibling-count()](https://designforai.dev/css/sibling-index.md): Baseline 2026 (Chrome 138, Safari 26.2, Firefox 154 in August 2026). - [text-box-trim / text-box-edge (text-box shorthand)](https://designforai.dev/css/text-box-trim.md): Baseline 2026 (Chrome 133, Safari 18.2, Firefox 154 in August 2026). - [Anchor positioning: anchor(), position-area, position-try](https://designforai.dev/css/anchor-positioning.md): Baseline 2026 newly available (Chrome 125, Safari 26.0, Firefox 147 in January 2026). Refinements keep landing (Firefox 148 position-try-order, Safari 26.2 flip-x/flip-y and position-visibility, Chrome 151/Safari 27 position-anchor: normal). Note: `inset-area` was renamed `position-area`; use the new name. - [Name-only container queries + comma-separated queries](https://designforai.dev/css/name-only-container-queries.md): Name-only queries Baseline 2026 (Chrome 148, Safari 26.4, Firefox 149). Comma-separated `@container` query lists: Chrome 150. - [lh / rlh units (and rcap, rch, rex, ric)](https://designforai.dev/css/lh.md): `lh`/`rlh` Baseline widely available May 2026 (Chrome 109, Safari 16.4, Firefox 120). `rcap`/`rch`/`rex`/`ric` Baseline 2026 (Firefox 147). - [Scroll-driven animations (animation-timeline: scroll() / view())](https://designforai.dev/css/scroll-driven-animations.md): Chrome 115, Safari 26.0; Firefox behind `layout.css.scroll-driven-animations.enabled` in stable, enabled in Firefox 158 Nightly (per caniuse). Interop 2026 focus area; expected Baseline late 2026. - [Cross-document view transitions (@view-transition)](https://designforai.dev/css/cross-document-view-transitions.md): Chrome 126, Safari 18.2; Firefox not yet (caniuse through 158). Interop 2026 focus area. - [text-wrap: pretty](https://designforai.dev/css/text-wrap-2.md): Chrome 117, Safari 26.0 (improved algorithm); Firefox not yet (caniuse through 158). - [popover="hint"](https://designforai.dev/css/popover-hint.md): Chrome 133, Firefox 149; Safari pending (Interop 2026 item), not Baseline. - [dialog closedby="any" (light-dismiss dialogs)](https://designforai.dev/css/dialog-closedby-any.md): Chrome 134, Firefox 137; Safari not yet (blocked since July 2025, Interop 2026 item). - [color-mix() with many colors + light-dark() for images](https://designforai.dev/css/color-mix-2.md): Chrome 150, Firefox 150 (both 2026); Safari pending for both. - [margin-trim](https://designforai.dev/css/margin-trim.md): Safari 16.4 (block; `block inline` in 26.0); Chrome 155 (per caniuse, not yet stable as of 2026-09); Firefox not yet. Not Baseline. - [Standard line-clamp (unprefixed) and -webkit-line-clamp](https://designforai.dev/css/standard-line-clamp.md): `-webkit-line-clamp` (with `display:-webkit-box`) works everywhere. Unprefixed `line-clamp`: behind flags in Chrome and Firefox (Firefox 154 `layout.css.line-clamp.enabled`), Safari supports the legacy syntax. Not Baseline. - [CSS Typed OM (CSSStyleValue, attributeStyleMap, CSS.px)](https://designforai.dev/css/typed-om.md): Chrome 66, Safari 16.4; Firefox behind a flag (Nightly from 154, August 2026). Not Baseline. - [revert-rule keyword](https://designforai.dev/css/revert-rule-keyword.md): Chrome 148, Firefox 150, Safari 27 beta. Not Baseline yet (expected late 2026). - [interpolate-size / calc-size() (animate to height:auto)](https://designforai.dev/css/interpolate-size.md): Chrome 129 only; Firefox and Safari not yet (2026-09). Not Baseline. - [corner-shape (squircle, scoop, notch, bevel, superellipse())](https://designforai.dev/css/corner-shape.md): Chrome 139 only; Safari and Firefox have no public timeline (2026-09). Not Baseline. - [CSS if() conditional function](https://designforai.dev/css/if.md): Chrome 137 only; Safari Technology Preview 249 (July 2026), Firefox in development. Not Baseline. - [@function custom functions](https://designforai.dev/css/function-custom-functions.md): Chrome 139 only; Safari Technology Preview 249, Firefox in development. Not Baseline. - [reading-flow / reading-order](https://designforai.dev/css/reading-flow.md): Chrome 137 only; Safari and Firefox not yet (2026-09). Not Baseline. - [CSS carousels: ::scroll-button(), ::scroll-marker(), ::scroll-marker-group](https://designforai.dev/css/carousels.md): Chrome 135 only; Safari and Firefox not yet (caniuse: no support through Safari 27 / Firefox 158). Not Baseline. - [Scroll-state container queries (stuck, snapped, scrollable, scrolled)](https://designforai.dev/css/scroll-state-container-queries.md): Chrome 133 (`scrolled` in Chrome 144); Safari and Firefox not yet (2026-09). Not Baseline. - [text-fit (fit-to-width headlines)](https://designforai.dev/css/text-fit.md): Chrome 150 only (June 2026). Not Baseline. - [background-clip: border-area (gradient borders)](https://designforai.dev/css/background-clip.md): Chrome 150 only (June 2026). Not Baseline. - [Gap decorations (column-rule / row-rule in grid and flex)](https://designforai.dev/css/gap-decorations.md): Chrome 149 (June 2026). Not Baseline. - [random() and progress() functions](https://designforai.dev/css/random.md): `random()`: Safari 26.2 (refined in 26.5 with `element-scoped`), Firefox flagged; Chrome in development. `progress()`: Safari 26.0, Firefox 154 flagged, Chrome in development. Not Baseline. - [Grid Lanes (CSS-only masonry)](https://designforai.dev/css/grid-lanes.md): Safari 26.4 (April 2026); Chrome, Edge and Firefox behind flags. Not Baseline. - [Customizable