ASAPUtils Logo ASAPUtils

CSS Box-Shadow Generator

Erzeugen und Vorschau von komplexen CSS-Box-Schattierungen mit diesem interaktiven visuellen Builder. Erstellen Sie geschichtete Schatten, innere Schatten und kopieren Sie den genauen CSS-Code sofort.

100% private — this runs entirely in your browser and nothing is uploaded.

Shadow Layers

Shadow 1
10px
10px
20px
0px
20%

CSS Code

box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2);

Was ist der CSS Box-Shadow Generator?

Der CSS Box-Shadow Generator ist ein visuelles, interaktives Werkzeug für Webentwickler und Designer, um komplexe Schatteneffekte zu erstellen, ohne den Code manuell schreiben zu müssen. Sie können Eigenschaften wie horizontalen Versatz, vertikalen Versatz, Unschärferadius, Ausbreitungsradius und Farbe anpassen, um Änderungen in Echtzeit zu sehen.

Anwendung

  1. Regler anpassen: Verwenden Sie die Schieberegler, um den X-Versatz, Y-Versatz, Unschärferadius, Ausbreitung und die Schattenfarbe zu ändern.
  2. Ebenen hinzufügen: Moderne Designs verwenden oft mehrere übereinanderliegende Schatten für einen weicheren Effekt. Klicken Sie auf “Schatten hinzufügen”, um einen weiteren Effekt hinzuzufügen.
  3. Inset umschalten: Aktivieren Sie das Kontrollkästchen “Inset”, damit der Schatten nach innen und nicht nach außen zeigt.
  4. Code kopieren: Sobald Sie mit der Vorschau zufrieden sind, klicken Sie auf die Kopieren-Schaltfläche, um den finalen CSS-Code für Ihr Projekt zu übernehmen.

Warum Layered Shadows verwenden? Das Übereinanderlegen mehrerer Box-Schatten mit unterschiedlichen Opazitäten und Unschärfen kann im Vergleich zu einem einzelnen, krassen Schatten eine viel glattere, natürlicher aussehende Tiefe erzeugen. Dieses Tool macht es einfach, diese Schichten zu visualisieren, bevor man sie in das Stylesheet aufnimmt.