Box-Shadow-Generator

Ähnliche Tools: CSS & DESIGN

Alle anzeigen

Code zu Bild

Code-Snippets in ansprechende Screenshots verwandeln, mit mehreren Farbschemata

Öffnen →

CSS-Verlaufsgenerator

Lineare, radiale und konische Verläufe visuell gestalten und das CSS sofort kopieren

Öffnen →

💬 Kommentare

?

Noch keine Kommentare. Schreiben Sie den ersten!

Was ist Box-Shadow-Generator?

Der Box-Shadow-Generator ermöglicht es Ihnen, Schatteneffekte per Schieberegler in Echtzeit anzupassen, unterstützt mehrere übereinanderliegende Schatten und bietet 8 ausgewählte Voreinstellungen, darunter Material, Neumorphism und Neon – anschließend kopieren Sie den CSS-Code direkt.

Funktionen

5 einstellbare Parameter: X-Versatz (links/rechts), Y-Versatz (oben/unten), Unschärferadius (Weichheit der Kanten), Ausbreitungsradius (Gesamtgröße) und Deckkraft – jeweils mit eigenem Schieberegler.
Mehrschichtige Schatten: Mit „Schattenebene hinzufügen“ stapeln Sie mehrere Schatten – in der Praxis werden oft 2–3 Ebenen für eine natürlichere Tiefenwirkung verwendet (wie in Material Design).
Inset-Schatten: Mit aktiviertem Inset wird der Schatten in das Element hinein umgekehrt – ideal für gedrückte Schaltflächen oder vertiefte Karten.
3 Vorschau-Hintergründe: Wechseln Sie zwischen Hell, Dunkel und Verlauf, um zu prüfen, wie der Schatten auf verschiedenen Untergründen wirkt.
8 ausgewählte Voreinstellungen: Flat (kein Schatten), Subtle (dezenter Schatten), Card (Karte), Material (dreischichtig nach Material Design), Dramatic (große Tiefe), Neon Blue (Neon), Neumorphism und Inset (Innenschatten).
CSS mit einem Klick kopieren: Sie erhalten die vollständige Syntax box-shadow: ...; zum direkten Einfügen in CSS-Dateien, das style-Attribut von Tailwind oder beliebige Design-Tools.

Anleitung

Passen Sie mit den Schiebereglern Versatz, Unschärfe, Ausbreitung und Deckkraft an – die Vorschau wird sofort aktualisiert.

Häufig gestellte Fragen

Welche Optionen bietet der Box-Shadow-Generator?

X-/Y-Versatz, Unschärfe, Ausbreitung, Farbe mit Deckkraft, Inset-Schatten und das Stapeln mehrerer Ebenen.

Kann ich mehrere Schatten hinzufügen?

Ja. Klicken Sie auf „Schatten hinzufügen“, um mehrere box-shadow-Ebenen zu stapeln.

Wie verwende ich das erzeugte CSS?

Kopieren Sie das ausgegebene CSS und fügen Sie es in Ihr Stylesheet oder Inline-Style ein.