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.
Bauhaus-Farben
Die Bauhaus-Schule definierte die moderne Farbtheorie: Primärfarben als Werkzeuge, klare Kontraste statt Ornamente. Diese Palette zitiert die ikonischen Farben von Weimar, Dessau und der deutschen Designgeschichte.
Bauhaus Rot #BE1E2DDas ikonische Rot der Bauhaus-Plakate und Drucksachen
Bauhaus Gelb #FFDE17Das leuchtende Gelb der Bauhaus-Ästhetik
Bauhaus Blau #00509EDas tiefe Blau des Bauhaus-Farbkreises
Ultramarin #120A8FHistorisches Pigment aus Lapislazuli, von Goethe beschrieben
Ocker #C78B2CErdpigment der deutschen Renaissance-Malerei
Petrol #006D7CDas Blaugrün der Nachkriegszeit und des Mid-Century-Designs
Lindgrün #7CBA3DDas frische Grün der Frühlingslinden
Ziegelrot #B22222Die roten Ziegeldächer der Altstädte
Graphit #38383ADer dunkle Grauton der Zeichenkunst und des Industriedesigns
Weiß #F4F4F4Das Weiß der Bauhaus-Wände — Raum und Licht
Q: Was sind Bauhaus-Farben?
Was sind Bauhaus-Farben? Die Bauhaus-Farben sind die Primärfarben Rot (#BE1E2D), Gelb (#FFDE17) und Blau (#00509E) sowie Schwarz und Weiß. Die Schule (1919-1933) nutzte sie als systematische Farbenlehre statt dekorativer Ornamente.
Q: Was ist Ultramarin?
Was ist Ultramarin? Ultramarin (#120A8F) ist ein historisches blaues Pigment, ursprünglich aus dem Halbedelstein Lapislazuli gewonnen. Es war teurer als Gold und wurde für Madonnen-Mäntel in der Renaissance reserviert.