CSS Box-Shadow Generator: Live-Vorschau, Code kopieren
Stellen Sie Versatz, Unschärfe, Streuung, Farbe und Deckkraft ein, um einen CSS-box-shadow-Wert live zu erstellen und den Code zu kopieren.
CSS Box-Shadow Generator
Dieser Generator erzeugt aus sechs Reglern einen einzigen CSS-box-shadow-Wert: horizontaler Versatz, vertikaler Versatz, Unschärferadius, Streuradius, eine Schattenfarbe mit eigenem Deckkraft-Regler und ein Inset-Schalter. Zwei weitere Farbwähler legen die Vorschau-Box und ihren Hintergrund fest, damit der Schatten auf hellem wie dunklem Untergrund richtig wirkt, und vier Vorlagen, soft, hard, glow und inset, laden mit einem Klick eine fertige Kombination. Jede Änderung aktualisiert sofort die box-shadow-Zeile unter der Vorschau, und der fertige Code lässt sich mit einem Klick in die Zwischenablage kopieren.
Wie der Box-Shadow-Wert entsteht
CSS schreibt einen Schatten in einer festen Reihenfolge: horizontaler Versatz, vertikaler Versatz, Unschärferadius, Streuradius, danach eine Farbe; für einen Schatten innerhalb der Box-Kante statt dahinter wird das Wort inset vorangestellt. Horizontaler und vertikaler Versatz verschieben den Schatten seitlich oder senkrecht und akzeptieren beide negative Werte bis -50px, sodass ein Schatten links von der Box liegen oder über ihr stehen kann. Der Unschärferadius reicht von 0 bis 100px und weicht die Schattenkante auf, der Streuradius von -50 bis 50px vergrößert oder verkleinert den Schatten unabhängig von der Boxgröße selbst. Der Hex-Wert des Farbwählers wird in seine Rot-, Grün- und Blau-Anteile zerlegt, und der Deckkraft-Regler von 0 bis 1 wird zum vierten Wert innerhalb von rgba(); bei 0 ist der Schatten vollständig durchsichtig, bei 1 entspricht er genau der gewählten Farbe.
Beispielrechnung
Ein horizontaler Versatz von 4px, ein vertikaler Versatz von 4px, ein Unschärferadius von 12px und ein Streuradius von 0px, zusammen mit der Schattenfarbe #0f766e und einer Deckkraft von 0,3, ergeben box-shadow: 4px 4px 12px 0px rgba(15, 118, 110, 0.3). Der Hex-Code #0f766e zerlegt sich in Rot 15, Grün 118 und Blau 110, und die 0,3 vom Deckkraft-Regler wird ohne weitere Umrechnung zum vierten rgba()-Wert. Wird bei denselben sechs Werten inset aktiviert, erscheint der identische Schatten innerhalb der Box-Kante statt dahinter, ein Effekt, der häufig bei gedrückten Schaltflächen oder vertieften Eingabefeldern verwendet wird.
Kopierbare CSS-Ausgabe
.karte {
box-shadow: 4px 4px 12px 0px rgba(15, 118, 110, 0.3);
}