So funktioniert’s
- Stellen Sie „Horizontaler Versatz“ und „Vertikaler Versatz“ ein, um den Schatten zu verschieben.
- Passen Sie mit „Unschärfe“ und „Ausdehnung“ die Weichheit und Größe des Schattens an.
- Wählen Sie unter „Farbe“ die Schattenfarbe und stellen Sie „Deckkraft“ ein. Die Vorschau aktualisiert sich während der Eingabe.
- Klicken Sie bei Bedarf auf „+ Ebene hinzufügen“, um einen weiteren Schatten einzustellen.
Beispiele
Zwei Schatten für eine Produktkarte
Ebene 1: Horizontaler Versatz 0, Vertikaler Versatz 2, Unschärfe 4, Ausdehnung −2, Farbe #000000, Deckkraft 0,1. Ebene 2: Horizontaler Versatz 0, Vertikaler Versatz 4, Unschärfe 6, Ausdehnung −1, Farbe #000000, Deckkraft 0,1. Innen (inset) jeweils deaktiviert.
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
Harter Schatten für einen Retro-Button
Horizontaler Versatz 6, Vertikaler Versatz 6, Unschärfe 0, Ausdehnung 0, Farbe #2451E8, Deckkraft 1. Innen (inset) deaktiviert.
box-shadow: 6px 6px 0 0 rgba(36, 81, 232, 1);
Tipps
- Schattenfarbe mit Farbwähler & HTML-Farbcodes auswählen.
- Mit einem Verlaufshintergrund aus dem CSS Gradient Generator kombinieren.
Häufige Fragen
Wie erstelle ich einen inneren Schatten mit CSS?
Aktivieren Sie „Innen (inset)“ für die gewünschte Ebene. Der Schatten wird innerhalb der Box gezeichnet; im CSS steht dafür das Schlüsselwort inset.
Werden Boxfarbe, Hintergrund und Radius in den CSS-Code übernommen?
„Boxfarbe“, „Hintergrund“ und „Radius“ ändern nur die Vorschau. Der erzeugte CSS-Code enthält ausschließlich box-shadow.
Welche Farbcodes kann ich eingeben?
Das Feld „Farbe“ akzeptiert Hex-Farben mit drei oder sechs Stellen, etwa #fff oder #2451E8, auch ohne #. Hex-Farben mit Alphakanal werden nicht akzeptiert; die Transparenz stellen Sie über „Deckkraft“ ein.
Warum ändert sich der Schatten nach einer Eingabe nicht?
Bei einem ungültigen Wert bleiben Vorschau und CSS beim letzten gültigen Schatten. Verwenden Sie ganze Zahlen von −200 bis 200 für Versatz und Ausdehnung, von 0 bis 300 für Unschärfe und Werte von 0 bis 1 für Deckkraft.
Bleiben meine Einstellungen beim nächsten Besuch erhalten?
Ebenen und Vorschau-Einstellungen werden im localStorage Ihres Browsers gespeichert und beim nächsten Besuch wiederhergestellt. „Zurücksetzen“ löscht den gespeicherten Zustand und stellt die Standardwerte wieder her.