CSS box-shadow-Generator
Erstellen Sie einen CSS-box-shadow-Wert von Versatz, Unschaerfe, Ausbreitung und Farbe, mit mehreren Ebenen und Voreinstellungen.
CSS box-shadow-Generator
Passen Sie den horizontalen und vertikalen Versatz, den Unschaerferadius, den Ausbreitungsradius und die Farbe an, und dieses Werkzeug setzt die entsprechende box-shadow-Deklaration zusammen, waehrend Sie arbeiten. Es ist fuer den alltaeglichen Fall gedacht - eine Karte, eine Schaltflaeche, ein Modal, das sich von der Seite abheben muss - sowie fuer mehrschichtige Schatten, die aus mehreren uebereinander gestapelten Schatten bestehen, die Technik hinter der weichen, realistischen Tiefe, die in den meisten modernen Design-Systemen verwendet wird.
Das Dropdown-Menue Voreinstellung bietet subtile, mittlere und starke Elevation mit jeweils voreingestellter Ebenenzahl, Versatz und Unschaerfe; waehlen Sie Benutzerdefiniert, um jeden Wert selbst zu bestimmen. Die Option Ebenen steuert, wie viele Schatten uebereinander liegen: Jede zussaetzliche Ebene erhoet den Versatz und die Unschaerfe nach ihrem Index und reduziert ihre Deckkraft, verwandelt einen einzelnen flachen Schatten in einen weichen, ueberzeugenden. Einsatz invertiert den Schatten nach innen fuer gedrueckte Elemente, Deckkraft steuert, wie stark die Farbe wirkt, und der Einheitsschalter gibt px oder rem aus. Aktivieren Sie die Dunkelmodus-Variante fuer eine zweite, staerkere Deklaration in einem @media (prefers-color-scheme: dark)-Block - ein Schatten muss bei dunklem Hintergrund mit hoehere Deckkraft sichtbar bleiben. Waehlen Sie, ob das Ergebnis als einzelne Zeile, eine --box-shadow-Eigenschaft oder eine .box-shadow-Klasse ausgegeben wird, und fuegen Sie eine entsprechende filter: drop-shadow-Zeile fuer Elemente hinzu, die box-shadow nicht erreichen kann, wie ein SVG-Symbol oder ein transparentes PNG.
Jeder Wert ist auf einen sinnvollen Bereich begrenzt, und eine nicht erkannte Farbe faellt auf Schwarz zurueck statt ungaeltiges CSS zu erzeugen, sodass die Ausgabe immer sauber in ein Stylesheet eingefuegt werden kann.
Alles laeuft in Ihrem Browser, waehrend Sie die Steuerelemente anpassen - keine Farbe oder erzeugtes CSS wird jemals irgendwohin gesendet. Kopieren Sie das Ergebnis, laden Sie es als .txt-Datei herunter oder senden Sie es in ein anderes Werkzeug, um weiter daran zu arbeiten.