Mehrschichtiger Box-Shadow-Generator
Mehrere Schattenebenen kombinieren und plastische CSS-box-shadow-Effekte erzeugen
Legt man mehrere box-shadow-Ebenen übereinander, wirkt der Schatten deutlich weicher und plastischer als ein einzelner. Position, Weichzeichnung, Farbe und Deckkraft jeder Ebene stellen Sie separat ein und sehen das Ergebnis sofort in der Vorschau. Den fertigen CSS-Code kopieren Sie anschließend direkt in Ihr Projekt. Alle Berechnungen laufen ausschließlich im Browser – nichts wird an einen Server übertragen.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Starten Sie mit einer Vorlage Ihrer Wahl: weicher Schatten, Neon-Glow oder Retro-3D.
- Wählen Sie in der Ebenenliste die zu bearbeitende Ebene aus und passen Sie X-/Y-Versatz, Blur, Spread und Deckkraft über die Regler an.
- Ändern Sie die Schattenfarbe per Farbwähler oder Hex-Code und aktivieren Sie bei Bedarf den Innenschatten (inset).
- Fügen Sie über „+ Ebene hinzufügen“ weitere Schichten hinzu und kopieren Sie zum Schluss den fertigen CSS-Code.
FAQ
- Wie viele Ebenen kann ich hinzufügen?
- Beliebig viele – es gibt keine Obergrenze. Nur die letzte verbleibende Ebene lässt sich nicht löschen.
- Kann ich den erzeugten CSS-Code direkt verwenden?
- Ja. Der Code wird in der Form „box-shadow: …“ kopiert und lässt sich unverändert in eine CSS-Datei oder ein style-Attribut einfügen.
- Geht die Vorlage verloren, wenn ich anschließend Werte ändere?
- Nein. Die Vorlagen sind lediglich ein Ausgangspunkt – danach passen Sie alle Werte frei über die Regler an und gestalten Ihren eigenen Schatten.