CSS Box Shadow Generator

Gestalten Sie mit dem CSS-Box-Shadow-Generator von MiniWebtool visuell mehrschichtige Schatten. Passen Sie einzelne Ebenen an oder probieren Sie Voreinstellungen, prüfen Sie den Live-Effekt und kopieren Sie das resultierende box-shadow-CSS in Ihr Stylesheet.

Fragen zur Bedienung? Frag eine KI

Gemini (kopieren und öffnen)

Füge die kopierte Frage in den Gemini-Chat ein. Du kannst sie auch unten kopieren.

Frage ansehen

Ich möchte das Tool „CSS Box Shadow Generator“ von MiniWebtool verstehen: https://miniwebtool.com/de/css-box-shadow-generator/. Wofür kann ich es verwenden, welche Eingaben oder Einstellungen brauche ich und wie benutze ich es und interpretiere das Ergebnis? Zeige mir ein einfaches Beispiel Schritt für Schritt. Nutze diese Seite als Quelle und antworte auf Deutsch.

Kostenlos nutzbarOhne RegistrierungSofortige Ergebnisse

CSS Box Shadow GeneratorJetzt testen — gratis ▼

Schnellbeispiele:

Live-Vorschau

↕ Ziehen für Versatz

Schatten-Ebenen

Ebenen-Einstellungen

X-Versatz px

Y-Versatz px

Unschärfe px

Ausbreitung px

Farbe

Deckkraft %

Innerer Schatten (Inset)

Kuratierte Presets

Generiertes CSS

Embed CSS Box Shadow Generator Widget

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.

Auf einen Blick

CSS Box Shadow Generator lässt Sie Box-Shadow-Effekte visuell gestalten und das resultierende CSS kopieren. Sie können mehrere Schattenebenen übereinanderlegen, mit Voreinstellungen beginnen und die Wirkung in einer Live-Vorschau sehen.

CSS Box Shadow Generator: Funktionen auf einen Blick
Funktion	Was Sie erhalten	Geeignet für
Schatten-Einstellungen	Schieberegler legen horizontalen und vertikalen Versatz, Weichzeichnungsradius und Ausbreitungsradius fest. Sie können den Schatten in der Vorschau verschieben.	Den Schatten einer Karte oder Schaltfläche feinjustieren
Mehrere Ebenen	Weitere Schattenebenen mit + Schattenebene hinzufügen. Die Ebenen werden als durch Kommas getrennte Schatten in einem box-shadow-Wert geschrieben.	Realistische Tiefe aus Umgebungs- und Hauptschatten aufbauen
Voreinstellungen	Mit Voreinstellungen wie Dezente Karte, Material erhöht, Neumorphismus, Dramatischer Schlagschatten und Farbiges Leuchten beginnen.	Von einem bewährten Look ausgehen und ihn anpassen
Farbe und Deckkraft	Eine Farbe mit dem Farbwähler oder einem Hex-Wert wählen und ihre Deckkraft einstellen.	Getönte Schatten, die zum Hintergrund eines Elements passen
Innenschatten-Umschalter	Eine Ebene auf inset umschalten, damit der Schatten innerhalb des Elements gezeichnet wird.	Gedrückte Schaltflächen und vertiefte Eingabefelder
Vorschauformen	Den Schatten auf verschiedenen Formen und Hintergründen anzeigen und das CSS mit einem Klick kopieren.	Einen Schatten auf hellen und dunklen Flächen prüfen, bevor man ihn einfügt

So verwenden Sie den CSS Box Shadow Generator

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.
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.
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.
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

box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

offset-x / offset-y

Horizontaler und vertikaler Versatz des Schattens. Positive Werte bewegen ihn nach rechts/unten; negative Werte nach links/oben.

blur-radius

Steuert, wie unscharf der Schatten ist. 0 erzeugt eine scharfe Kante; höhere Werte erzeugen einen weicheren, diffuseren Schatten.

spread-radius

Erweitert oder verkleinert den Schatten. Positive Werte machen ihn größer; negative Werte lassen ihn schrumpfen, nützlich für subtile Effekte unter Elementen.

inset

Falls vorhanden, wird der Schatten innerhalb des Elements gezeichnet. Häufig verwendet für gedrückte Buttons und vertiefte Eingabefelder.

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.

Zitieren Sie diesen Inhalt, diese Seite oder dieses Tool als:

"CSS Box Shadow Generator" unter https://MiniWebtool.com/de/css-box-shadow-generator/ von MiniWebtool, https://MiniWebtool.com/

vom miniwebtool-Team. Aktualisiert: 07.03.2026

Entwickler-API verfügbar: Führen Sie dieses Tool in Ihrer App, Automatisierung oder Ihrem Agenten mit einer JSON-HTTP-Anfrage aus. API-Dokumentation ansehen

Chatte mit deiner bevorzugten KI

Gemini (kopieren und öffnen)

Füge die kopierte Frage in den Gemini-Chat ein. Du kannst sie auch unten kopieren.

Frage ansehen

Ich möchte das Tool „CSS Box Shadow Generator“ von MiniWebtool verstehen: https://miniwebtool.com/de/css-box-shadow-generator/. Wofür kann ich es verwenden, welche Eingaben oder Einstellungen brauche ich und wie benutze ich es und interpretiere das Ergebnis? Zeige mir ein einfaches Beispiel Schritt für Schritt. Nutze diese Seite als Quelle und antworte auf Deutsch.

CSS Box Shadow Generator

CSS Box Shadow Generator

Auf einen Blick

So verwenden Sie den CSS Box Shadow Generator

Verständnis der box-shadow Syntax

Tipps für professionelle Box Shadows

Beliebte Schatten-Stile erklärt

Häufig gestellte Fragen

Was ist die CSS-Eigenschaft box-shadow?

Wie erstelle ich mehrere Box-Shadows in CSS?

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

Was ist ein Inset-Box-Shadow?

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

Chatte mit deiner bevorzugten KI

Textbearbeitungswerkzeuge:

Beliebte und aktualisierte Tools:

Mit Pro alles als ein ZIP herunterladen