Kastenschatten verleihen UI-Elementen Tiefe, indem sie Beleuchtung und Höhe simulieren. Gut gestaltete Schatten schaffen eine visuelle Hierarchie und sorgen dafür, dass sich die Benutzeroberflächen taktiler anfühlen.
Passen Sie den horizontalen Versatz, den vertikalen Versatz, die Unschärfe, die Ausbreitung, die Farbe und die Deckkraft an. Die Canvas-Vorschau wird in Echtzeit aktualisiert. Wenn Sie zufrieden sind, kopieren Sie den CSS-Code.
Frequently Asked Questions
Q: Was ist der Unterschied zwischen Unschärfe und Ausbreitung?
Was ist der Unterschied zwischen Unschärfe und Ausbreitung? Unschärfe steuert, wie weich die Schattenkante ist. Spread steuert, wie stark sich der Schatten ausdehnt.
Q: Wie viele Schattenebenen sollte ich verwenden?
Wie viele Schattenebenen sollte ich verwenden? 1-2 Schichten reichen normalerweise aus. Verwenden Sie eingefügte Schatten für die innere Tiefe.
Q: Wie viele Box-Shadow-Ebenen sollte ich verwenden?
Wie viele Box-Shadow-Ebenen sollte ich verwenden? Professionelle Designs verwenden oft 2–4 Schichten für die Tiefe. Beginnen Sie mit einem kleinen, dichten Schatten, fügen Sie einen mittelbreiten Schatten hinzu und fügen Sie optional einen großen Umgebungsschatten hinzu. Das Tool unterstützt unbegrenzte Ebenen.
Q: Welche Auswirkungen hat Box-Shadow auf die Leistung?
Welche Auswirkungen hat Box-Shadow auf die Leistung? Ein paar Kastenschatten haben vernachlässigbare Auswirkungen. Zu viele unscharfe Schatten können die Scrollleistung auf Low-End-Geräten beeinträchtigen. Das Tool zeigt eine Echtzeitvorschau an, damit Sie vor dem Kopieren beurteilen können.
Q: Kann ich Innenschatten (Einschub) erzeugen?
Kann ich Innenschatten (Einschub) erzeugen? Die aktuelle Version konzentriert sich auf äußere Schatten. Für innere Schatten fügen Sie das Schlüsselwort „inset“ manuell am Anfang des generierten CSS-Box-Shadow-Werts hinzu.