CSS-Box-Shadow-Generator

Was ist CSS-Box-Shadow-Generator?

Der CSS-Box-Shadow-Generator ist ein kostenloser visueller Editor für die CSS-Eigenschaft box-shadow, gebaut für Frontend-Entwickler und Designer. Füge eine oder mehrere Schattenebenen hinzu und stelle für jede Ebene offset-x, offset-y, Weichzeichnungsradius, Spread-Radius, Farbe und den inset-Schalter mit einfachen Zahlenfeldern und einer Farbauswahl ein. Eine Vorschaubox auf einem Schachbrett-Hintergrund zeigt das kombinierte Ergebnis in Echtzeit, und die vollständige box-shadow-Deklaration — jede Ebene durch Kommas getrennt — wird zum Kopieren erzeugt. Nutze ihn, um weiche Höhenschatten, scharfen Neumorphismus, Glow-Effekte oder mehrschichtige Tiefe im Material-Stil zu gestalten, ohne dir die Reihenfolge der Werte merken zu müssen.

So verwendest du CSS-Box-Shadow-Generator

1. Stelle offset-x und offset-y der ersten Ebene (in px) ein, um den Schatten horizontal und vertikal zu verschieben; negative Werte verschieben ihn nach links oder oben.
2. Passe den Weichzeichnungsradius (wie weich der Schatten ist) und den Spread-Radius (wie weit er wächst oder schrumpft) an.
3. Wähle eine Farbe mit dem Farbfeld oder gib einen Hex-Wert ein — ein 8-stelliger Hex-Wert wie #00000040 legt die Transparenz des Schattens fest.
4. Aktiviere das inset-Kontrollkästchen, um den Schatten innerhalb des Elements statt außerhalb zu zeichnen.
5. Klicke auf Ebene hinzufügen, um einen weiteren Schatten darüber zu stapeln, und ordne durch Bearbeiten der Werte neu an; entferne jede Ebene mit ihrem Papierkorb-Button.
6. Beobachte, wie sich die Vorschau aktualisiert, und kopiere dann das erzeugte box-shadow-CSS in dein Stylesheet.

Beispiele

x 0, y 4, Weichzeichnung 12, Spread 0, Farbe #00000040

box-shadow: 0px 4px 12px 0px #00000040;

Ebene 1: 0 1 2 0 #0000001a · Ebene 2: 0 8 24 -4 #00000026

box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;

inset aktiviert, x 0, y 2, Weichzeichnung 6, Spread 0, Farbe #00000059

box-shadow: inset 0px 2px 6px 0px #00000059;

Häufig gestellte Fragen

Wie lautet die Reihenfolge der box-shadow-Werte?

Jede Ebene wird als offset-x, offset-y, Weichzeichnungsradius, Spread-Radius, Farbe geschrieben, mit einem optionalen inset-Schlüsselwort davor. Dieses Tool gibt alle vier Längen immer in px aus (offset-x, offset-y, Weichzeichnung, Spread), sodass die Reihenfolge eindeutig und nachträglich leicht von Hand anzupassen ist.

Kann ich einen halbtransparenten oder farbigen Schatten hinzufügen?

Ja. Gib eine beliebige CSS-Farbe in das Farbfeld ein — ein vollständiger 8-stelliger Hex-Wert wie #00000040 (die letzten beiden Stellen sind der Alpha-Wert) ergibt einen halbtransparenten Schatten, und du kannst benannte Farben oder jeden Hex-Wert verwenden. Das Farbfeld der Auswahl verarbeitet solide #rrggbb-Farben; für Alpha bearbeite das Textfeld.

Wie staple ich mehrere Schatten?

Klicke für jeden zusätzlichen Schatten auf Ebene hinzufügen. Das erzeugte CSS trennt jede Ebene der Reihe nach von oben nach unten mit Kommas — die erste Ebene wird zuletzt (oben) gezeichnet. Nutze dies für mehrschichtige Tiefe im Material-Stil oder um einen äußeren Glow mit einem inset-Highlight zu kombinieren.

Was bewirkt das inset-Kontrollkästchen?

Inset zeichnet den Schatten innerhalb des Elementrands und erzeugt so eine eingedrückte oder nach innen leuchtende Optik statt eines äußeren Schlagschattens. Aktiviere es pro Ebene; du kannst inset- und Außenschatten im selben box-shadow-Wert mischen.

Werden meine Daten irgendwohin hochgeladen?

Nein. Der Generator läuft vollständig in deinem Browser mit JavaScript — deine Farben und Werte werden nie an einen Server gesendet, sodass er privat und nach dem Laden der Seite sogar offline funktioniert.