Box-Shadow-Generator
Visuelles Tool zum Erstellen und Kopieren von CSS box-shadow-Code.
Umgebung
CSS-Ausgabe
border-radius: 24px; background: #e0e0e0; box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25);
Ebene 1
Empfohlene Tools
Handverlesene Dienstprogramme, die Sie nützlich finden könnten
CSS-Boxschatten visuell gestalten
Überblick
Ein Box-Shadow-Generator lässt dich die CSS-Eigenschaft box-shadow per Schieberegler gestalten, statt Zahlen zu raten. Schatten geben Buttons, Karten und Modals Tiefe und Hierarchie, aber die Syntax — Versätze, Weichzeichnung, Ausbreitung, Farbe und inset — ist von Hand mühsam. Dieses Tool zeigt eine Live-Vorschau, während du jeden Wert anpasst, und liefert das exakte CSS zum Kopieren, alles im Browser.
So gehts (Schritt für Schritt)
- 1
Regler anpassen
Stelle horizontalen und vertikalen Versatz, Weichzeichnung, Ausbreitung und Farbe ein, während du die Live-Vorschau beobachtest.
- 2
Schatten bei Bedarf stapeln
Füge mehrere Schattenlagen für Tiefe hinzu oder aktiviere inset für einen inneren Schatten.
- 3
CSS kopieren
Nimm den erzeugten box-shadow-Wert und füge ihn in dein Stylesheet oder deine Komponente ein.
Funktionsweise
Die Eigenschaft box-shadow nimmt horizontalen und vertikalen Versatz, einen Weichzeichnungsradius, eine optionale Ausbreitung und eine Farbe (meist mit Transparenz). Du bewegst je einen Regler und die Vorschau aktualisiert sofort, sodass du genau siehst, wie der Schatten fällt. Das Tool schreibt die passende box-shadow-Deklaration, inklusive mehrerer gestapelter Schatten, falls du sie hinzufügst — bereit zum Einfügen in dein Stylesheet.
Wann verwenden
Einen dezenten Schatten hinzufügen, um eine Karte oder einen Button abzuheben. Einen Schatten aus einem Mockup ohne Wertraten nachbilden. Einen realistischen, geschichteten Schatten mit mehreren gestapelten Lagen bauen. Einen Inset-Schatten für gedrückte oder eingelassene UI-Elemente erstellen. Weichheit und Farbe des Schattens für dunkle oder helle Themes feinabstimmen. Lernen, wie jeder box-shadow-Wert das Ergebnis beeinflusst.
Häufig Gestellte Fragen
Der Reihe nach: horizontaler Versatz, vertikaler Versatz, Weichzeichnungsradius und Ausbreitung. Versätze bewegen den Schatten, Weichzeichnung mildert seine Kante, Ausbreitung vergrößert oder verkleinert ihn. Danach folgt eine Farbe, oft rgba() mit geringer Deckkraft für Dezenz.
Wichtige Hinweise
Schwere oder zahlreiche box-shadows können die Rendering-Leistung beeinträchtigen, besonders bei Animation. Halte Schatten dezent und begrenze gestapelte Lagen auf Elementen, die sich häufig bewegen oder aktualisieren.