# designforai.dev (de) > CSS-Snippets, Design-Stile und neue CSS-Features, jeweils mit einem Prompt für KI-Coding-Tools. Jede Seite hat einen Markdown-Zwilling (gleiche URL mit .md). ## Snippets - [Tinte flach](https://designforai.dev/de/snippet/btn-001.md): Buttons, solid, flat, rectangle, subtle-lift - [Kobalt Block](https://designforai.dev/de/snippet/btn-002.md): Buttons, solid, flat, rectangle, brand-blue - [Mint soft-flat](https://designforai.dev/de/snippet/btn-003.md): Buttons, solid, flat, rounded, tinted-background - [Karmesin breit](https://designforai.dev/de/snippet/btn-004.md): Buttons, solid, flat, full-width, uppercase - [Schiefer eckig](https://designforai.dev/de/snippet/btn-005.md): Buttons, solid, flat, square-corners, monochrome - [Sonnenblume fett](https://designforai.dev/de/snippet/btn-006.md): Buttons, solid, flat, rounded, warm, dark-text - [Violett Spationierung](https://designforai.dev/de/snippet/btn-007.md): Buttons, solid, flat, rounded, letter-spacing-hover - [Anthrazit mini](https://designforai.dev/de/snippet/btn-008.md): Buttons, solid, flat, small, compact - [Haarlinie Outline](https://designforai.dev/de/snippet/btn-009.md): Buttons, outline, ghost, rectangle, thin-border - [Kräftige Outline-Füllung](https://designforai.dev/de/snippet/btn-010.md): Buttons, outline, rectangle, fill-on-hover, 2px-border - [Ghost Text](https://designforai.dev/de/snippet/btn-011.md): Buttons, ghost, borderless, text-button, minimal - [Gestrichelte Outline](https://designforai.dev/de/snippet/btn-012.md): Buttons, outline, dashed, rectangle, add-action - [Doppellinie Outline](https://designforai.dev/de/snippet/btn-013.md): Buttons, outline, double-border, editorial, square - [Ghost mit Hover-Rahmen](https://designforai.dev/de/snippet/btn-014.md): Buttons, ghost, outline, rounded, border-appears - [Rosé Outline-Pille](https://designforai.dev/de/snippet/btn-015.md): Buttons, outline, pill, thin-border, tinted-hover - [Ghost invertiert (dunkel)](https://designforai.dev/de/snippet/btn-016.md): Buttons, ghost, outline, dark-background, white-border - [Klassische Pille](https://designforai.dev/de/snippet/btn-017.md): Buttons, pill, solid, rounded, shadow-lift - [Zweifarbige Pille](https://designforai.dev/de/snippet/btn-018.md): Buttons, pill, solid, two-tone, badge - [Pille mit Ring](https://designforai.dev/de/snippet/btn-019.md): Buttons, pill, outline, ring-hover, rounded - [Squircle](https://designforai.dev/de/snippet/btn-020.md): Buttons, rounded, solid, squircle, large-radius - [Schrumpf-Pille](https://designforai.dev/de/snippet/btn-021.md): Buttons, pill, solid, scale, press - [Kapsel mit Punkt](https://designforai.dev/de/snippet/btn-022.md): Buttons, pill, status, indicator, pulse - [Asymmetrischer Radius](https://designforai.dev/de/snippet/btn-023.md): Buttons, rounded, solid, asymmetric, playful - [Sonnenuntergang Verlauf](https://designforai.dev/de/snippet/btn-024.md): Buttons, gradient, solid, rounded, warm - [Aurora Shift](https://designforai.dev/de/snippet/btn-025.md): Buttons, gradient, animated, background-position, rounded - [Verlaufsrahmen](https://designforai.dev/de/snippet/btn-026.md): Buttons, gradient, outline, border-gradient, mask - [Verlaufstext Ghost](https://designforai.dev/de/snippet/btn-027.md): Buttons, gradient, ghost, text-gradient, background-clip - [Tiefsee](https://designforai.dev/de/snippet/btn-028.md): Buttons, gradient, solid, vertical, dark - [Radialer Hotspot](https://designforai.dev/de/snippet/btn-029.md): Buttons, gradient, radial, hover-move, rounded - [Mesh Pastell](https://designforai.dev/de/snippet/btn-030.md): Buttons, gradient, multi-layer, pastel, soft - [Metallic Gold](https://designforai.dev/de/snippet/btn-031.md): Buttons, gradient, metallic, shine, luxury - [Milchglas-Pille](https://designforai.dev/de/snippet/btn-032.md): Buttons, glassmorphism, pill, blur, translucent - [Dunkles Glas](https://designforai.dev/de/snippet/btn-033.md): Buttons, glassmorphism, dark, rounded, blur - [Glas mit Leuchtkante](https://designforai.dev/de/snippet/btn-034.md): Buttons, glassmorphism, glow, pill, border-gradient - [Klarglas-Button](https://designforai.dev/de/snippet/btn-035.md): Buttons, glassmorphism, light, rectangle, shadow - [Glas Segment-Tab](https://designforai.dev/de/snippet/btn-036.md): Buttons, glassmorphism, pill, small, tab-like - [Glas mit Innenlicht](https://designforai.dev/de/snippet/btn-037.md): Buttons, glassmorphism, rounded, inner-gradient, premium - [Soft erhaben](https://designforai.dev/de/snippet/btn-038.md): Buttons, neumorphic, soft-ui, raised, rounded - [Soft gedrückt](https://designforai.dev/de/snippet/btn-039.md): Buttons, neumorphic, soft-ui, inset, rounded - [Soft Kreis-Icon](https://designforai.dev/de/snippet/btn-040.md): Buttons, neumorphic, soft-ui, circle, icon - [Soft Dark Mode](https://designforai.dev/de/snippet/btn-041.md): Buttons, neumorphic, soft-ui, dark, rounded - [Soft Pille Akzent](https://designforai.dev/de/snippet/btn-042.md): Buttons, neumorphic, soft-ui, pill, accent-text - [Soft Toggle-Chip](https://designforai.dev/de/snippet/btn-043.md): Buttons, neumorphic, soft-ui, small, chip - [Neo-brutal Gelb](https://designforai.dev/de/snippet/btn-044.md): Buttons, brutalist, neo-brutalist, hard-shadow, square - [Neo-brutal Pink-Pille](https://designforai.dev/de/snippet/btn-045.md): Buttons, brutalist, neo-brutalist, pill, hard-shadow - [Brutalist Mono](https://designforai.dev/de/snippet/btn-046.md): Buttons, brutalist, monospace, square, inverted-hover - [Neo-brutal Farbschatten](https://designforai.dev/de/snippet/btn-047.md): Buttons, brutalist, neo-brutalist, coloured-shadow, rounded - [Brutalist Streifen](https://designforai.dev/de/snippet/btn-048.md): Buttons, brutalist, pattern, stripes, square - [Neo-brutal dunkel](https://designforai.dev/de/snippet/btn-049.md): Buttons, brutalist, neo-brutalist, dark, hard-shadow - [Brutalist Tag](https://designforai.dev/de/snippet/btn-050.md): Buttons, brutalist, small, tag, rotate - [Candy Press](https://designforai.dev/de/snippet/btn-051.md): Buttons, 3d, press-down, rounded, bottom-edge - [Keycap](https://designforai.dev/de/snippet/btn-052.md): Buttons, 3d, press-down, keyboard, square - [Arcade Rot](https://designforai.dev/de/snippet/btn-053.md): Buttons, 3d, press-down, circle, arcade - [Kipp-Druck](https://designforai.dev/de/snippet/btn-054.md): Buttons, 3d, perspective, tilt, hover-rotate - [Gestapelte Ebenen](https://designforai.dev/de/snippet/btn-055.md): Buttons, 3d, layered, offset, retro - [Chrom Fase](https://designforai.dev/de/snippet/btn-056.md): Buttons, 3d, bevel, chrome, retro - [Glut Slide-Füllung](https://designforai.dev/de/snippet/btn-057.md): Buttons, hover-fill, slide-left, outline, rounded - [Aufsteigende Füllung](https://designforai.dev/de/snippet/btn-058.md): Buttons, hover-fill, slide-up, outline, square - [Zentrum Bloom](https://designforai.dev/de/snippet/btn-059.md): Buttons, hover-fill, grow-center, pill, scale - [Diagonaler Wipe](https://designforai.dev/de/snippet/btn-060.md): Buttons, hover-fill, diagonal, skew, rectangle - [Geteilter Vorhang](https://designforai.dev/de/snippet/btn-061.md): Buttons, hover-fill, split, two-panels, outline - [Rollladen von oben](https://designforai.dev/de/snippet/btn-062.md): Buttons, hover-fill, slide-down, solid, dark - [Ecken-Sweep](https://designforai.dev/de/snippet/btn-063.md): Buttons, hover-fill, corner, circle-grow, rounded - [Text-Swap Slide](https://designforai.dev/de/snippet/btn-064.md): Buttons, hover-fill, text-swap, slide-up, solid - [Unterstrich wächst](https://designforai.dev/de/snippet/btn-065.md): Buttons, underline, text-button, border-draw, minimal - [Unterstrich aus Mitte](https://designforai.dev/de/snippet/btn-066.md): Buttons, underline, text-button, border-draw, center-origin - [Rahmen-Trace](https://designforai.dev/de/snippet/btn-067.md): Buttons, border-draw, outline, corners, animated-border - [Klammer-Reveal](https://designforai.dev/de/snippet/btn-068.md): Buttons, border-draw, brackets, text-button, minimal - [Doppelter Unterstrich](https://designforai.dev/de/snippet/btn-069.md): Buttons, underline, text-button, two-lines, offset - [Textmarker-Swipe](https://designforai.dev/de/snippet/btn-070.md): Buttons, underline, highlight, text-button, marker - [Glanz-Sweep dunkel](https://designforai.dev/de/snippet/btn-071.md): Buttons, shine, sheen, solid, dark, sweep - [Dauer-Schimmer](https://designforai.dev/de/snippet/btn-072.md): Buttons, shine, shimmer, animated, gradient, loop - [Glossy Oberlicht](https://designforai.dev/de/snippet/btn-073.md): Buttons, shine, gloss, static-highlight, rounded - [Licht-Sweep Outline](https://designforai.dev/de/snippet/btn-074.md): Buttons, shine, sheen, outline, border-sweep - [Glanz auf Gold-Pille](https://designforai.dev/de/snippet/btn-075.md): Buttons, shine, sheen, pill, gradient, luxury - [Pfeil-Schubs](https://designforai.dev/de/snippet/btn-076.md): Buttons, icon, arrow, inline-svg, nudge - [Plus rotiert](https://designforai.dev/de/snippet/btn-077.md): Buttons, icon, plus, inline-svg, rotate, circle - [Download-Drop](https://designforai.dev/de/snippet/btn-078.md): Buttons, icon, download, inline-svg, bounce - [Icon-Ghost quadratisch](https://designforai.dev/de/snippet/btn-079.md): Buttons, icon, ghost, square, toolbar - [Icon-Box geteilt](https://designforai.dev/de/snippet/btn-080.md): Buttons, icon, arrow, boxed-icon, two-part - [Chevron-Reveal](https://designforai.dev/de/snippet/btn-081.md): Buttons, icon, chevron, hidden-icon, width-grow - [Ring-Spinner Loading](https://designforai.dev/de/snippet/btn-082.md): Buttons, loading, spinner, css-animation, solid - [Drei-Punkte-Loader](https://designforai.dev/de/snippet/btn-083.md): Buttons, loading, dots, css-animation, pill - [Fortschrittsbalken-Füllung](https://designforai.dev/de/snippet/btn-084.md): Buttons, loading, progress, animated-fill, outline - [Puls-Loading Ghost](https://designforai.dev/de/snippet/btn-085.md): Buttons, loading, pulse, skeleton, ghost - [Switch Toggle (Checkbox)](https://designforai.dev/de/snippet/btn-086.md): Buttons, toggle, switch, checkbox, pill - [Toggle-Pille (pressed)](https://designforai.dev/de/snippet/btn-087.md): Buttons, toggle, pressed, aria-pressed, pill - [Gleitender Tab-Toggle](https://designforai.dev/de/snippet/btn-088.md): Buttons, toggle, two-option, radio, segmented, slider - [Split-Action](https://designforai.dev/de/snippet/btn-089.md): Buttons, split, dual, dropdown, solid - [Doppel-Paar](https://designforai.dev/de/snippet/btn-090.md): Buttons, split, dual, primary-secondary, pair - [Split mit Zähler](https://designforai.dev/de/snippet/btn-091.md): Buttons, split, dual, counter, badge - [Pixel 8-Bit](https://designforai.dev/de/snippet/btn-092.md): Buttons, retro, pixel, 8-bit, stepped-corners - [Terminal-Prompt](https://designforai.dev/de/snippet/btn-093.md): Buttons, retro, terminal, monospace, blink - [CRT Bernstein](https://designforai.dev/de/snippet/btn-094.md): Buttons, retro, terminal, amber, scanlines - [Win95 Grau](https://designforai.dev/de/snippet/btn-095.md): Buttons, retro, win95, bevel, system - [Midnight Primary](https://designforai.dev/de/snippet/btn-096.md): Buttons, dark-mode, solid, rounded, glow - [Midnight Secondary](https://designforai.dev/de/snippet/btn-097.md): Buttons, dark-mode, outline, subtle, rounded - [Segmented dreifach](https://designforai.dev/de/snippet/btn-098.md): Buttons, group, segmented, radio, three-options - [Verbundene Button-Gruppe](https://designforai.dev/de/snippet/btn-099.md): Buttons, group, joined, outline, toolbar - [Pillen-Filtergruppe](https://designforai.dev/de/snippet/btn-100.md): Buttons, group, pills, checkbox, multi-select - [Conic Ring-Spin](https://designforai.dev/de/snippet/btn-101.md): Buttons, gradient-border, animated, pill, conic, property - [Conic Keil-Orbit](https://designforai.dev/de/snippet/btn-102.md): Buttons, gradient-border, animated, rounded, conic, property, hover-start - [Halo-Ring](https://designforai.dev/de/snippet/btn-103.md): Buttons, gradient-border, animated, pill, conic, glow, property - [Gestrichelter Marsch](https://designforai.dev/de/snippet/btn-104.md): Buttons, gradient-border, animated, rectangle, conic, dashed - [Highlight-Sweep](https://designforai.dev/de/snippet/btn-105.md): Buttons, gradient-border, animated, rounded, conic, monochrome, property - [Neon-Puls Cyan](https://designforai.dev/de/snippet/btn-106.md): Buttons, glow, neon, pill, pulse, dark - [Magenta Herzschlag](https://designforai.dev/de/snippet/btn-107.md): Buttons, glow, neon, rounded, pulse, ring - [Limetten-Röhre Flackern](https://designforai.dev/de/snippet/btn-108.md): Buttons, glow, neon, rectangle, dark, flicker - [Glut atmet](https://designforai.dev/de/snippet/btn-109.md): Buttons, glow, warm, pill, pulse, soft-shadow - [Ghost Leuchtkante](https://designforai.dev/de/snippet/btn-110.md): Buttons, glow, outline, rounded, subtle, light-background - [Blob-Morph](https://designforai.dev/de/snippet/btn-111.md): Buttons, liquid, blob, morph, border-radius, organic - [Liquid-Pille Wobble](https://designforai.dev/de/snippet/btn-112.md): Buttons, liquid, pill, morph, animated, loop - [Lavalampe innen](https://designforai.dev/de/snippet/btn-113.md): Buttons, liquid, pill, animated, gradient, blob-inside - [Tropfen-Ecke](https://designforai.dev/de/snippet/btn-114.md): Buttons, liquid, morph, rounded, asymmetric, spring - [Squircle Squeeze](https://designforai.dev/de/snippet/btn-115.md): Buttons, liquid, squircle, morph, scale, soft-body - [Vertikaler Text-Swap](https://designforai.dev/de/snippet/btn-116.md): Buttons, text-swap, slide, rectangle, two-labels - [Würfelflächen-Flip](https://designforai.dev/de/snippet/btn-117.md): Buttons, text-swap, flip, 3d, rounded, two-labels - [Tracking-Reveal](https://designforai.dev/de/snippet/btn-118.md): Buttons, text-swap, expand, pill, uppercase, letter-spacing - [Durchstreichen und ersetzen](https://designforai.dev/de/snippet/btn-119.md): Buttons, text-swap, strikethrough, rectangle, price, reveal - [Schreibmaschine löscht](https://designforai.dev/de/snippet/btn-120.md): Buttons, text-swap, typewriter, mono, steps, terminal - [Kipp-Karte Lift](https://designforai.dev/de/snippet/btn-121.md): Buttons, tilt, 3d, rounded, perspective, lift - [Magnetischer Zug](https://designforai.dev/de/snippet/btn-122.md): Buttons, tilt, magnetic, pill, translate, overshoot - [Parallax-Ebenen](https://designforai.dev/de/snippet/btn-123.md): Buttons, tilt, 3d, layered, rectangle, depth - [Pendel-Schwung](https://designforai.dev/de/snippet/btn-124.md): Buttons, tilt, rotate, rounded, hinge, animated - [Skew-Neigung](https://designforai.dev/de/snippet/btn-125.md): Buttons, tilt, skew, rectangle, italic, shadow-offset - [Gebürstetes Metall](https://designforai.dev/de/snippet/btn-126.md): Buttons, skeuomorphic, embossed, rectangle, metallic, gradient - [Leder-Naht](https://designforai.dev/de/snippet/btn-127.md): Buttons, skeuomorphic, embossed, rounded, stitched, warm - [Geprägtes Papier](https://designforai.dev/de/snippet/btn-128.md): Buttons, skeuomorphic, embossed, rectangle, letterpress, light - [Glaskuppel-Taste](https://designforai.dev/de/snippet/btn-129.md): Buttons, skeuomorphic, embossed, pill, glossy, jelly - [Gedrückter Drehknopf](https://designforai.dev/de/snippet/btn-130.md): Buttons, skeuomorphic, embossed, circle, icon, ring - [Clay-Blase](https://designforai.dev/de/snippet/btn-131.md): Buttons, claymorphism, pill, soft, inset-shadow, pastel - [Clay Pfirsich](https://designforai.dev/de/snippet/btn-132.md): Buttons, claymorphism, rounded, soft, pastel, warm - [Clay Mint-Icon](https://designforai.dev/de/snippet/btn-133.md): Buttons, claymorphism, circle, icon, soft, pastel - [Clay Lavendel breit](https://designforai.dev/de/snippet/btn-134.md): Buttons, claymorphism, full-width, soft, pastel, subtitle - [Clay Dark Mode](https://designforai.dev/de/snippet/btn-135.md): Buttons, claymorphism, rounded, dark, soft, inset-shadow - [Aurora-Drift](https://designforai.dev/de/snippet/btn-136.md): Buttons, aurora, mesh, pill, animated, gradient - [Mesh Sonnenaufgang](https://designforai.dev/de/snippet/btn-137.md): Buttons, aurora, mesh, rounded, warm, static-with-hover - [Nordlicht-Leiste](https://designforai.dev/de/snippet/btn-138.md): Buttons, aurora, full-width, animated, dark, gradient-sweep - [Holografische Folie](https://designforai.dev/de/snippet/btn-139.md): Buttons, aurora, holographic, pill, animated, iridescent - [Aurora Outline-Text](https://designforai.dev/de/snippet/btn-140.md): Buttons, aurora, outline, gradient-text, rounded, animated - [Glitch-Slice](https://designforai.dev/de/snippet/btn-141.md): Buttons, cyberpunk, glitch, rectangle, clip-path, animated - [Abgeschrägte Ecken](https://designforai.dev/de/snippet/btn-142.md): Buttons, cyberpunk, clip-path, rectangle, angular, hud - [Scanline-Sweep](https://designforai.dev/de/snippet/btn-143.md): Buttons, cyberpunk, scanline, rectangle, dark, animated - [Gekerbter Tag](https://designforai.dev/de/snippet/btn-144.md): Buttons, cyberpunk, clip-path, rectangle, notch, label - [RGB-Split Hover](https://designforai.dev/de/snippet/btn-145.md): Buttons, cyberpunk, glitch, pill, chromatic, text-shadow - [Inset-Füllung Sweep](https://designforai.dev/de/snippet/btn-146.md): Buttons, inset-fill, outline, rectangle, box-shadow, left-to-right - [Inset-Füllung vertikal](https://designforai.dev/de/snippet/btn-147.md): Buttons, inset-fill, outline, pill, box-shadow, bottom-up - [Inset-Füllung Mitte](https://designforai.dev/de/snippet/btn-148.md): Buttons, inset-fill, outline, rounded, box-shadow, spread-from-centre - [Inset-Füllung Duo](https://designforai.dev/de/snippet/btn-149.md): Buttons, inset-fill, outline, rectangle, box-shadow, two-shadows - [Inset-Füllung Ring-Pop](https://designforai.dev/de/snippet/btn-150.md): Buttons, inset-fill, outline, circle, icon, box-shadow - [Eckklammern](https://designforai.dev/de/snippet/btn-151.md): Buttons, bracket, corner-mark, rectangle, outline, hover-expand - [Vier Eckmarken](https://designforai.dev/de/snippet/btn-152.md): Buttons, bracket, corner-mark, rectangle, outline, viewfinder - [Klammern um Text](https://designforai.dev/de/snippet/btn-153.md): Buttons, bracket, corner-mark, text, minimal, slide-in - [Eckpunkt-Marker](https://designforai.dev/de/snippet/btn-154.md): Buttons, bracket, corner-mark, rounded, dots, outline - [Spitzklammern-Pfeil](https://designforai.dev/de/snippet/btn-155.md): Buttons, bracket, corner-mark, text, code, chevron - [Sticker-Neigung](https://designforai.dev/de/snippet/btn-156.md): Buttons, sticker, badge, rotation, rounded, white-edge - [Preisschild-Loch](https://designforai.dev/de/snippet/btn-157.md): Buttons, sticker, badge, tag, rotation, clip-path - [Stempel-Badge](https://designforai.dev/de/snippet/btn-158.md): Buttons, sticker, badge, circle, rotation, double-ring - [Eckband](https://designforai.dev/de/snippet/btn-159.md): Buttons, sticker, badge, ribbon, rotation, rectangle - [Puffiger Sticker-Rand](https://designforai.dev/de/snippet/btn-160.md): Buttons, sticker, badge, pill, rotation, outline-stroke - [Chip Schließen weich](https://designforai.dev/de/snippet/btn-161.md): Buttons, chip, pill, close-x, small, tinted - [Chip Schließen Outline](https://designforai.dev/de/snippet/btn-162.md): Buttons, chip, pill, close-x, outline, small - [Chip auswählbar Haken](https://designforai.dev/de/snippet/btn-163.md): Buttons, chip, pill, toggle, small, checkbox-driven - [Chip mit Zähler](https://designforai.dev/de/snippet/btn-164.md): Buttons, chip, rounded, close-x, count, small - [Chip Avatar Schließen](https://designforai.dev/de/snippet/btn-165.md): Buttons, chip, pill, close-x, avatar, small - [FAB klassisch](https://designforai.dev/de/snippet/btn-166.md): Buttons, fab, circle, icon, elevated, floating - [FAB erweitert](https://designforai.dev/de/snippet/btn-167.md): Buttons, fab, pill, icon, label, floating - [FAB rotierendes Plus](https://designforai.dev/de/snippet/btn-168.md): Buttons, fab, circle, icon, rotate, floating - [FAB Squircle-Gradient](https://designforai.dev/de/snippet/btn-169.md): Buttons, fab, squircle, icon, gradient, floating - [FAB Mini-Stapel](https://designforai.dev/de/snippet/btn-170.md): Buttons, fab, circle, icon, small, group - [Pfeil-Link gleitend](https://designforai.dev/de/snippet/btn-171.md): Buttons, link-style, arrow, text, minimal, slide - [Pfeil eingleitend](https://designforai.dev/de/snippet/btn-172.md): Buttons, link-style, arrow, text, reveal, underline - [Pfeilkreis wachsend](https://designforai.dev/de/snippet/btn-173.md): Buttons, link-style, arrow, icon-circle, text, expand - [Pfeil lange Linie](https://designforai.dev/de/snippet/btn-174.md): Buttons, link-style, arrow, line, editorial, expand - [Pfeil hüpfend](https://designforai.dev/de/snippet/btn-175.md): Buttons, link-style, arrow, text, animated, bounce - [Sparkle KI-Gradient](https://designforai.dev/de/snippet/btn-176.md): Buttons, sparkle, ai, pill, gradient, icon, animated - [Sparkle KI-Outline](https://designforai.dev/de/snippet/btn-177.md): Buttons, sparkle, ai, rounded, outline, gradient-border, icon - [Sparkle-Orbit](https://designforai.dev/de/snippet/btn-178.md): Buttons, sparkle, ai, pill, dark, animated, orbit - [Sparkle Schimmertext](https://designforai.dev/de/snippet/btn-179.md): Buttons, sparkle, ai, rounded, shimmer, light - [Sparkle Zauberstab](https://designforai.dev/de/snippet/btn-180.md): Buttons, sparkle, ai, pill, icon, rotate, gradient - [Halten zum Bestätigen](https://designforai.dev/de/snippet/btn-181.md): Buttons, progress, hold, rectangle, fill, active-driven - [Fortschrittsstreifen statisch](https://designforai.dev/de/snippet/btn-182.md): Buttons, progress, rectangle, fill, custom-property, percentage - [Fortschrittsring conic](https://designforai.dev/de/snippet/btn-183.md): Buttons, progress, circle, ring, conic, custom-property - [Unbestimmte Streifen](https://designforai.dev/de/snippet/btn-184.md): Buttons, progress, rectangle, striped, animated, busy - [Countdown-Ablauf](https://designforai.dev/de/snippet/btn-185.md): Buttons, progress, pill, drain, animated, timed - [Teilen-Pille Icon](https://designforai.dev/de/snippet/btn-186.md): Buttons, share, pill, icon, outline, generic - [Link kopieren Feedback](https://designforai.dev/de/snippet/btn-187.md): Buttons, share, copy-link, rounded, icon, text-swap - [Teilen-Reihe geteilt](https://designforai.dev/de/snippet/btn-188.md): Buttons, share, group, rounded, icon-buttons, generic - [Teilen aufgefächert](https://designforai.dev/de/snippet/btn-189.md): Buttons, share, group, reveal, icon-buttons, hover-expand - [Teilen-Pille Zähler](https://designforai.dev/de/snippet/btn-190.md): Buttons, share, pill, count, icon, split - [CTA-Banner Untertitel](https://designforai.dev/de/snippet/btn-191.md): Buttons, cta, banner, wide, subtitle, dark - [CTA-Banner Pfeil rechts](https://designforai.dev/de/snippet/btn-192.md): Buttons, cta, banner, wide, subtitle, arrow, light - [CTA-Banner Gradient](https://designforai.dev/de/snippet/btn-193.md): Buttons, cta, banner, wide, subtitle, gradient, centered - [CTA-Banner Icon links](https://designforai.dev/de/snippet/btn-194.md): Buttons, cta, banner, wide, subtitle, icon, soft - [Mikro-Pille](https://designforai.dev/de/snippet/btn-195.md): Buttons, xs, micro, pill, tiny, neutral - [Mikro-Taste](https://designforai.dev/de/snippet/btn-196.md): Buttons, xs, micro, keyboard, mono, rectangle - [Mikro-Icon-Quadrat](https://designforai.dev/de/snippet/btn-197.md): Buttons, xs, micro, icon, square, ghost - [color-mix Tonskala](https://designforai.dev/de/snippet/btn-198.md): Buttons, modern-css, color-mix, rounded, single-hue, fallback - [light-dark Auto-Theme](https://designforai.dev/de/snippet/btn-199.md): Buttons, modern-css, light-dark, rounded, theme-aware, fallback - [corner-shape Squircle](https://designforai.dev/de/snippet/btn-200.md): Buttons, modern-css, corner-shape, oklch, squircle, fallback - [Ruhiger Inhalt](https://designforai.dev/de/snippet/card-001.md): Cards, content, basic, image-top, light, hover-lift - [Foto mit Tag](https://designforai.dev/de/snippet/card-002.md): Cards, content, basic, image-top, tag, light - [Bild mit Verlauf unten](https://designforai.dev/de/snippet/card-003.md): Cards, content, image-top, overlay, dark, gradient - [Weicher Schatten Footer](https://designforai.dev/de/snippet/card-004.md): Cards, content, basic, footer, light, soft-shadow - [Bild-Zoom beim Hover](https://designforai.dev/de/snippet/card-005.md): Cards, content, basic, image-top, hover-zoom, light - [Medien links Zeile](https://designforai.dev/de/snippet/card-006.md): Cards, horizontal, media-left, light, hover-lift - [Thumbnail-Zeile](https://designforai.dev/de/snippet/card-007.md): Cards, horizontal, media-left, compact, list-item, light - [Dunkle Akzentleiste](https://designforai.dev/de/snippet/card-008.md): Cards, horizontal, media-left, dark, accent - [Medien rechts](https://designforai.dev/de/snippet/card-009.md): Cards, horizontal, media-right, light, split - [Zentrierter Avatar](https://designforai.dev/de/snippet/card-010.md): Cards, profile, avatar, centered, light, cta - [Banner-Profil mit Stats](https://designforai.dev/de/snippet/card-011.md): Cards, profile, avatar, banner, stats, light - [Teammitglied-Zeile](https://designforai.dev/de/snippet/card-012.md): Cards, profile, avatar, horizontal, socials, light - [Profil mit Statuspunkt](https://designforai.dev/de/snippet/card-013.md): Cards, profile, avatar, dark, status, glow - [Ausweis mit eckigem Avatar](https://designforai.dev/de/snippet/card-014.md): Cards, profile, id-card, mono, minimal, light - [Klassisches Pricing](https://designforai.dev/de/snippet/card-015.md): Cards, pricing, feature-list, cta, light - [Hervorgehobener Pro-Tarif](https://designforai.dev/de/snippet/card-016.md): Cards, pricing, featured, badge, dark, gradient - [Linien-Pricing](https://designforai.dev/de/snippet/card-017.md): Cards, pricing, minimal, mono, light, hover-border - [Zweigeteilter Tarif](https://designforai.dev/de/snippet/card-018.md): Cards, pricing, tiered, accent, light, shadow - [Pricing pro Sitz](https://designforai.dev/de/snippet/card-019.md): Cards, pricing, compact, per-seat, light, badge - [Badge In den Warenkorb](https://designforai.dev/de/snippet/card-020.md): Cards, product, ecommerce, badge, price, light, hover-lift - [Hochgleitendes Hinzufügen](https://designforai.dev/de/snippet/card-021.md): Cards, product, ecommerce, hover-reveal, minimal, light - [Bewertung mit Farbfeldern](https://designforai.dev/de/snippet/card-022.md): Cards, product, ecommerce, rating, swatches, light - [Rabattband](https://designforai.dev/de/snippet/card-023.md): Cards, product, ecommerce, dark, ribbon, discount - [Warenkorb-Zeile](https://designforai.dev/de/snippet/card-024.md): Cards, product, cart-item, horizontal, quantity, light - [Großes Anführungszeichen](https://designforai.dev/de/snippet/card-025.md): Cards, testimonial, quote, light, serif - [Dunkles Sterne-Zitat](https://designforai.dev/de/snippet/card-026.md): Cards, testimonial, quote, dark, stars, avatar - [Zitat mit Akzentleiste](https://designforai.dev/de/snippet/card-027.md): Cards, testimonial, quote, accent, light, logo - [Milchglas](https://designforai.dev/de/snippet/card-028.md): Cards, glass, glassmorphism, blur, gradient, light - [Nachtglas mit Blobs](https://designforai.dev/de/snippet/card-029.md): Cards, glass, glassmorphism, dark, blur, highlight - [Weich geprägt](https://designforai.dev/de/snippet/card-030.md): Cards, neumorphic, soft-ui, light, embossed, button - [Dunkle geprägte Kennzahl](https://designforai.dev/de/snippet/card-031.md): Cards, neumorphic, soft-ui, dark, stat, embossed - [Harter Schatten brutal](https://designforai.dev/de/snippet/card-032.md): Cards, brutalist, neo-brutalist, hard-shadow, thick-border, light - [Poster mit Sticker-Tag](https://designforai.dev/de/snippet/card-033.md): Cards, brutalist, neo-brutalist, image-top, sticker, hard-shadow - [Rotierende Conic-Kante](https://designforai.dev/de/snippet/card-034.md): Cards, gradient-border, conic, animated, dark, property - [Beschnittener Gradient-Rahmen](https://designforai.dev/de/snippet/card-035.md): Cards, gradient-border, background-clip, light, hover-shift - [Getöntes Glow-Anheben](https://designforai.dev/de/snippet/card-036.md): Cards, hover-lift, glow, image-top, light, shadow - [Perspektivische Neigung](https://designforai.dev/de/snippet/card-037.md): Cards, 3d, tilt, perspective, hover, dark, shine - [Flip beim Hover](https://designforai.dev/de/snippet/card-038.md): Cards, flip, 3d, hover, two-sided, light - [Flip per Tipp](https://designforai.dev/de/snippet/card-039.md): Cards, flip, 3d, toggle, checkbox, no-js, dark - [Gleitende Bildunterschrift](https://designforai.dev/de/snippet/card-040.md): Cards, image, overlay, hover-reveal, caption, slide-up - [Abdunkelndes Overlay](https://designforai.dev/de/snippet/card-041.md): Cards, image, overlay, hover-reveal, icon, dark, zoom - [Bento-Kennzahl-Kacheln](https://designforai.dev/de/snippet/card-042.md): Cards, bento, grid, tiles, layout, light - [Gepunktete Bento-Kachel](https://designforai.dev/de/snippet/card-043.md): Cards, bento, feature, pattern, dots, light - [Erfolgs-Toast](https://designforai.dev/de/snippet/card-044.md): Cards, toast, notification, success, light, icon - [Fehler-Toast mit Countdown](https://designforai.dev/de/snippet/card-045.md): Cards, toast, notification, error, dark, progress, animated - [Release-Zeitleiste](https://designforai.dev/de/snippet/card-046.md): Cards, timeline, steps, list, light, dots - [Schritt-Assistent](https://designforai.dev/de/snippet/card-047.md): Cards, steps, progress, wizard, light, numbered - [Systemtheme-bewusst](https://designforai.dev/de/snippet/card-048.md): Cards, dark-mode, theme, tokens, media-query, adaptive - [Light-Dark-Farben](https://designforai.dev/de/snippet/card-049.md): Cards, dark-mode, theme, light-dark, color-scheme, modern-css - [Schimmer-Skeleton](https://designforai.dev/de/snippet/card-050.md): Cards, skeleton, loading, shimmer, placeholder, animated - [Pulsierende Skeleton-Zeile](https://designforai.dev/de/snippet/card-051.md): Cards, skeleton, loading, pulse, list-item, placeholder - [Datei-Download](https://designforai.dev/de/snippet/card-052.md): Cards, file, download, document, light, icon - [Upload-Dropzone](https://designforai.dev/de/snippet/card-053.md): Cards, file, upload, dropzone, dashed, light, hover - [Link-Vorschau](https://designforai.dev/de/snippet/card-054.md): Cards, link-preview, og, bookmark, image-top, light - [Favicon-Link-Chip](https://designforai.dev/de/snippet/card-055.md): Cards, link-preview, compact, inline, favicon, light - [Großes Datum](https://designforai.dev/de/snippet/card-056.md): Cards, event, date, calendar, big-number, light - [Zeitstreifen](https://designforai.dev/de/snippet/card-057.md): Cards, event, date, dark, time-strip, cta - [Musikplayer](https://designforai.dev/de/snippet/card-058.md): Cards, music, player, media, dark, progress, controls - [Equalizer Now Playing](https://designforai.dev/de/snippet/card-059.md): Cards, music, now-playing, mini, equalizer, animated, light - [Delta-Pille](https://designforai.dev/de/snippet/card-060.md): Cards, stat, kpi, metric, delta, light, dashboard - [Sparkline-Kennzahl](https://designforai.dev/de/snippet/card-061.md): Cards, stat, kpi, sparkline, chart, light, svg - [Fortschrittsring-Kennzahl](https://designforai.dev/de/snippet/card-062.md): Cards, stat, kpi, progress, ring, conic, light - [Feature mit Icon-Kachel](https://designforai.dev/de/snippet/card-063.md): Cards, feature, icon, light, marketing, hover-lift - [Gradient-Icon](https://designforai.dev/de/snippet/card-064.md): Cards, feature, icon, dark, gradient, arrow, hover - [Blog mit Autor-Meta](https://designforai.dev/de/snippet/card-065.md): Cards, blog, article, meta, avatar, image-top, light - [Redaktionelle Essay-Zeile](https://designforai.dev/de/snippet/card-066.md): Cards, blog, article, editorial, serif, horizontal, meta - [Enterprise zweispaltig](https://designforai.dev/de/snippet/card-067.md): Cards, pricing, enterprise, feature-list, cta, light, gradient-top - [Gradient-Ring Skills](https://designforai.dev/de/snippet/card-068.md): Cards, profile, avatar, gradient-ring, tags, light, hover - [Container-Query-Stapel](https://designforai.dev/de/snippet/card-069.md): Cards, container-query, responsive, modern-css, adaptive, light - [Abhaken zum Auswählen](https://designforai.dev/de/snippet/card-070.md): Cards, has, selectable, checkbox, state, modern-css, light - [Radio-Tarifwahl](https://designforai.dev/de/snippet/card-071.md): Cards, has, radio, pricing, selectable, state, light - [Subgrid-ausgerichtete Zeile](https://designforai.dev/de/snippet/card-072.md): Cards, subgrid, grid, aligned, layout, modern-css, light - [Squircle-Ecken](https://designforai.dev/de/snippet/card-073.md): Cards, corner-shape, squircle, modern-css, fallback, light - [Abgeschrägtes Ticket](https://designforai.dev/de/snippet/card-074.md): Cards, corner-shape, bevel, ticket, modern-css, fallback, dark - [Bordkarte mit Kerben](https://designforai.dev/de/snippet/card-075.md): Cards, ticket, notches, mask, dashed, light - [Gestrichelter Gutscheincode](https://designforai.dev/de/snippet/card-076.md): Cards, coupon, discount, dashed, promo, light - [Social-Post](https://designforai.dev/de/snippet/card-077.md): Cards, social, post, feed, avatar, actions, light - [Verschachtelter Kommentar-Thread](https://designforai.dev/de/snippet/card-078.md): Cards, comment, thread, nested, avatar, light - [Chat-Blasen](https://designforai.dev/de/snippet/card-079.md): Cards, chat, messages, bubbles, dark, conversation - [Wetter-Widget](https://designforai.dev/de/snippet/card-080.md): Cards, weather, widget, gradient, big-number, svg, light - [Rezept-Chips](https://designforai.dev/de/snippet/card-081.md): Cards, recipe, food, chips, image-top, light - [Stellenanzeige](https://designforai.dev/de/snippet/card-082.md): Cards, job, listing, tags, logo, light, hover - [Kursfortschritt](https://designforai.dev/de/snippet/card-083.md): Cards, course, learning, progress, image-top, light - [Abgehakte Aufgabe](https://designforai.dev/de/snippet/card-084.md): Cards, task, todo, checkbox, has, state, light - [Haftnotiz](https://designforai.dev/de/snippet/card-085.md): Cards, sticky-note, paper, rotated, handwritten, yellow - [Polaroid-Rahmen](https://designforai.dev/de/snippet/card-086.md): Cards, photo, polaroid, frame, rotated, light, caption - [Glänzende Bezahlkarte](https://designforai.dev/de/snippet/card-087.md): Cards, payment, credit-card, dark, gradient, chip, glossy - [Aufgefächertes Deck](https://designforai.dev/de/snippet/card-088.md): Cards, stack, deck, layered, hover, light, playful - [Eck-Spotlight](https://designforai.dev/de/snippet/card-089.md): Cards, spotlight, glow, radial, hover, dark, subtle - [Driftender Gradient](https://designforai.dev/de/snippet/card-090.md): Cards, gradient, animated, keyframes, colorful, cta - [Papierkorn-Rauschen](https://designforai.dev/de/snippet/card-091.md): Cards, texture, grain, noise, svg, warm, editorial - [Neonröhren-Kante](https://designforai.dev/de/snippet/card-092.md): Cards, neon, glow, dark, cyberpunk, border-glow, hover - [Platzhalter Neu hinzufügen](https://designforai.dev/de/snippet/card-093.md): Cards, placeholder, add-new, dashed, empty-state, light - [Mini-Zitat mit Logo](https://designforai.dev/de/snippet/card-094.md): Cards, testimonial, logo, mini, quote, light, row - [Versions-Changelog](https://designforai.dev/de/snippet/card-095.md): Cards, changelog, release, version, badge, list, light - [Vorher-Nachher-Kennzahlen](https://designforai.dev/de/snippet/card-096.md): Cards, comparison, two-column, metrics, light, versus - [App-Store-Zeile](https://designforai.dev/de/snippet/card-097.md): Cards, app, install, icon, rating, light, row - [Play-Thumbnail](https://designforai.dev/de/snippet/card-098.md): Cards, video, thumbnail, play, duration, dark, hover - [Kartenpin-Adresse](https://designforai.dev/de/snippet/card-099.md): Cards, location, map, pin, svg, address, light - [Newsletter-Anmeldung](https://designforai.dev/de/snippet/card-100.md): Cards, newsletter, form, input, cta, dark, gradient ## Regale - [Pill-Buttons](https://designforai.dev/de/buttons/pill): Voll abgerundete Buttons für Chips, Filter, Toggles und den gelegentlichen Share-Zähler: Outline, Solid, zweifarbig und Glas. Kopiere das CSS oder den Prompt, der einen davon in deinem KI-Coding-Tool nachbaut. - [Outline-Buttons](https://designforai.dev/de/buttons/outline): Outline- und Ghost-Buttons: haarfeine, gestrichelte, doppelte und Fill-on-Hover-Rahmen, für die Zweitaktion, die nicht schreien soll. - [Buttons mit Verlauf](https://designforai.dev/de/buttons/gradient): Verlaufsfüllungen und Verlaufsrahmen, darunter konische Rahmen, die sich mit @property drehen, und Mesh-Flächen, die lesbar bleiben. - [Icon-Buttons](https://designforai.dev/de/buttons/icon): Buttons mit inline SVG: Pfeile, die anstupsen, Pluszeichen, die sich drehen, Downloads, die sich füllen, alle mit zugänglichem Label. - [Animierte Buttons](https://designforai.dev/de/buttons/animated): Shimmer, Spinner, Fortschrittsfüllungen und Pulse, jeweils mit prefers-reduced-motion-Guard bereits im kopierten CSS. - [Solid-Buttons](https://designforai.dev/de/buttons/solid): Flache, gefüllte Buttons in einer Farbe mit sauberem Hover-, Focus- und Active-Zustand. Das Arbeitspferd unter den Regalen. - [3D-Buttons](https://designforai.dev/de/buttons/3d): Buttons mit physischer Kante: gedrückte Zustände, Fasen, abgesetzte Flächen und Neigung, gebaut mit box-shadow und translate, ohne Bilder. - [Glas-Buttons](https://designforai.dev/de/buttons/glass): Durchscheinende Füllungen, Backdrop-Blur und helle Kanten. Sie funktionieren nur über Farbe, deshalb bringt jede Demo ihren eigenen Hintergrund und einen soliden Fallback mit. - [Neumorphische Buttons](https://designforai.dev/de/buttons/neumorphic): Soft-UI-Buttons, die mit einem hellen und einem dunklen Schatten aus der Seite herauswachsen und beim Drücken einsinken. - [Brutalistische Buttons](https://designforai.dev/de/buttons/brutalist): Dicke Rahmen, harte versetzte Schatten, null Radius und laute Füllungen. Der Button rutscht beim Drücken in seinen Schatten. - [Dunkle Buttons](https://designforai.dev/de/buttons/dark): Buttons für dunkle Oberflächen: Tintenfüllungen, haarfeine Kanten und Glows, die auf Fast-Schwarz lesbar sind. - [Neon-Buttons](https://designforai.dev/de/buttons/neon): Röhren-Outlines, Glow-Halos und Flackern, lesbar gehalten durch eine solide Textfarbe unter dem Glow. - [Pricing-Cards](https://designforai.dev/de/cards/pricing): Tarife, ein hervorgehobener Plan, Feature-Listen und ein CTA, jeweils einzeln kopierbar. - [Profil-Cards](https://designforai.dev/de/cards/profile): Avatar, Name, Rolle und ein Status oder eine Folgen-Aktion, von ID-Karten-Mono bis weich abgerundet. - [Bild-Cards](https://designforai.dev/de/cards/image): Cards, bei denen das Bild führt: Bild oben, randlose Cover und Text über einem Fade oder einer Abdunklung. - [Horizontale Cards](https://designforai.dev/de/cards/horizontal): Medium auf der einen Seite, Text auf der anderen, für Listen, Feeds und Suchergebnisse. - [Hover-Cards](https://designforai.dev/de/cards/hover): Cards, die auf Hover reagieren: Lifts, Flips, Reveals und Rahmenwechsel, jeweils mit Reduced-Motion-Guard. - [Dunkle Cards](https://designforai.dev/de/cards/dark): Cards für dunkle Oberflächen: erhabene Flächen, haarfeine Rahmen und Glows auf Fast-Schwarz. ## Stile - [Glassmorphism](https://designforai.dev/de/style/glassmorphism.md): Milchglas-UI, Glaskarten, Backdrop-Blur-UI, transluzentes UI - [Liquid Glass](https://designforai.dev/de/style/liquid-glass.md): Apple Liquid Glass, iOS-26-Glas, refraktives UI, Linsenglas - [Neumorphism](https://designforai.dev/de/style/neumorphism.md): Soft UI, Neomorphism, extrudiertes UI, Soft-Shadow-UI - [Claymorphism](https://designforai.dev/de/style/claymorphism.md): Clay UI, 3D-Clay, aufgeblasenes UI, Puffy UI - [Neo-Brutalismus](https://designforai.dev/de/style/neo-brutalism.md): Neubrutalismus, neo-brutalistisches Web, Gumroad-Stil, Dickrand-UI - [Klassischer Brutalismus](https://designforai.dev/de/style/classic-brutalism.md): Raw Web, brutalistische Websites, Anti-Design, Default-HTML-Ästhetik, Web-1.0-Brutalismus - [Swiss / International Typographic Style](https://designforai.dev/de/style/swiss-international-typographic-style.md): Schweizer Stil, Internationaler Stil, Rasterdesign, Helvetica-Design, Müller-Brockmann-Stil - [Editorial / Magazin](https://designforai.dev/de/style/editorial-magazine.md): Editorial Design, Magazinlayout, Zeitungs-Web, Longform-Editorial - [Minimalismus](https://designforai.dev/de/style/minimalism.md): minimales Webdesign, weniger ist mehr, Clean UI, Weißraum-Design - [Maximalismus](https://designforai.dev/de/style/maximalism.md): maximalistisches Web, mehr ist mehr, Anti-Minimalismus, Visual-Overload-Design - [Bento-Grid](https://designforai.dev/de/style/bento-grid.md): Bento-Box-Layout, Bento-UI, Apple-Keynote-Raster, Feature-Grid-Kacheln - [Midnight SaaS](https://designforai.dev/de/style/midnight-saas.md): Linear-Stil, Dark SaaS, Dark-Mode-Developer-Landing, dunkles Produkt-UI, Raycast-Look - [Terminal / Hacker](https://designforai.dev/de/style/terminal-hacker.md): Hacker-Ästhetik, CLI-UI, Kommandozeilen-Website, Green Screen, TUI-Stil - [Retro-Pixel / 8-Bit](https://designforai.dev/de/style/retro-pixel-8-bit.md): Pixel-Art-UI, 8-Bit-Design, NES-Stil, 16-Bit, Retro-Game-UI - [Y2K / Frutiger Aero](https://designforai.dev/de/style/y2k-frutiger-aero.md): Y2K-Web, Frutiger Aero, Aero Glass, Windows-Vista-Stil, 2000er-Futurismus, Bubble-UI - [Vaporwave](https://designforai.dev/de/style/vaporwave.md): Vaporwave-Ästhetik, a e s t h e t i c Web, Synthwave-nah, Windows-95-Retro - [Cyberpunk / Neon](https://designforai.dev/de/style/cyberpunk-neon.md): Cyberpunk-UI, Neon-UI, Synthwave, Glitch-Design, Night City - [Memphis](https://designforai.dev/de/style/memphis.md): Memphis-Design, Memphis-Group-Stil, 80er-Postmoderne, Squiggle-Design - [Bauhaus](https://designforai.dev/de/style/bauhaus.md): Bauhaus-Design, Bauhaus-Web, geometrische Moderne, Primärfarben-Design - [Art Deco](https://designforai.dev/de/style/art-deco.md): Art-Deco-Web, Gatsby-Stil, 1920er-Luxus, geometrischer Luxus, Deco-Gold - [Flat 2.0](https://designforai.dev/de/style/flat-2-0.md): Flat Design 2.0, Semi-Flat, Almost Flat, Flat mit Schatten, Material-lite - [Material 3 Expressive](https://designforai.dev/de/style/material-3-expressive.md): Material You, Material Design 3, M3 Expressive, Android-16-Stil, dynamische Farbe - [Skeuomorphismus](https://designforai.dev/de/style/skeuomorphism.md): skeuomorphes Design, realistisches UI, iOS-6-Stil, Leder-und-Leinen-UI, Skeuomorph-Revival - [Papier / Notizbuch](https://designforai.dev/de/style/paper-notebook.md): Notizbuch-UI, liniertes Papierdesign, Skizzenbuch-Web, Sticky-Note-UI, Schreibwaren-Stil - [Cremepapier-Warm-Minimal](https://designforai.dev/de/style/cream-paper-warm-minimal.md): warmer Minimalismus, Creme-Minimal, Beige-UI, Cozy Minimal, Papierweiß-Design, Quiet-Luxury-Web - [Corporate Memphis (Illustrationsstil)](https://designforai.dev/de/style/corporate-memphis.md): Alegria-Stil, Big-Tech-Illustration, flache Menschen-Illustration, Facebook-Illustrationsstil, Globohomo (abwertend) - [Monochrom Schwarzweiß](https://designforai.dev/de/style/monochrome-black-and-white.md): Schwarzweiß-Webdesign, monochromes UI, achromatisches Design, farbloses Design, Graustufen-Seite - [Kontraststarke Barrierefreiheit](https://designforai.dev/de/style/high-contrast-accessibility.md): barrierefreies Design, WCAG-AAA-Design, Hochkontrastmodus, inklusives UI, a11y-first - [Pastell Soft UI](https://designforai.dev/de/style/pastel-soft-ui.md): Pastelldesign, weiches Pastell-UI, Candy UI, Dreamy UI, Soft Aesthetic, Kawaii-lite - [Gradient Mesh / Aurora](https://designforai.dev/de/style/gradient-mesh-aurora.md): Mesh-Verlauf, Aurora-Hintergrund, Verlaufskleckse, Nordlicht-UI, Stripe-Verlauf - [Glas + Körnung](https://designforai.dev/de/style/glass-noise-grain.md): Grainy Glass, gefrostetes Körnungs-UI, Noise-Gradient-UI, Filmkorn-Web, texturiertes Glas - [Handgezeichnet / Skizze](https://designforai.dev/de/style/hand-drawn-sketch.md): Sketchy UI, Doodle-Design, handgezeichnete Website, wackeliges UI, Excalidraw-Stil - [Zine / Collage](https://designforai.dev/de/style/zine-collage.md): Zine-Design, Punk-Collage, Cut-and-Paste-Web, DIY-Ästhetik, Xerox-Stil, Riso-Stil - [Japanisch minimal (Ma)](https://designforai.dev/de/style/japanese-minimal.md): japanischer Minimalismus, Ma-Design, Wabi-Sabi-Web, Zen-UI, Muji-Stil, Kanso - [Skandinavisch](https://designforai.dev/de/style/scandinavian.md): Scandi-Design, nordischer Minimalismus, Hygge-Web, Nordic Clean, Danish Modern - [Industrial / Blaupause / Engineering](https://designforai.dev/de/style/industrial-blueprint-engineering.md): Blaupausen-Design, Engineering-UI, technischer Zeichnungsstil, CAD-Ästhetik, Schaltplan-Web - [Luxus / Mode-Serif](https://designforai.dev/de/style/luxury-fashion-serif.md): Luxus-Webdesign, Mode-Editorial, High-End-Markenseite, Couture-Web, Quiet Luxury - [Verspielt rund (Duolingo-artig)](https://designforai.dev/de/style/playful-rounded.md): Duolingo-Stil, klobiges verspieltes UI, 3D-Button-UI, gamifiziertes UI, freundliches rundes Design - [Kinder / Bilderbuch](https://designforai.dev/de/style/kids-storybook.md): Kinder-Website-Design, Bilderbuch-UI, Picture-Book-Stil, Kinder-App-Design, verspielte Illustrationsseite - [Retro-Futurismus](https://designforai.dev/de/style/retro-futurism.md): Retrofuturismus, Atomic-Age-Design, Space-Age-UI, Zukunft der 1950er, Jetsons-Stil, Mid-Century-Futurismus - [Sci-Fi-HUD](https://designforai.dev/de/style/sci-fi-hud.md): HUD-UI, FUI (fiktives UI), Head-up-Display, Raumschiff-Interface, Iron-Man-UI, holografisches UI - [Organisch / Blob-Formen](https://designforai.dev/de/style/organic-blob-shapes.md): Blob-Design, organische Formen-UI, fließende Formen, Amöbenformen, morphende Blobs, biomorphes Web - [Rein typografisch](https://designforai.dev/de/style/typographic-only.md): typgetriebenes Design, Typography-first, Nur-Text-Website, bildloses Design, Schrift als Bild - [Fotografiegeführt](https://designforai.dev/de/style/photography-led.md): Photo-first-Design, bildgeführte Website, randlose Fotografie, visuelle Storytelling-Seite, Lookbook - [Kinetisch / Motion-first](https://designforai.dev/de/style/kinetic-motion-first.md): Motion-Design-Web, kinetische Typografieseite, animierte Website, scrollgesteuertes Design, Awwwards-Stil - [E-Ink / kontrastarm ruhig](https://designforai.dev/de/style/e-ink-low-contrast-calm.md): E-Ink-UI, Calm-Technology-Design, kontrastarmes UI, Papierdisplay-Stil, Lesemodus, Kindle-Stil - [Dashboard / datendicht](https://designforai.dev/de/style/dashboard-data-dense.md): datendichtes UI, Admin-Dashboard-Design, Analytics-UI, Bloomberg-Terminal-Stil, dichtes Enterprise-UI, Tufte-Stil - [Behörde / institutionell klar](https://designforai.dev/de/style/government-institutional-clean.md): Gov-Designsystem, GOV.UK-Stil, USWDS, Civic Design, Public-Sector-UI, institutionelles Web - [Neo-Grotesk Tech](https://designforai.dev/de/style/neo-grotesque-tech.md): Tech-Grotesk-Stil, Helvetica-Tech, Stripe-Vercel-Typografiestil, Developer-Brand-Grotesk, modernistisches SaaS - [AI-Startup-Gradient-Glow (der Default-Slop-Look)](https://designforai.dev/de/style/ai-startup-gradient-glow.md): AI-Landingpage-Stil, lila Verlaufs-SaaS, generische AI-Ästhetik, Gradient-Glow-Dark-Mode, v0-Default-Look, AI-Slop-Design ## Neu in CSS - [Container queries (size) + cqi/cqw units](https://designforai.dev/de/css/container-queries.md): Baseline 2023 (Chrome 105, Safari 16, Firefox 110); seit 2025 breit verfügbar. Reine Namensabfragen (ohne Größenbedingung) sind Baseline 2026 (Chrome 148, Safari 26.4, Firefox 149). - [:has() relational selector](https://designforai.dev/de/css/has-relational-selector.md): Baseline 2023 (Chrome 105, Safari 15.4, Firefox 121); breit verfügbar. - [CSS nesting](https://designforai.dev/de/css/nesting.md): Baseline 2023 (Chrome 120 gelockerte Syntax, Safari 17.2, Firefox 117); breit verfügbar. - [Cascade layers (@layer)](https://designforai.dev/de/css/cascade-layers.md): Baseline 2022 (Chrome 99, Safari 15.4, Firefox 97); breit verfügbar. - [Subgrid](https://designforai.dev/de/css/subgrid.md): Baseline 2023 (Chrome 117, Safari 16, Firefox 71); breit verfügbar. - [color-mix()](https://designforai.dev/de/css/color-mix.md): Baseline 2023 (Chrome 111, Safari 16.2, Firefox 113). Ohne Angabe des Farbraums gilt oklab als Default (Safari 26.2, Chrome, Firefox); mehr als zwei Farben ist neuer (Chrome 150, Firefox 150). - [oklch() / oklab() colors](https://designforai.dev/de/css/oklch.md): Baseline 2023 (Chrome 111, Safari 15.4, Firefox 113); breit verfügbar. - [Relative color syntax (from)](https://designforai.dev/de/css/relative-color-syntax.md): Baseline 2024 (Chrome 119, Safari 16.4, Firefox 128). - [light-dark()](https://designforai.dev/de/css/light-dark.md): Baseline 2024 (Chrome 123, Safari 17.5, Firefox 120). Bildwerte in light-dark() sind neuer (Chrome 150, Firefox 150). - [@property (registered custom properties)](https://designforai.dev/de/css/property.md): Baseline 2024 (Chrome 85, Safari 16.4, Firefox 128). - [text-wrap: balance](https://designforai.dev/de/css/text-wrap.md): Baseline 2024 (Chrome 114, Safari 17.5, Firefox 121). - [Popover attribute + ::backdrop](https://designforai.dev/de/css/popover-attribute.md): Baseline 2024 (Chrome 114, Safari 17, Firefox 125). `popover="hint"` ist noch nicht Baseline (siehe fx-042). - [ improvements (closedby, :modal, requestClose)](https://designforai.dev/de/css/dialog-improvements.md): `` + `:modal` Baseline 2022. `closedby`-Attribut: Chrome 134, Firefox 137; Safari ausstehend (Interop-2026-Punkt), also Stand 2026-09 nicht Baseline. - [@starting-style + transition-behavior: allow-discrete](https://designforai.dev/de/css/starting-style.md): Baseline 2024 (Chrome 117, Safari 17.5, Firefox 129). - [inert attribute](https://designforai.dev/de/css/inert-attribute.md): Baseline 2023 (Chrome 102, Safari 15.5, Firefox 112); breit verfügbar. - [:user-valid / :user-invalid](https://designforai.dev/de/css/user-valid-user-invalid.md): Baseline 2023 (Chrome 119, Safari 16.5, Firefox 88); `:user-invalid` seit Mai 2026 breit verfügbar. - [accent-color](https://designforai.dev/de/css/accent-color.md): Baseline 2022 (Chrome 93, Safari 15.4, Firefox 92); breit verfügbar. Safari 26.2 hat eine automatische Lesbarkeitsanpassung ergänzt. - [Stepped value functions: round(), mod(), rem(), abs(), sign()](https://designforai.dev/de/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/de/css/trigonometric-functions.md): Baseline 2023 (Chrome 111, Safari 15.4, Firefox 108); breit verfügbar. - [animation-composition](https://designforai.dev/de/css/animation-composition.md): Baseline 2023 (Chrome 112, Safari 16, Firefox 115). - [offset-path with shapes (motion path)](https://designforai.dev/de/css/offset-path.md): Baseline 2024 für `offset-path` mit Basic Shapes und coord-box (Chrome 116, Safari 16, Firefox 122). `shape()` in offset-path ist Baseline 2026 (fx-033). - [CSS masking (mask, mask-image, mask-composite) unprefixed](https://designforai.dev/de/css/masking.md): Baseline 2023 (Chrome 120, Safari 15.4, Firefox 53); breit verfügbar. - [backdrop-filter](https://designforai.dev/de/css/backdrop-filter.md): Baseline 2024 (Chrome 76, Safari 18 unpräfixiert, Firefox 103). - [scrollbar-gutter, scrollbar-width, scrollbar-color](https://designforai.dev/de/css/scrollbar-gutter.md): scrollbar-gutter Baseline 2024 (Chrome 94, Safari 18.2, Firefox 97). scrollbar-width Baseline 2024 (Safari 18.2). scrollbar-color neu verfügbar (Chrome 121, Firefox 64, Safari 26.2). - [Exclusive accordions (details name=) + ::details-content](https://designforai.dev/de/css/exclusive-accordions.md): `name`-Attribut 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/de/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/de/css/view-transitions.md): Baseline 2025 (Chrome 111, Safari 18, Firefox 144). `:active-view-transition` Baseline Januar 2026. View-Transition-Typen: Chrome 125, Safari 18.2, Firefox 147. - [:open pseudo-class](https://designforai.dev/de/css/open-pseudo-class.md): Baseline 2026 neu verfügbar (Chrome 133, Firefox 136, Safari 26.5). - [Container style queries (custom properties)](https://designforai.dev/de/css/container-style-queries.md): Baseline 2026 (Chrome 111, Safari 18, Firefox 151 im Mai 2026). Die Range-Syntax für style() ist in Firefox noch hinter einem Flag. - [@scope](https://designforai.dev/de/css/scope.md): Baseline 2026 (Chrome 118, Safari 17.4, Firefox 146 im Dezember 2025). - [field-sizing: content](https://designforai.dev/de/css/field-sizing.md): Baseline 2026 (Chrome 123, Safari 26.2, Firefox 152 im Juni 2026). - [contrast-color()](https://designforai.dev/de/css/contrast-color.md): Baseline 2026 neu verfügbar April 2026 (Chrome 147, Firefox 146, Safari 26). - [shape() for clip-path / offset-path](https://designforai.dev/de/css/shape.md): Baseline 2026 (Chrome 135, Safari 18.4, Firefox 148 im Februar 2026). Chrome 149 erlaubt es auch in `shape-outside`. - [sibling-index() and sibling-count()](https://designforai.dev/de/css/sibling-index.md): Baseline 2026 (Chrome 138, Safari 26.2, Firefox 154 im August 2026). - [text-box-trim / text-box-edge (text-box shorthand)](https://designforai.dev/de/css/text-box-trim.md): Baseline 2026 (Chrome 133, Safari 18.2, Firefox 154 im August 2026). - [Anchor positioning: anchor(), position-area, position-try](https://designforai.dev/de/css/anchor-positioning.md): Baseline 2026 neu verfügbar (Chrome 125, Safari 26.0, Firefox 147 im Januar 2026). Verfeinerungen landen weiter (Firefox 148 position-try-order, Safari 26.2 flip-x/flip-y und position-visibility, Chrome 151/Safari 27 position-anchor: normal). Hinweis: `inset-area` wurde in `position-area` umbenannt; nutze den neuen Namen. - [Name-only container queries + comma-separated queries](https://designforai.dev/de/css/name-only-container-queries.md): Reine Namensabfragen Baseline 2026 (Chrome 148, Safari 26.4, Firefox 149). Kommagetrennte `@container`-Query-Listen: Chrome 150. - [lh / rlh units (and rcap, rch, rex, ric)](https://designforai.dev/de/css/lh.md): `lh`/`rlh` Baseline breit verfügbar Mai 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/de/css/scroll-driven-animations.md): Chrome 115, Safari 26.0; Firefox in Stable hinter `layout.css.scroll-driven-animations.enabled`, aktiviert in Firefox 158 Nightly (laut caniuse). Interop-2026-Fokusbereich; Baseline Ende 2026 erwartet. - [Cross-document view transitions (@view-transition)](https://designforai.dev/de/css/cross-document-view-transitions.md): Chrome 126, Safari 18.2; Firefox noch nicht (caniuse bis 158). Interop-2026-Fokusbereich. - [text-wrap: pretty](https://designforai.dev/de/css/text-wrap-2.md): Chrome 117, Safari 26.0 (verbesserter Algorithmus); Firefox noch nicht (caniuse bis 158). - [popover="hint"](https://designforai.dev/de/css/popover-hint.md): Chrome 133, Firefox 149; Safari ausstehend (Interop-2026-Punkt), nicht Baseline. - [dialog closedby="any" (light-dismiss dialogs)](https://designforai.dev/de/css/dialog-closedby-any.md): Chrome 134, Firefox 137; Safari noch nicht (blockiert seit Juli 2025, Interop-2026-Punkt). - [color-mix() with many colors + light-dark() for images](https://designforai.dev/de/css/color-mix-2.md): Chrome 150, Firefox 150 (beide 2026); Safari für beides ausstehend. - [margin-trim](https://designforai.dev/de/css/margin-trim.md): Safari 16.4 (block; `block inline` in 26.0); Chrome 155 (laut caniuse, Stand 2026-09 noch nicht stable); Firefox noch nicht. Nicht Baseline. - [Standard line-clamp (unprefixed) and -webkit-line-clamp](https://designforai.dev/de/css/standard-line-clamp.md): `-webkit-line-clamp` (mit `display:-webkit-box`) funktioniert überall. Unpräfixiertes `line-clamp`: hinter Flags in Chrome und Firefox (Firefox 154 `layout.css.line-clamp.enabled`), Safari unterstützt die Legacy-Syntax. Nicht Baseline. - [CSS Typed OM (CSSStyleValue, attributeStyleMap, CSS.px)](https://designforai.dev/de/css/typed-om.md): Chrome 66, Safari 16.4; Firefox hinter einem Flag (Nightly ab 154, August 2026). Nicht Baseline. - [revert-rule keyword](https://designforai.dev/de/css/revert-rule-keyword.md): Chrome 148, Firefox 150, Safari 27 Beta. Noch nicht Baseline (Ende 2026 erwartet). - [interpolate-size / calc-size() (animate to height:auto)](https://designforai.dev/de/css/interpolate-size.md): Nur Chrome 129; Firefox und Safari noch nicht (2026-09). Nicht Baseline. - [corner-shape (squircle, scoop, notch, bevel, superellipse())](https://designforai.dev/de/css/corner-shape.md): Nur Chrome 139; Safari und Firefox haben keinen öffentlichen Zeitplan (2026-09). Nicht Baseline. - [CSS if() conditional function](https://designforai.dev/de/css/if.md): Nur Chrome 137; Safari Technology Preview 249 (Juli 2026), Firefox in Entwicklung. Nicht Baseline. - [@function custom functions](https://designforai.dev/de/css/function-custom-functions.md): Nur Chrome 139; Safari Technology Preview 249, Firefox in Entwicklung. Nicht Baseline. - [reading-flow / reading-order](https://designforai.dev/de/css/reading-flow.md): Nur Chrome 137; Safari und Firefox noch nicht (2026-09). Nicht Baseline. - [CSS carousels: ::scroll-button(), ::scroll-marker(), ::scroll-marker-group](https://designforai.dev/de/css/carousels.md): Nur Chrome 135; Safari und Firefox noch nicht (caniuse: keine Unterstützung bis Safari 27 / Firefox 158). Nicht Baseline. - [Scroll-state container queries (stuck, snapped, scrollable, scrolled)](https://designforai.dev/de/css/scroll-state-container-queries.md): Chrome 133 (`scrolled` in Chrome 144); Safari und Firefox noch nicht (2026-09). Nicht Baseline. - [text-fit (fit-to-width headlines)](https://designforai.dev/de/css/text-fit.md): Nur Chrome 150 (Juni 2026). Nicht Baseline. - [background-clip: border-area (gradient borders)](https://designforai.dev/de/css/background-clip.md): Nur Chrome 150 (Juni 2026). Nicht Baseline. - [Gap decorations (column-rule / row-rule in grid and flex)](https://designforai.dev/de/css/gap-decorations.md): Chrome 149 (Juni 2026). Nicht Baseline. - [random() and progress() functions](https://designforai.dev/de/css/random.md): `random()`: Safari 26.2 (verfeinert in 26.5 mit `element-scoped`), Firefox hinter Flag; Chrome in Entwicklung. `progress()`: Safari 26.0, Firefox 154 hinter Flag, Chrome in Entwicklung. Nicht Baseline. - [Grid Lanes (CSS-only masonry)](https://designforai.dev/de/css/grid-lanes.md): Safari 26.4 (April 2026); Chrome, Edge und Firefox hinter Flags. Nicht Baseline. - [Customizable