CSS Box Shadow Generator

Settings

X Offset (px)

4px

Y Offset (px)

8px

Blur (px)

16px

Spread (px)

0px

Shadow Color

15%

Inset Inset shadow

Presets

Preview

Preview Box

CSS Code

box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.15);

es ermöglicht Entwicklern und Designern, CSS-Box-Schatteneffekte visuell zu erstellen, indem sie Parameter in Echtzeit anpassen und dann den generierten Code direkt in ihre Projekte kopieren – ohne manuelle Berechnung.

So verwenden Sie den CSS-Box-Schatten-Generator

Schritt-für-Schritt-Anleitung zur Benutzeroberfläche des Tools:

X- und Y-Versatz festlegen – Ziehen Sie die Regler für den horizontalen und vertikalen Versatz, um den Schatten relativ zum Element zu positionieren. Positives X bewegt den Schatten nach rechts; negatives bewegt ihn nach links. Positives Y bewegt ihn nach unten; negatives bewegt ihn nach oben.
Weichzeichnungsradius anpassen – Höhere Weichzeichnungswerte erzeugen weichere, diffusere Schatten. Eine Weichzeichnung von 0 ergibt einen scharfen Schatten mit harten Kanten.
Überlaufradius steuern – Der Überlauf erweitert oder verkleinert den Schatten über die Abmessungen des Elements hinaus. Positive Werte machen den Schatten größer; negative Werte verkleinern ihn.
Schattenfarbe und Deckkraft wählen – Wählen Sie jede Farbe mit der Farbauswahl und verwenden Sie den Deckkraftregler, um die Transparenz zu steuern. Halbdurchsichtige Schatten (z. B. rgba mit geringer Alpha) wirken auf den meisten Hintergründen natürlicher.
Innenliegenden Schatten umschalten – Aktivieren Sie die Option „Innenliegend“, um den Schatten innerhalb des Elements umzukehren und einen gepressten oder geprägten Effekt zu erzeugen.
Voreinstellung anwenden – Klicken Sie auf eine der vorgefertigten Voreinstellungen, um sofort klassische Schattenstile zu erhalten.
CSS-Code kopieren – Klicken Sie auf „Kopieren“, um die generierte box-shadow-Deklaration in Ihre Zwischenablage zu kopieren.

Grundlagen der CSS-`box-shadow`-Eigenschaft

Eine technische Erklärung der vollständigen Syntax:

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

Parameter erklärt:

offset-x – Horizontale Distanz des Schattens vom Element.
offset-y – Vertikale Distanz des Schattens vom Element.
blur-radius – Die Weichheit der Schattenkanten. Null bedeutet scharf.
spread-radius – Steuert, wie stark sich der Schatten ausdehnt oder zusammenzieht.
color – Jede gültige CSS-Farbe (HEX, RGB, RGBA, HSL). RGBA wird empfohlen, da es die Steuerung der Deckkraft in einem einzigen Wert ermöglicht.
inset – Optionales Schlüsselwort, das die Schattenrichtung umkehrt und ihn innerhalb des Rahmens des Elements platziert.

Box-Schatten-Voreinstellungen – Wann jeder Stil verwendet werden sollte

Beschreibung und Anwendungsfall für jede der 6 integrierten Voreinstellungen:

Voreinstellung	Stil	Am besten geeignet für
Subtiler Auftrieb	0 1px 3px, 10 % Deckkraft	Kleine UI-Elemente, Tags, Chips
Leichter Kartenschatten	0 4px 6px, 10 % Deckkraft	Kartenkomponenten, Modals
Mittlere Tiefe	0 10px 25px, 15 % Deckkraft	Hero-Bereiche, Feature-Karten
Tiefe Erhebung	0 20px 40px, 20 % Deckkraft	Dropdowns, schwebende Panels
Harter Farbenschatten	4px 4px 0px blau	Retro/brutalistischer UI-Stil
Innenliegender Schein	Inset 0 0 20px dunkelblau	Aktive Eingaben, fokussierte Zustände

Außenliegender Schatten vs. Innenliegender Schatten – Was ist der Unterschied?

Erklärung der visuellen und funktionalen Unterscheidung zwischen einem Standard-Schatten (außenliegend) und einem innenliegenden Schatten:

Außenliegender Schatten erzeugt die Illusion, dass ein Element über der Seitenoberfläche schwebt – ideal für Karten, Schaltflächen und Container.
Innenliegender Schatten lässt ein Element eingesunken oder in die Seite gedrückt erscheinen – wird häufig für aktive Schaltflächenzustände, Texteingabefelder und Felder verwendet.

Tipps für natürlich aussehende CSS-Box-Schatten

Praktische Designberatung:

Verwenden Sie RGBA-Farben mit geringer Deckkraft (0,10–0,20) anstelle von voll deckenden Farben.
Halten Sie die Schattenrichtung auf einer Seite konsistent (typischerweise nach unten und leicht nach rechts, was eine Lichtquelle von oben links simuliert).
Stapeln Sie mehrere Schatten für realistischere Tiefe (weicher breiter Schatten + enger dunkler Schatten).
Vermeiden Sie übermäßig große Weichzeichnungswerte bei kleinen Elementen – sie wirken unproportional.
Farbige Schatten (z. B. blauer Schein auf einem blauen Button) sind eine moderne Designtechnik für markenkonforme Tiefeneffekte.

CSS `box-shadow` vs. `filter: drop-shadow()` – Hauptunterschiede

Avergleichstabelle oder kurze Erklärung:

