Box Shadow Generator

Über dieses Tool

Horizontal — positive Werte verschieben den Schatten nach rechts, negative nach links. Vertikal — positive Werte nach unten, negative nach oben. Unschärfe — größere Werte erzeugen weichere, diffusere Schatten. Spreizung — positive Werte vergrößern den Schatten, negative verkleinern ihn.

Aktiviere Innen, um innere Schatten zu erzeugen. Füge mit "+ Schatten hinzufügen" mehrere Schatten hinzu — sie werden in der CSS-Ausgabe durch Kommas getrennt von vorne nach hinten überlagert.

Anleitung

1. Passe Horizontal- und Vertikal-Regler an, um den Schattenversatz festzulegen.
2. Erhöhe die Unschärfe für einen weichen Schatten, oder setze sie auf 0 für einen harten Schatten.
3. Nutze Spreizung, um den Schatten über das Element hinaus zu vergrößern oder zu verkleinern.
4. Klicke auf "+ Schatten hinzufügen", um Schatten zu überlagern und reichere Effekte zu erzielen.

Anwendungsfälle

Designer verwenden box-shadow für Tiefe und Höhe in Karten-UI-Komponenten. Innenschatten erzeugen gedrückte Schaltflächen-Effekte. Mehrere überlagerte Schatten erzeugen realistische Beleuchtung mit Umgebungs- und Hauptlicht.

Häufige Fragen

• Was ist die inset-Option? — Innenschatten erscheinen innerhalb der Element-Grenze statt außerhalb. Sie eignen sich zur Erstellung von "gedrückt"-Effekten bei Eingabefeldern und Schaltflächen.
• Kann ich mehrere Schatten hinzufügen? — Ja. Klicke auf "+ Schatten hinzufügen", um eine weitere Schattenebene hinzuzufügen. Alle Schatten werden zu einer kommaseparierten box-shadow-Deklaration kombiniert.
• Was bewirkt ein negativer Spreizungswert? — Eine negative Spreizung verkleinert den Schatten kleiner als das Element. Kombiniert mit Versatz und Unschärfe entsteht ein subtiler Schatten, der nur an einer Seite hervorschaut.