Developer Tools
Web Utilities
Image ToolsCSS Box Shadow Generator
Erstellen Sie visuell CSS box-shadow-Effekte mit mehreren Ebenen und Echtzeit-Vorschau. Passen Sie Unschärfe, Ausbreitung, Farbe und Deckkraft an.
Schatteneinstellungen
Ebene 1
Vorschau und CSS-Code
.box-element {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.3);
background-color: #ffffff;
border-radius: 8px;
}0px 4px 6px 0px rgba(0, 0, 0, 0.3)Verwandte Tools
Über Dieses Tool
Wie Es Funktioniert
- CSS box-shadow-Effekte mit mehreren Ebenen visuell erstellen
- Horizontalen und vertikalen Versatz für die Positionierung anpassen
- Unschärferadius und Ausbreitung für Weichheit und Größe steuern
- Schattenfarben mit Deckkraftkontrolle anpassen
- Inset-Schatten für Innenleuchteeffekte hinzufügen
- Mehrere Schatten für komplexe Tiefeneffekte schichten
Häufige Anwendungsfälle
- Tiefe und Höhe in Kartendesigns erstellen
- Subtile Schatten zu Schaltflächen und UI-Elementen hinzufügen
- Neumorphische (Soft UI) Interfaces gestalten
- Leuchteffekte für Call-to-Action-Elemente erstellen
- Material Design-Schattenvorgaben implementieren
- Schwebende und gehobene Elementeffekte erstellen
Häufig Gestellte Fragen
Was ist ein box shadow in CSS?
Ein box shadow ist eine CSS-Eigenschaft, die Schatteneffekte um den Rahmen eines Elements hinzufügt. Es ermöglicht, Tiefe und Höhe in Designs durch Schatten zu schaffen, die positioniert, unscharf, ausgebreitet und eingefärbt werden können.
Wie füge ich mehrere Schattenebenen hinzu?
Klicken Sie auf die Schaltfläche '+ Ebene hinzufügen', um weitere Schattenebenen hinzuzufügen. Jede Ebene kann unabhängig mit unterschiedlichen Positionen, Unschärfe, Ausbreitung, Farben und Deckkraft angepasst werden.
Was kontrolliert jeder Schattenparameter?
Der horizontale Versatz verschiebt den Schatten nach links (negativ) oder rechts (positiv). Der vertikale Versatz nach oben (negativ) oder unten (positiv). Der Unschärferadius steuert die Weichheit des Schattens.
Was ist ein inset shadow?
Ein inset-Schatten wird innerhalb des Rahmens des Elements gezeichnet, nicht außerhalb. Er erzeugt den Eindruck, dass das Element in die Oberfläche gedrückt wird. Aktivieren Sie das Kontrollkästchen 'Inset' auf einer Schattenebene.
Wie erstelle ich einen neumorphischen Effekt?
Neumorphismus verwendet zwei Schatten: einen hellen und einen dunklen, auf gegenüberliegenden Seiten. Verwenden Sie die Voreinstellungen 'Neumorphismus' oder 'Neumorphismus Inset' als Ausgangspunkt.
Kann ich negative Ausbreitungswerte verwenden?
Ja! Negative Ausbreitungswerte schrumpfen den Schatten nach innen, bevor Unschärfe angewendet wird. Dies wird im Material Design häufig für realistischere, konzentriertere Schatten verwendet.
Wie kopiere ich den CSS-Code?
Es gibt zwei Kopieroptionen: 'CSS kopieren' liefert die vollständige CSS-Regel, 'Wert kopieren' liefert nur den box-shadow-Wert, der in eine bestehende CSS-Regel eingefügt werden kann.
Welche Schattenvoreinstellungen gibt es?
Das Tool enthält 12 Voreinstellungen: Weich, Mittel, Groß, Extra Groß, Innen, Umriss, Neumorphismus, Neumorphismus Inset, Bunt, Leuchten, Gehoben und Schwebend.
Kann ich einen Leuchteffekt mit box shadow erstellen?
Ja! Verwenden Sie die Voreinstellung 'Leuchten' oder erstellen Sie einen eigenen, indem Sie horizontale und vertikale Versätze auf 0 setzen, einen großen Unschärferadius (20px oder mehr) und eine lebhafte Farbe wählen.
Wie funktioniert die Schattendeckkraft?
Die Deckkraft steuert, wie transparent oder undurchsichtig der Schatten erscheint, von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig). Geringere Deckkraft erzeugt subtile Schatten, höhere dramatischere.
Wird box shadow in allen Browsern unterstützt?
Ja, die CSS box-shadow-Eigenschaft wird in allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari, Edge und mobilen Browsern. Keine Vendor-Präfixe erforderlich.
Kann ich box shadows animieren?
Ja, box shadows können mit CSS-Übergängen oder -Animationen animiert werden. Verwenden Sie die Eigenschaft transition auf box-shadow, z.B.: 'transition: box-shadow 0.3s ease'.