Eingabe
Dein Arbeitsbereich wird vorbereitet…
Anleitung
- Horizontalen und vertikalen Versatz, Unschärfe und Ausbreitung einstellen.
- Farbe und Deckkraft wählen; bei Bedarf Innenschatten aktivieren.
- Vorschau prüfen und CSS kopieren wählen.
Einen Boxschatten gestalten
Schatten heben Karten vom Hintergrund ab oder deuten vertiefte Flächen an. Wenige Werte erzeugen den Effekt ohne eigene Bilddatei.
Die Vorschau zeigt Änderungen an Form und Farbe sofort. Mit dem Eckenradius lassen sich Formen vergleichen, ohne zusätzliche Deklarationen in die Ausgabe aufzunehmen.
Versatz, Unschärfe und Ausbreitung
Der Versatz verschiebt den Schatten relativ zum Element. Negative Werte bewegen ihn nach links oder oben, positive nach rechts oder unten.
Unschärfe macht die Kante weicher und darf nicht negativ sein. Ausbreitung verkleinert den Schatten bei negativen und vergrößert ihn bei positiven Werten.
0px 8px 24px 0px, black at 15%box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);Ein äußerer Schatten mit 8px Versatz nach unten, 24px Unschärfe und 15 % Schwarz.
Farbe und Innenschatten
Der Farbwähler legt die Schattenfarbe fest, die Deckkraft ihren Alpha-Wert. Bei geringer Deckkraft scheint mehr Hintergrund durch.
Innenschatten verlegt den Schatten in die Box. Für mehrere Ebenen ergänze im Stylesheet eine kommagetrennte Liste; der Generator erstellt nur eine.
Das CSS verwenden
CSS kopieren exportiert nur box-shadow:. Für dieselben runden Ecken wie in der Vorschau musst du border-radius separat setzen.
Texteingabe bis 1 MiB. CSS- und HTML-Umwandlungen laufen in einem Worker mit einem Zeitlimit von 30 Sekunden. Farbtools verwenden sRGB; generierte Styles sind Vorschauen und müssen im eigenen Layout getestet werden.
Häufige Fragen
Enthält das CSS den Vorschau-Eckenradius?
Nein. Er betrifft nur die Vorschau. Setze border-radius separat im Zielelement.
Was unterscheidet Unschärfe und Ausbreitung?
Unschärfe macht Kanten weich. Ausbreitung vergrößert oder verkleinert die Schattenfläche vor der Unschärfe.
Darf die Ausbreitung negativ sein?
Ja. Sie verkleinert dann den Schatten. Unschärfe muss null oder positiv bleiben.
Kann ich einen inneren Schatten erstellen?
Ja. Aktiviere Innenschatten; die Ausgabe enthält das Schlüsselwort inset.
Erstellt das Tool mehrere Schattenebenen?
Nein. Kombiniere den kopierten Schatten bei Bedarf mit weiteren kommagetrennten Werten im Stylesheet.