CSS Box Shadow Generator

CSS Box Shadow Generator

Mit dem CSS Box Shadow Generator können Sie visuell box-shadow-Effekte entwerfen und sofort produktionsfertiges CSS kopieren. Stapeln Sie mehrere Schatten-Ebenen, wählen Sie aus kuratierten Presets, die von Material Design, Tailwind CSS und Neumorphismus inspiriert sind, oder ziehen Sie direkt auf die Vorschau, um Ihren Schatten zu positionieren. Alles läuft in Ihrem Browser ab — Ihr Code verlässt die Seite nie.

So verwenden Sie den CSS Box Shadow Generator

1. Schatten-Steuerelemente anpassen — Verwenden Sie die Schieberegler, um den horizontalen Versatz (X), den vertikalen Versatz (Y), den Unschärferadius und den Ausbreitungsradius einzustellen. Sie können auch direkt auf den Vorschaubereich ziehen, um den Schatten intuitiv neu zu positionieren.
2. Farbe und Deckkraft wählen — Wählen Sie eine Schattenfarbe mit dem Farbwähler und verfeinern Sie die Transparenz mit dem Deckkraft-Schieberegler. Die Vorschau aktualisiert sich in Echtzeit.
3. Mehrere Ebenen oder Presets hinzufügen — Klicken Sie auf + Schatten-Ebene hinzufügen, um Schatten für realistische Tiefe zu stapeln. Oder wählen Sie ein kuratiertes Preset (Material, Tailwind, Neumorphismus usw.), um mit einem bewährten Design zu beginnen.
4. CSS kopieren — Klicken Sie auf Kopieren, um den generierten box-shadow Code zu kopieren und direkt in Ihr Stylesheet einzufügen.

Verständnis der box-shadow Syntax

Tipps für professionelle Box Shadows

• Mehrere Schatten schichten — Reale Objekte werfen komplexe Schatten. Die Verwendung von 2-3 Ebenen (eine weiche Umgebungsschicht + eine schärfere Lichtschicht) erzeugt viel realistischere Ergebnisse als ein einzelner Schatten.
• Niedrige Deckkraft verwenden — Schatten mit 8-20% Deckkraft wirken natürlich. Vermeiden Sie schwarze Schatten mit hoher Deckkraft, da diese hart und veraltet wirken können.
• Lichtrichtung anpassen — Halten Sie die Schattenversätze in Ihrer gesamten Benutzeroberfläche konsistent, um eine einzige Lichtquelle zu simulieren. Inkonsistente Schatten zerstören die visuelle Illusion.
• Farbige Schatten — Versuchen Sie anstelle von Schwarz einen dunkleren Farbton der Hintergrundfarbe des Elements zu verwenden, um einen stimmigeren, modernen Look zu erzielen.
• Negativer Spread — Ein negativer Spread-Wert lässt den Schatten kleiner als das Element schrumpfen und erzeugt so einen subtilen Kontaktschatten, der Elemente ohne sichtbare Kanten erdet.

Beliebte Schatten-Stile erklärt

• Material Design Elevation — Verwendet zwei Schatten-Ebenen: einen weicheren Umgebungsschatten und einen schärferen Hauptschatten. Verschiedene Höhenstufen (1-5) erhöhen den Versatz und die Unschärfe schrittweise.
• Tailwind CSS Utilities — Tailwind bietet die Klassen shadow, shadow-md, shadow-lg, shadow-xl und shadow-2xl an, die jeweils zweischichtige Schatten verwenden, die für gängige Karten- und Modal-Anwendungsfälle optimiert sind.
• Neumorphismus — Erzeugt einen weichen, extrudierten Kunststoffeffekt durch zwei entgegengesetzte Schatten (einen hellen, einen dunklen). Funktioniert am besten auf hellgrauen Hintergründen, wo beide Schatten sichtbar sind.
• Glassmorphismus — Kombiniert einen subtilen Schatten mit Backdrop-Filter-Unschärfe und halbtransparenten Hintergründen. Der Schatten verleiht Tiefe unter dem Milchglaseffekt.

Häufig gestellte Fragen

Was ist die CSS-Eigenschaft box-shadow?

Die CSS-Eigenschaft box-shadow fügt Schatteneffekte um den Rahmen eines Elements hinzu. Sie akzeptiert Werte für horizontalen Versatz, vertikalen Versatz, Unschärferadius, Ausbreitungsradius und Farbe. Mehrere Schatten können durch Kommata getrennt werden, um geschichtete Tiefeneffekte zu erzielen.

Wie erstelle ich mehrere Box-Shadows in CSS?

Mehrere Box-Shadows werden erstellt, indem jede Schattendefinition durch ein Komma getrennt wird. Zum Beispiel: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1). Jeder Schatten wird über dem vorherigen gerendert, wobei der erste Schatten ganz oben erscheint.

Was ist der Unterschied zwischen box-shadow und drop-shadow?

box-shadow wendet den Schatten auf die rechteckige Box eines Elements an, während filter: drop-shadow() der tatsächlichen Form folgt, einschließlich transparenter Bereiche. box-shadow unterstützt Ausbreitungsradius und Inset-Modus, was drop-shadow nicht tut. Für standardmäßige rechteckige Elemente wird box-shadow häufiger verwendet und ist performanter.

Was ist ein Inset-Box-Shadow?

Ein Inset-Box-Shadow erscheint innerhalb des Elements anstatt außerhalb. Er wird durch Hinzufügen des Schlüsselworts inset vor den Schattenwerten erstellt. Inset-Schatten werden häufig für gedrückte Schaltflächeneffekte, das Styling von Eingabefeldern und die Erstellung von vertieften oder gravierten Optiken verwendet.

Was sind gute box-shadow Werte für einen dezenten Karteneffekt?

Ein beliebter dezenter Kartenschatten verwendet zwei Ebenen: 0 1px 3px rgba(0,0,0,0.12) für den nahen Schatten und 0 1px 2px rgba(0,0,0,0.24) für die Definition. Tailwind CSS verwendet 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1) für seine Standard-Schatten-Utility.