box-shadow berücksichtigt die rechteckige Bounding Box des Elements, unabhängig von der Transparenz.
drop-shadow() folgt der tatsächlichen sichtbaren Form eines Elements (einschließlich transparenter PNGs).
box-shadow unterstützt inset; drop-shadow() nicht.
box-shadow unterstützt mehrere gestapelte Ebenen; drop-shadow() nicht.

Browserunterstützung und browserübergreifende Kompatibilität

Beachten Sie, dass box-shadow in allen modernen Browsern (Chrome, Firefox, Safari, Edge, Opera) vollständig unterstützt wird und dies seit IE9 der Fall ist. Die Präfixe -webkit- und -moz- werden für moderne Projekte nicht mehr benötigt, können aber für die Unterstützung älterer Versionen beibehalten werden.

Gängige Anwendungsfälle für CSS-Box-Schatten

Reale Design-Szenarien:

Card UI-Komponenten – Hervorhebung von Karten über dem Seitenhintergrund.
Navigationsleisten – Hinzufügen eines unteren Schattens, um Tiefe im Header zu erzeugen.
Schaltflächen – Simulieren eines 3D-Drückeffekts bei Hover-/Aktivzuständen.
Modals und Dialoge – Trennung von Overlays vom Hintergrund.
Formularfelder – Innenliegender Schein im Fokus-Zustand für Barrierefreiheit und Benutzerfreundlichkeit.
Bilder – Rahmung von Fotos oder Thumbnails mit einem subtilen Schattenrand.
Tooltips – Schwebende Mikro-UI-Elemente mit einem subtilen Drop-Schatten.

Häufig gestellte Fragen

Was ist ein CSS-Box-Schatten-Generator?

Ein CSS-Box-Schatten-Generator ist ein Online-Tool, mit dem Sie Schattenparameter – Versatz, Weichzeichnung, Überlauf, Farbe und Deckkraft – visuell anpassen können und das sofort die einsatzbereite box-shadow CSS-Deklaration erzeugt, die Sie direkt in Ihre Stylesheet einfügen können.

Ist dieser CSS-Box-Schatten-Generator kostenlos nutzbar?

Ja, das Tool ist komplett kostenlos. Es ist keine Registrierung, kein Download und keine Zahlung erforderlich. Passen Sie einfach die Regler an, sehen Sie sich das Ergebnis live an und kopieren Sie Ihren CSS-Code.

Wie kopiere ich den CSS-Code aus dem Box-Schatten-Generator?

Nachdem Sie Ihre Schatteneinstellungen konfiguriert haben, erscheint die generierte box-shadow-Eigenschaft im CSS-Ausgabefeld am unteren Rand des Tools. Klicken Sie auf die Schaltfläche „Kopieren“, um sie in Ihre Zwischenablage zu kopieren und in Ihre CSS-Datei einzufügen.

Was bewirkt die Option „Innenliegend“ im CSS-Box-Schatten-Generator?

Das Aktivieren von „Innenliegend“ wendet den Schatten innerhalb des Rahmens des Elements anstelle außerhalb. Dies wird häufig verwendet, um einen vertieften oder gepressten Effekt auf Schaltflächen und Eingabefelder zu erzielen.

Kann ich mit diesem Box-Schatten-Generator einen farbigen Schein-Effekt erstellen?

Ja. Wählen Sie einfach eine lebhafte Farbe aus der Farbauswahl (z. B. Blau oder Lila) und verwenden Sie eine moderate Weichzeichnung mit einem Überlaufwert von 0. Farbige Schatten sind beliebt, um Neon-Schein- oder markenfarbene Tiefeneffekte zu erzielen.

Was steuert der „Spread“-Regler in CSS Box Shadow?

Der Überlaufradius erweitert oder verkleinert den Schatten relativ zur Größe des Elements. Ein positiver Überlauf macht den Schatten größer als das Element; ein negativer Wert macht ihn kleiner, was nützlich ist, um einen engen, realistischen Tiefeneffekt zu erzielen.

Kann ich mehrere Box-Schatten auf einem Element verwenden?

Ja, CSS unterstützt mehrere Box-Schatten auf einem einzelnen Element, indem Werte mit einem Komma getrennt werden, z. B.: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.15);. Das Stapeln eines engen dunklen Schattens mit einem breiten weichen Schatten erzeugt einen sehr realistischen Tiefeneffekt.

Was ist der Unterschied zwischen Weichzeichnung und Überlauf im CSS Box Shadow Generator?

Weichzeichnung steuert, wie weich oder diffus die Schattenkanten erscheinen. Überlauf steuert die Gesamtgröße des Schattens relativ zum Element. Sie können einen großen weichen Schatten (hohe Weichzeichnung, null Überlauf) oder einen harten erweiterten Schatten (null Weichzeichnung, positiver Überlauf) haben.

Welches Farbformat sollte ich für CSS Box Schatten verwenden?

RGBA ist das flexibelste Format, da es Farbe und Deckkraft in einem Wert kombiniert, z. B. rgba(0,0,0,0.15). HEX-Farben können ebenfalls verwendet werden, erfordern jedoch eine separate Deckkraft-Eigenschaft oder das neuere 8-stellige HEX-Format. Der Generator erledigt all dies automatisch.

Funktioniert die CSS <code>box-shadow</code>-Eigenschaft in allen Browsern?

Ja. Die box-shadow-Eigenschaft wird in allen modernen Browsern, einschließlich Chrome, Firefox, Safari, Edge und Opera, vollständig unterstützt. Für moderne Projekte sind keine Vendor-Präfixe (-webkit-, -moz-) erforderlich.