CSS-Box-Shadow- & Border-Radius-Generator

CSS-Generator für Boxschatten und abgerundete Ecken

🎨 Kostenloser CSS-Generator für box-shadow und border-radius mit Live-Vorschau. Erstellen Sie schöne Schatten, abgerundete Ecken und moderne UI-Effekte. Copy-Paste-fertiger Code für Webdesign.

Die Eigenschaft Box Shadow

Die CSS-Eigenschaft box-shadow fügt Schatteneffekte um den Rahmen eines Elements hinzu. Sie können mehrere Effekte durch Kommas getrennt festlegen. Ein Box-Shadow wird durch X- und Y-Versatz relativ zum Element, Unschärfe- und Spread-Radius sowie Farbe beschrieben.

Syntax: box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];

Schattenparameter

• X-Offset (horizontal): Positive Werte verschieben den Schatten nach rechts, negative nach links
• Y-Offset (vertikal): Positive Werte verschieben den Schatten nach unten, negative nach oben
• Blur-Radius: Höhere Werte erzeugen mehr Unschärfe. 0 bedeutet ein scharfer Schatten
• Spread-Radius: Positive Werte vergrößern den Schatten, negative verkleinern ihn
• Farbe: Jeder CSS-Farbwert (hex, rgb, rgba, hsl)
• Inset: Macht den Schatten zu einem inneren statt äußeren Schatten

Die Eigenschaft Border Radius

Die Eigenschaft border-radius rundet die Ecken der äußeren Rahmenkante eines Elements ab. Sie können einen einzelnen Radius für kreisförmige Ecken oder zwei Radien für elliptische Ecken festlegen.

Syntax: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

Häufige Anwendungsfälle

• Karten: Dezenter Schatten (0 4px 6px rgba(0,0,0,0.1)) mit mittlerem Radius (8px)
• Buttons: Farblicher Schatten passend zur Buttonfarbe für Tiefenwirkung
• Modals: Großer Schatten (0 20px 25px rgba(0,0,0,0.15)) für einen „schwebenden“ Eindruck
• Bilder: Runde Avatare (border-radius: 50%) oder abgerundete Thumbnails (8–16px)
• Eingabefelder: Inset-Schatten für gedrückten/fokussierten Zustand
• Neumorphes Design: Mehrere Schatten (hell und dunkel) mit passendem Hintergrund

Best Practices für Schatten

• Dezente Schatten verwenden: 10–20% Deckkraft reicht meist für Tiefenwirkung
• Y-Offset > X-Offset: Imitiert natürliches Licht von oben
• Größere Unschärfe für „Höhe“: Mehr Unschärfe = wirkt weiter über der Seite
• Schattenfarbe abstimmen: Nutzen Sie die Farbe des Elements in niedriger Deckkraft für Kohärenz
• Performance: Vermeiden Sie box-shadow-Animationen, nutzen Sie stattdessen opacity oder transform

Beliebte Schattenstile

• Material Design: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14)
• Tailwind SM: 0 1px 2px 0 rgba(0,0,0,0.05)
• Tailwind MD: 0 4px 6px -1px rgba(0,0,0,0.1)
• Tailwind LG: 0 10px 15px -3px rgba(0,0,0,0.1)
• Bootstrap: 0 0.5rem 1rem rgba(0,0,0,0.15)

Border-Radius-Muster

• Keine (0px): Scharfe Ecken, moderner minimalistischer Look
• Klein (4px): Dezente Rundung für Inputs und Buttons
• Mittel (8px): Standard für Karten und Container
• Groß (16px+): Freundlicher, zugänglicher Look
• Pill (999px oder 50%): Abgerundete Enden für Tags und Badges
• Kreis (50%): Avatare, Icon-Buttons (erfordert ein quadratisches Element)

Fortgeschrittene Techniken

• Mehrere Schatten: Kombinieren Sie Schatten für mehrschichtige Effekte
• Glow-Effekt: 0 0 20px [Farbe] ohne Versatz
• Neumorphismus: Heller Schatten oben links, dunkler Schatten unten rechts
• Focus Rings: Farbiger Schatten für Barrierefreiheit (0 0 0 3px rgba(color,0.5))
• 3D-Effekt: Mehrere Schatten mit zunehmendem Versatz und Unschärfe

Browser-Unterstützung

Box-shadow und border-radius werden von allen modernen Browsern unterstützt. Für IE8 und älter können Vendor-Prefixes (-webkit-box-shadow, -moz-box-shadow) verwendet werden, was heute jedoch selten nötig ist.

💡 Profi-Tipp: Animieren Sie box-shadow bei Hover-Effekten nicht direkt, da es rechenintensiv ist. Erstellen Sie stattdessen den Schatten auf einem Pseudo-Element (::before oder ::after) und animieren Sie dessen Deckkraft. Das liefert denselben visuellen Effekt mit deutlich besserer Performance – besonders auf Mobilgeräten!