CSS Box-Shadow Generator
Läuft auf Ihrem Gerät. Nichts wird gesendet.Alles läuft in Ihrem Browser - nichts wird irgendwohin gesendet.
Starten mit
Ebenen
Horizontaler Versatz
Vertikaler Versatz
Unschärfe
Ausdehnung
Farbe
Code
CSS
box-shadow:
0 10px 15px -3px rgb(15 23 42 / 0.1),
0 4px 6px -4px rgb(15 23 42 / 0.1);Tailwind CSS
shadow-[0_10px_15px_-3px_rgb(15_23_42_/_0.1),0_4px_6px_-4px_rgb(15_23_42_/_0.1)]Vorhandenen Schatten bearbeiten
CSS-Schatten mit Ebenen, Inset und weichen Vorlagen gestalten, live sehen und als CSS oder Tailwind-Klasse kopieren. Vorhandene Schatten einfügen und bearbeiten.
Bauen Sie den gewünschten Box-Shadow nach Augenmaß, statt Zahlen zu raten. Starten Sie mit einer Vorlage - weich, mittel, hart retro, weich geschichtet, schwebend, innen, neumorph oder leuchtend - und verfeinern Sie dann Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und Inset jeder Ebene; die Vorschau folgt beim Ziehen. Schatten können bis zu acht Ebenen haben - so entstehen die natürlichsten Schatten. Kopieren Sie das Ergebnis als CSS oder als Tailwind-Klasse, teilen Sie es als Link oder fügen Sie einen box-shadow aus Ihrem Stylesheet ein, um daran weiterzuarbeiten.
Häufig gestellte Fragen
Was bewirken Unschärfe und Ausdehnung?
Die Unschärfe macht die Schattenkante weich: 0 ist eine harte Linie, größere Werte lassen sie über mehr Pixel auslaufen. Die Ausdehnung vergrößert (positiv) oder verkleinert (negativ) den Schatten vor dem Weichzeichnen - eine kleine negative Ausdehnung mit großer Unschärfe ergibt die weichen, eingezogenen Schatten moderner Oberflächen.
Warum mehrere Ebenen?
Echte Schatten sind nah am Objekt dunkel und scharf und werden weiter weg heller und weicher. Eine Ebene schafft nicht beides; einige Ebenen mit sich verdoppelndem Versatz und Unschärfe, wie in der Vorlage „Weich geschichtet“, wirken viel natürlicher.
Was ist ein Inset-Schatten?
Ein Inset-Schatten wird innerhalb der Box gezeichnet statt außen, sodass sie eingedrückt wirkt - praktisch für Eingabefelder, Vertiefungen und gedrückte Buttons. Innen- und Außenebenen lassen sich in einem Schatten mischen.
Macht box-shadow eine Seite langsam?
Ein paar Schatten kosten wenig. Sehr große Unschärfen auf vielen Elementen oder animierte box-shadows können auf langsamen Handys Bildrate kosten; für Animationen besser die Deckkraft eines Pseudo-Elements ändern, das den Schatten schon trägt.