CSS Box-Shadow-Generator

Der CSS-Box-Shadow-Generator baut box-shadow-Werte visuell statt von Hand. Sie stapeln so viele Schattenebenen, wie Sie brauchen, justieren jede mit Schiebereglern oder exakten Zahlen, beobachten das Ergebnis an einer Live-Vorschau und kopieren eine produktionsreife Deklaration. Da Schatten einer der schnellsten Wege sind, einer Karte, einem Button oder einem Modal Tiefe zu geben, ist es wichtiger, Versätze und Deckkraft richtig zu treffen, als die Farbe. Dieses Tool hält Geometrie, Farbe und Ebenenreihenfolge an einem Ort zusammen.

Schatten Ebene für Ebene aufbauen

1. Mit der Standardebene beginnen und ihre Geometrie anpassen. Jede neue Ebene startet als 0px 4px 6px 0px rgba(0, 0, 0, 0.15).
2. Die Versätze setzen. Ziehen Sie die Schieberegler oder tippen Sie in die Zahlenfelder für Versatz X, Versatz Y, Unschärfe und Ausdehnung. Schieberegler und Zahleneingabe bleiben synchron.
3. Farbe und Deckkraft wählen. Wählen Sie die Schattenfarbe und trennen Sie dann die Deckkraft mit dem Deckkraft-Regler von der Farbe, damit Sie denselben Farbton behalten und nur die Transparenz ändern können.
4. Inset umschalten für eine Ebene, wenn Sie einen inneren statt eines Schlagschattens möchten.
5. Ebenen hinzufügen oder duplizieren, um einen realistischen mehrschichtigen Schatten aufzubauen, und entfernen Sie alle, die Sie nicht möchten.
6. Das CSS kopieren. Das Ausgabefeld zeigt die fertige box-shadow: ...;-Deklaration. Die Hintergrundfarbe der Vorschau ist nur eine Hilfe und nicht Teil der Ausgabe.

Versatz, Unschärfe, Ausdehnung: was jeder Wert bewirkt

Regler	Bereich	Wirkung
Versatz X	-50 bis 50	Verschiebt den Schatten in Pixeln nach links (negativ) oder rechts (positiv).
Versatz Y	-50 bis 50	Verschiebt den Schatten nach oben (negativ) oder unten (positiv). Positive Werte lassen Licht von oben vermuten.
Unschärfe	0 bis 100	Weicht die Kante auf; 0 erzeugt eine harte Kopie, größere Werte federn sie aus.
Ausdehnung	-50 bis 50	Vergrößert den Schatten nach außen (positiv) oder verkleinert ihn nach innen (negativ), bevor er weichgezeichnet wird.
Deckkraft	0 bis 1	Setzt den Alphakanal; unter 1 wird die Farbe als rgba ausgegeben.
Inset	an/aus	Zeichnet den Schatten innerhalb der Border-Box statt außerhalb.

Ein Schatten mit Unschärfe 0 und Ausdehnung 0 ist lediglich eine solide, versetzte Kopie der Box des Elements. Die Unschärfe weicht ihre Kante auf, und die Ausdehnung verändert die Größe der Form, die weichgezeichnet wird.

Praxisbeispiele: Material-Elevation

Der klassische Look niedriger Elevation besteht aus zwei Ebenen, beide mit einem kleinen Abwärtsversatz und einer engen Unschärfe:

box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.24);

Die erste Ebene ist der breitere Umgebungsschatten, die zweite der schärfere Kontaktschatten. Für ein schwebendes Panel schieben Sie Versatz und Unschärfe weiter nach außen:

box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.15);

Eine weiche neumorphe Fläche verwendet zwei Inset-Ebenen mit entgegengesetzten vertikalen Versätzen, eine dunkel und eine hell, sodass das Element in die Seite eingedrückt wirkt:

box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.2), inset 0px -2px 4px 0px rgba(255, 255, 255, 0.6);

Inset-Schatten

Ein Inset-Schatten wird innerhalb der Border-Box des Elements gezeichnet, unter dem Rahmen, aber über dem Hintergrund, wodurch die Fläche vertieft wirkt. Häufige Verwendungen sind gedrückte Buttons, Texteingaben mit innerer Lippe und neumorphe Karten. Da der Schatten auf das Element beschnitten wird, erzeugt eine große Unschärfe mit kleiner Ausdehnung eine weiche Vignette um die Innenkante, während Unschärfe null eine harte innere Linie ergibt. Inset-Schatten respektieren border-radius genauso wie Schlagschatten, abgerundete Eingaben behalten also ihre Rundung.

Genauigkeitshinweise

• Hex-Eingaben werden normalisiert. Eine dreistellige Kurzform wie #abc wird zu #aabbcc erweitert, und ein nicht parsebarer Wert fällt auf #000000 zurück.
• Deckkraft 1 wechselt auf Hex. Bei voller Deckkraft ist die Ausgabe eine Hex-Farbe; unter 1 ist es rgba(...), auf zwei Nachkommastellen gerundet.
• Alle Längen sind Pixel. Der Generator gibt keine Prozent-, em- oder rem-Werte aus.
• Keine Vendor-Präfixe. Moderne Browser benötigen kein -webkit-box-shadow, die Ausgabe ist also nur die Standardeigenschaft.
• Die Vorschau ist eine weiße Box fester Größe. Sie zeigt nicht, wie der Schatten mit dem tatsächlichen Hintergrund oder Rahmen Ihres Elements interagiert; fügen Sie die Deklaration in Ihr echtes Layout ein, um ihn zu beurteilen.

Häufige Fehler

• Die Deckkraft gegen 1 drehen. Schatten mit hohem Alpha wirken wie harte Rechtecke; realistische Tiefe liegt meist zwischen 0,1 und 0,3.
• Unschärfe mit Ausdehnung verwechseln. Unschärfe weicht die Kante auf, die Ausdehnung ändert die Größe. Eine Erhöhung der Unschärfe, wo „größer“ gemeint war, erzeugt einen unscharfen statt einen größeren Schatten.
• Beschneidung durch Vorfahren vergessen. Ein Elternelement mit overflow: hidden kann einen Schatten abschneiden, der über seine Box hinausreicht.
• Erwarten, dass Schatten auf Inline-Elementen normal funktionieren. Nicht ersetzte Inline-Elemente fragmentieren über Zeilen hinweg; geben Sie dem Element display: inline-block oder block für einen normalen Schatten.
• Viele schwere, weichgezeichnete Ebenen stapeln. Jede große Unschärfe ist teuer neu zu zeichnen, was die Scroll-Performance auf schwachen Geräten beeinträchtigen kann.

Verwandte Tools

• CSS Text Shadow Generator — passende Schatten für Text bauen.
• Color Picker — die perfekte Schattenfarbe finden und umwandeln.
• CSS Gradient Generator — Ihre Schatten mit eigenen CSS-Verläufen kombinieren.
• Color Contrast Checker — prüfen, ob Text auf dem gewählten Hintergrund lesbar bleibt.