ZenovayTools

CSS Box Shadow Generator

Entwerfen Sie CSS Box Shadows mit visuellen Steuerelementen. Passen Sie Offset, Unschärfe, Ausbreitung und Farbe an.

Shadow Layers

Shadow 1
0px
4px
12px
-2px
20%
CSS
box-shadow: 0px 4px 12px -2px rgba(0, 0, 0, 0.20);

So verwenden Sie CSS Box Shadow Generator

  1. 1Passen Sie die horizontalen und vertikalen Offset-Schieberegler an.
  2. 2Stellen Sie den Unschärferadius und die Ausbreitung ein, um die Schattenform zu steuern.
  3. 3Wählen Sie eine Schattenfarbe und Deckkraft.
  4. 4Schalten Sie die Inset-Option für innere Schatten um.
  5. 5Kopieren Sie den generierten CSS Box-Shadow-Code.
ZenovayAnalytics

Wissen Sie, was Ihre Besucher wirklich tun.

  • Besucher-Tracking in Echtzeit
  • Datenschutz zuerst, kein Cookie-Banner
  • In zwei Minuten eingerichtet
Zenovay entdecken

Verwandte Tools

CSS Gradient Generator
Erstellen Sie schöne CSS-Gradienten mit einem visuellen Editor. Lineare, radiale und konische Gradienten.
CSS Border Radius Generator
Erstellen Sie benutzerdefinierte Border-Radius-Werte mit visuellen Steuerelementen. Verknüpfen oder trennen Sie Ecken für schnelle Anpassungen.
CSS Flexbox Playground
Erlernen und generieren Sie CSS Flexbox Layouts visuell. Passen Sie Richtung, Ausrichtung, Umbruch und Lücke in Echtzeit an.
CSS Grid Generator
Erstellen Sie CSS Grid-Layouts mit einem visuellen Editor. Definieren Sie Spalten, Zeilen, Lücken und verteilen Sie Zellen über Bereiche.

Häufig gestellte Fragen

Wie funktionieren box-shadow-Werte?▾
box-shadow nimmt offset-x, offset-y, Unschärferadius, Ausbreitungsradius und Farbe. Der Offset steuert die Position, die Unschärfe die Weichheit und die Ausbreitung die Größe. Ein negativer Ausbreitungsradius macht den Schatten kleiner als das Element.
Kann ich mehrere Schatten hinzufügen?▾
Ja. Klicken Sie auf „Schatten hinzufügen", um weitere Schattenebenen hinzuzufügen. Mehrere Schatten sind im modernen Design üblich, um Tiefe und Erhebungseffekte zu erzeugen.
Was bewirkt die inset-Option?▾
Das inset-Schlüsselwort ändert den Schatten von einem äußeren Schatten (Schlagschatten) zu einem inneren Schatten. Dadurch entsteht ein gedrücktes oder vertieftes Erscheinungsbild.
Kann ich die Schattendeckkraft steuern?▾
Ja. Jede Schattenebene verfügt über einen Deckkraftregler (0–100 %). Das Tool generiert rgba()-Farbwerte mit der angegebenen Deckkraft.
Kann ich dieses Tool auf meinem Smartphone verwenden?▾
Ja, der Box-Shadow-Generator funktioniert in jedem modernen mobilen Browser. Passen Sie Schattenparameter mit Schiebereglern an und kopieren Sie das CSS auf jedem Gerät.
Funktioniert das generierte CSS mit Tailwind CSS?▾
Ja. Sie können den generierten box-shadow-Wert mit der Arbitrary-Value-Syntax von Tailwind wie shadow-[value] verwenden oder ihn als benutzerdefinierten Schatten in Ihrer tailwind.config.js definieren.
Wie viele Schattenebenen kann ich hinzufügen?▾
Sie können mehrere Schattenebenen hinzufügen, um komplexe Tiefeneffekte zu erzeugen. Jede Ebene hat unabhängige Steuerelemente für Offset, Unschärfe, Ausbreitung, Farbe, Deckkraft und inset, sodass realistische Erhebungsdesigns möglich sind.