box-shadow:
    0px 4px 6px -1px rgba(0, 0, 0, 0.1);

Kostenloser Online-Generator für CSS-Boxschatten — visueller Schatten-Builder

Entwerfen Sie schöne CSS-Boxschatten visuell mit einem Live-Vorschau. Dieser kostenlose Boxschatten-Generator unterstützt mehrere Schichten, Voreinstellungen, eingebaute Schatten und generiert sofort verwendbaren CSS-Code.

Was ist ein Boxschatten-Generator?

Ein Boxschatten-Generator ist ein visuelles Werkzeug, das Web-Designer und Entwickler dabei unterstützt, CSS-box-shadow-Werte zu erstellen, ohne manuell Pixelwerte zu schreiben. Stattdessen müssen Sie nicht erraten, welche Zahlen verwendet werden sollen und den Browser neu laden, sondern Sie können Schieberegler anpassen und sehen sofort das Ergebnis.

Die CSS-box-shadow-Eigenschaft fügt Schatteneffekte um den Rahmen eines Elements hinzu. Es ist eine der am häufigsten verwendeten CSS-Eigenschaften, um Tiefe, Elevation und visuelle Hierarchie in modernen Web-Oberflächen zu erstellen.

So verwenden Sie diesen Boxschatten-Generator

1. Wählen Sie eine Voreinstellung — Beginnen Sie mit einem subtilen, mittleren oder starken Schatten, oder beginnen Sie von Grund auf.
2. Anpassen der Schieberegler — Steuern Sie Offset X, Offset Y, Verschmierung, Ausdehnung, Farbe und Opazität.
3. Ein- und Ausblenden — Schalten Sie zwischen einem äußeren und einem inneren Schatten um.
4. Schichten hinzufügen — Stapeln Sie mehrere Schatten für komplexe Effekte.
5. Vorschau anpassen — Ändern Sie die Hintergrund- und Boxfarben, um Ihrem Design zu entsprechen.
6. CSS kopieren — Klicken Sie auf den Kopierbutton und fügen Sie den Code in Ihre Stylesheet ein.

Wichtige Funktionen

Funktion	Vorteil
Live-Vorschau	Sie sehen Änderungen sofort, während Sie die Schieberegler anpassen
6 Voreinstellungen	Schnelles Starten mit gängigen Schattenstilen
Mehrere Schichten	Stapeln Sie Schatten für komplexe, realistische Effekte
Unterstützung für eingebaute Schatten	Erstellen Sie innere Schatten für vertiefte Elemente
Farbauswahl	Vollständige Kontrolle über die Schattenfarbe
Opazitätssteuerung	Feinabstimmung der Schatten-Transparenz
Kopieren in die Zwischenablage	Ein-Klick-Export von CSS

Verständnis von CSS-Boxschatten

Die Syntax

Die CSS-Eigenschaft box-shadow folgt dieser Syntax:

box-shadow: [inset] offsetX offsetY blur spread color;

Wert	Beschreibung	Beispiel
inset	(Optional) Erstellt einen inneren Schatten	inset
offsetX	Horizontale Verschiebung — positiv = rechts, negativ = links	4px
offsetY	Vertikale Verschiebung — positiv = unten, negativ = oben	4px
blur	Verschmierungsradius — höher = weicher Schatten	12px
spread	Größenvergrößerung — positiv = größer, negativ = kleiner	0px
color	Schattenfarbe mit Alpha-Transparenz	rgba(0,0,0,0.1)

Mehrere Schatten

Sie können mehrere Schatten durch Trennen mit Kommas stapeln:

box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.05);

Dies erstellt einen zweilagigen Schatten: einen engen, dunklen Schatten nahe am Element und einen weicheren, leichteren Schatten, der weiter entfernt ist — wodurch ein realistischerer Tiefeffekt entsteht.

Schattenstil-Vergleich

