CSS-Box-Shadow-Generator
Regler verschieben, bis der Schatten passt, dann die box-shadow-Zeile kopieren. Die Vorschau zeigt genau das Ergebnis.
CSS
box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.35);
Über dieses Tool
box-shadow nimmt vier Längen: horizontaler Versatz, vertikaler Versatz, Weichzeichnungsradius und Ausbreitung. Die Weichzeichnung glättet die Kante, die Ausbreitung vergrößert oder verkleinert den Schatten vor dem Weichzeichnen, und eine negative Ausbreitung mit positivem Y-Versatz ergibt das dezente Anheben, das die meisten Designsysteme verwenden.
Das Schlüsselwort inset zeichnet den Schatten innen statt hinter der Box — so entstehen gedrückte Schaltflächen und Vertiefungen. Die Farbe ist üblicherweise Schwarz mit geringer Deckkraft statt Grau, weil ein transluzenter Schatten seinen Bezug zum Hintergrund behält.
Häufige Fragen
- Warum wirkt mein Schatten grau und flach?
- Volltongrau ignoriert den Hintergrund. Nehmen Sie Schwarz mit 20-40 % Deckkraft und leicht negativer Ausbreitung.
- Kann ich mehrere Schatten stapeln?
- Ja. Trennen Sie die Werte im Stylesheet mit Kommas — erzeugen Sie jede Ebene hier und fügen Sie sie zusammen.
- Beeinflusst box-shadow das Layout?
- Nein. Er wird außerhalb der Rahmenbox gezeichnet und ändert anders als ein Rahmen weder Größe noch Position.