CSS-Box-Shadow-Generator — Schatten mit Live-Vorschau
CSS box-shadow für Karten, Buttons und andere Oberflächenelemente feinjustieren
Verarbeitung im Browser · kein Hochladen
Positive Versätze verschieben den Schatten nach rechts und unten. Eine negative Ausdehnung verkleinert ihn.
Schatten-CSS erstellt.
So funktioniert es
- Wählen Sie den horizontalen und vertikalen Versatz, um den Schatten zu positionieren.
- Passen Sie Unschärfe und Ausdehnung an, um Weichheit und Größe zu steuern.
- Wählen Sie Farbe und Deckkraft. Aktivieren Sie inset für einen Schatten im Inneren des Elements.
- Prüfen Sie die Live-Vorschau und kopieren Sie die erzeugte
box-shadow-Deklaration.
Bedeutung der Werte
Ein positiver horizontaler Versatz verschiebt nach rechts, ein negativer nach links. Positive vertikale Werte verschieben nach unten, negative nach oben. Die Unschärfe muss null oder größer sein; je größer sie ist, desto weicher wird die Kante. Eine positive Ausdehnung vergrößert die Schattenform, eine negative verkleinert sie.
Farben werden als RGB-Kanäle mit Alphawert ausgegeben. 25 % Deckkraft werden zum Beispiel zu rgba(0, 0, 0, 0.25). Mit aktivierter inset-Option steht inset am Anfang des Schattenwerts.
Beispiel
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25); erzeugt einen weichen schwarzen Schatten, der acht Pixel nach unten versetzt ist. Ein horizontaler Versatz von null hält ihn links und rechts ausgewogen.
Soll ein Schatten straffer wirken, vergleichen Sie eine negative Ausdehnung mit einer geringeren Unschärfe: Beide verändern unterschiedliche Teile des Effekts. Prüfen Sie Innenschatten in der endgültigen Komponentengröße, denn die verfügbare Innenfläche bestimmt, wie viel Schatten sichtbar ist.
Grenzen und Anwendung
Versatz und Ausdehnung reichen von -100 bis 100 Pixel, die Unschärfe von 0 bis 200 Pixel und die Deckkraft von 0 bis 100 %.
Die Vorschau verwendet eine Box mit fester Größe. Abmessungen, Eckenradius, Hintergrund und overflow-Regeln der Elternelemente Ihres tatsächlichen Elements können das Aussehen verändern. Ein Schatten beansprucht keinen Platz im Layout; lassen Sie daher genug Raum um die Komponente, wenn der Effekt über ihren Rand hinausreicht.
Häufige Fragen
Was ist der Unterschied zwischen Unschärfe und Ausdehnung?
Die Unschärfe (blur) macht die Kanten des Schattens weich. Die Ausdehnung (spread) vergrößert oder verkleinert seine Form, bevor die Unschärfe angewendet wird. Eine negative Ausdehnung macht den Schatten kleiner.
Was bewirkt inset?
inset zeichnet den Schatten innerhalb der Box statt außerhalb. Damit lassen sich vertiefte Felder oder gedrückte Buttons darstellen.
Warum wird der Schatten auf meiner Seite abgeschnitten?
overflow-Einstellungen eines Elternelements oder zu wenig Platz können den Schatten abschneiden. Auch die Vorschau schneidet sehr große Schatten ab, die über ihren Rahmen hinausreichen.
Kann ich mehrere Schatten kombinieren?
Der Generator erzeugt einen Schatten. Für mehrschichtige Effekte ergänzen Sie im kopierten CSS weitere, durch Kommas getrennte Werte.
