◻ One toolkit, every design task

Schattengenerator

Interactive box-shadow builder with multi-layering, real-time Canvas preview, and CSS output.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

◻ Schattengenerator

Box-Shadow-Guide

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.

Pro Tips

FAQ

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.