Mehrschichtiger Box-Shadow-Generator
Mehrere CSS-Schatten stapeln für weiche, plastische Tiefe
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Werden mehrere box-shadow-Werte übereinandergelegt, entsteht ein deutlich weicherer und realistischerer Tiefeneindruck als mit einem einzelnen Schatten – dieselbe Technik, die auch in Figma und modernen UI-Frameworks zum Einsatz kommt. Passen Sie Versatz, Weichzeichnung, Ausbreitung, Farbe und Deckkraft jeder Ebene an und beobachten Sie das Ergebnis in der Live-Vorschau, bevor Sie den fertigen CSS-Code kopieren. Alles läuft ausschließlich im Browser, ohne Datenübertragung an einen Server.
Anleitung
- Wählen Sie einen Ausgangspunkt aus den Vorlagen Weicher Schatten, Neon-Glühen oder Retro 3D.
- Wählen Sie eine Ebene aus der Liste und passen Sie X-/Y-Versatz, Weichzeichnung, Ausbreitung und Deckkraft per Regler an.
- Ändern Sie die Schattenfarbe über den Farbwähler oder Hex-Code und aktivieren Sie bei Bedarf den inneren Schatten (inset).
- Fügen Sie mit „+ Ebene hinzufügen“ weitere Schichten hinzu und kopieren Sie anschließend den fertigen CSS-Code.
FAQ
- Wie viele Ebenen kann ich hinzufügen?
- Es gibt kein Limit – fügen Sie beliebig viele hinzu. Nur die letzte verbleibende Ebene lässt sich nicht löschen.
- Kann ich den generierten CSS-Code direkt verwenden?
- Ja, er wird als fertige box-shadow: ...-Deklaration ausgegeben, die Sie direkt in ein Stylesheet oder style-Attribut einfügen können.
- Ändert sich die Vorlage, wenn ich nach der Auswahl Werte anpasse?
- Nein, Vorlagen sind nur ein Ausgangspunkt – nach dem Laden können Sie die Regler frei anpassen und einen eigenen Schatten gestalten.