Stil	CSS	Anwendungsfall
Subtil	0 1px 3px rgba(0,0,0,0.08)	Karten, Listenelemente
Mittel	0 4px 6px rgba(0,0,0,0.1)	Buttons, Modale
Stark	0 10px 15px rgba(0,0,0,0.15)	Dialoge, Popovers
Leuchten	0 0 20px rgba(59,130,246,0.4)	Fokuszustände, CTAs
Innerer	inset 0 2px 4px rgba(0,0,0,0.1)	Eingaben, Wells
Hart	4px 4px 0 rgba(0,0,0,0.25)	Retro/Brutalist UI

Reale Anwendungsfälle

Material Design Elevation

Material Design verwendet Schatten, um Elevation-Stufen anzuzeigen. Eine Level-1-Karte verwendet 0 1px 3px rgba(0,0,0,0.12), während eine Level-4-Dialogbox 0 12px 17px rgba(0,0,0,0.14) verwendet.

Hover-Effekte

Tiefen Sie den Schatten bei Hover, um einen "heben"-Effekt zu erstellen:

.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.15); }

Fokuszustände

Verwenden Sie eine farbliche Leuchte für zugängliche Fokusindikatoren:

input:focus { box-shadow: 0 0 0 3px rgba(59,130,246,0.5); }

Neumorphismus

Kombinieren Sie eingebaute und äußere Schatten mit der gleichen Farbe wie dem Hintergrund für einen weichen, extrudierten Look.

Tipps für bessere Schatten

Tipp	Erklärung
Halten Sie die Verschmierung subtil	Zu viel Verschmierung wirkt unnatürlich. Starten Sie mit 4–12px für die meisten UI-Elemente.
Verwenden Sie geringe Opazität	Schatten in der Realität sind nicht vollständig opak. 5–15 % Opazität wirkt am natürlichsten.
Passen Sie Ihre Hintergrundfarbe an	Auf dunklen Hintergründen verwenden Sie helle Schattenfarben oder farbige Leuchten anstelle von Schwarz.
Schichten für Realismus	Ein zweilagiger Schatten (eng + weich) wirkt realistischer.
Verwenden Sie text-shadow mit Verschmierung für Text	Verwenden Sie text-shadow mit Verschmierung für Text

Häufig gestellte Fragen

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

box-shadow ist eine spezifische CSS-Eigenschaft, die Schatten um Elemente erstellt, während drop-shadow eine Filterfunktion ist, die auf Elemente angewendet werden kann. drop-shadow ist flexibler, aber weniger weit verbreitet.

Kann ich box-shadow mit text-shadow kombinieren?

Ja, Sie können box-shadow und text-shadow kombinieren, um sowohl Text- als auch Elementschatten zu erstellen. Dies ist eine gängige Praxis in der Webentwicklung.

Wie kann ich Schatten in der Praxis anwenden?

Schatten sind in der Praxis nützlich, um Elemente visuell zu trennen, Tiefe zu erzeugen und visuelle Hierarchie zu verbessern. Sie können Schatten für Buttons, Karten, Modale und andere UI-Elemente verwenden.

Warum sollte ich box-shadow verwenden?

box-shadow ist nützlich, um Elemente visuell zu trennen, Tiefe zu erzeugen und visuelle Hierarchie zu verbessern. Es ist eine gängige Praxis in der Webentwicklung.

Wie kann ich Schatten in der Praxis anwenden?

Schatten sind in der Praxis nützlich, um Elemente visuell zu trennen, Tiefe zu erzeugen und visuelle Hierarchie zu verbessern. Sie können Schatten für Buttons, Karten, Modale und andere UI-Elemente verwenden.

Warum sollte ich box-shadow verwenden?

box-shadow ist nützlich, um Elemente visuell zu trennen, Tiefe zu erzeugen und visuelle Hierarchie zu verbessern. Es ist eine gängige Praxis in der Webentwicklung.