🔲 CSS Box-Shadow-Generator
CSS box-shadow-Code in Sekunden — ohne Installation, ohne Konto, ohne Internet. Schieberegler für Versatz, Unschärfe, Streuung, Farbe und Deckkraft jeder Ebene anpassen, die Live-Vorschau beobachten und den fertigen CSS-Code kopieren.
Preview
Über
Dieses Werkzeug läuft vollständig im Browser mit reinem JavaScript — deine Designs verlassen das Gerät nie. Stapele mehrere Schatten-Ebenen für Tiefeneffekte, Neumorphismus, Glüheffekte oder dezente Karten-Schatten. Jede Ebene unterstützt Inset-Schatten für Innenleuchten oder gedrückte Schaltflächen. Die Ausgabe ist Standard-CSS, das du direkt in jedes Stylesheet, Framework oder Design-Token einfügen kannst.
Verwendung
- Klicke auf '+ Schatten hinzufügen', um deine erste Schatten-Ebene zu erstellen.
- Nutze die Regler für Versatz X, Versatz Y, Unschärfe, Streuung und Deckkraft, um jeden Schatten zu formen. Aktiviere 'Inset' für einen Innen-Schatten-Effekt.
- Klicke auf das Farbfeld, um eine beliebige Schattenfarbe auszuwählen. Die Live-Vorschau aktualisiert sich bei jeder Anpassung sofort.
- Füge weitere Ebenen für komplexe Mehrfach-Schatten-Effekte wie Neumorphismus oder gestapelte Leuchten hinzu.
- Klicke auf 'CSS kopieren', um die vollständige box-shadow-Deklaration zu kopieren und in dein Stylesheet einzufügen.
Häufige Fragen
- Ist dieser CSS box-shadow-Generator kostenlos?
- Ja, vollständig kostenlos. Kein Konto, keine Testphase, keine versteckten Kosten — einfach die Seite öffnen und Schatten erstellen.
- Funktioniert es offline, ohne Internetverbindung?
- Ja. Das Werkzeug läuft vollständig im Browser ohne Serveraufrufe. Sobald die Seite geladen ist, kannst du die Internetverbindung trennen und es funktioniert weiterhin einwandfrei.
- Sind meine Designdaten privat? Wird irgendetwas hochgeladen?
- Es wird nichts hochgeladen. Alle Schatteneinstellungen werden lokal im Browser verarbeitet und nur im localStorage gespeichert. Keine Daten verlassen dein Gerät.
- Kann ich mehrere Schatten in einer einzigen CSS-Regel stapeln?
- Ja. Klicke beliebig oft auf '+ Schatten hinzufügen'. Das Werkzeug fasst alle Ebenen in einem einzigen, durch Kommas getrennten box-shadow-Wert zusammen — ideal für Neumorphismus, Leuchten oder mehrschichtige Tiefe.
- Wie erstelle ich einen Inset-Innen-Schatten-Effekt?
- Aktiviere das Kontrollkästchen 'Inset' bei einer beliebigen Schatten-Ebene. Ein Inset-Schatten erscheint innerhalb der Elementgrenze — nützlich für gedrückte Schaltflächen oder Innenleuchten. Das generierte CSS enthält das Schlüsselwort 'inset' automatisch.