Box Shadow Generator
Generate box shadows
Generate box shadows Läuft lokal in Ihrem Browser
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
About the
Der Box Shadow Generator erstellt einen Schatten aus Versatz, Unschärfe, Ausbreitung, Farbe und Deckkraft, mit einer Live-Vorschau und dem CSS. Die beiden Einstellungen, die Menschen verwechseln, sind „Unschärfe“ und „Spreizung“: „Unschärfe“ macht den Rand der Schattenform nach außen und innen weicher, während „Spreizung“ die eigene Größe des Schattens vergrößert oder verkleinert, bevor es zu einer Unschärfe kommt. Eine negative Streuung sorgt dafür, dass ein weicher Schatten nicht wie ein Heiligenschein aussieht. Aus diesem Grund verwenden die Standardeinstellungen hier einen kleinen negativen Wert.
Where people use the
- Erstellen einer Höhenskala für Karten, Modalitäten und Menüs.
- Erstellen eines gedrückten oder fokussierten Zustands mit eingefügtem Schatten.
- Einen Rand weicher machen, ohne einen echten Rand hinzuzufügen.
- Überprüfen, wie die Schattenwerte einer Designspezifikation tatsächlich aussehen.
How to use the
- 1
Legen Sie die Offsets fest
Offset X verschiebt den Schatten nach rechts, Offset Y verschiebt ihn nach unten. Negative Werte verschieben es in die andere Richtung.
- 2
Stellen Sie Unschärfe und Ausbreitung ein
Unschärfe macht die Kante weicher. „Spread“ erweitert den Schatten, bevor er unscharf wird. Verwenden Sie eine kleine negative Streuung für einen Schatten, der unter dem Element und nicht darum herum liegt.
- 3
Wählen Sie Farbe und Deckkraft
Reines Schwarz bei voller Deckkraft sieht hart aus. Eine niedrige Deckkraft, irgendwo zwischen 8 und 20 Prozent, deutet eher auf Tiefe als auf Schmutz hin.
- 4
Aktivieren Sie „Einsatz“, wenn Sie einen inneren Schatten wünschen
„Inset“ zeichnet den Schatten in das Element statt dahinter, was für gedrückte Zustände und Vertiefungen geeignet ist.
- 5
Kopieren Sie das CSS
Die Regel enthält die RGBA-Farbe, sodass sie direkt in ein Stylesheet eingefügt werden kann.
Tipps und Best Practices
- Zwei geschichtete Schatten sehen viel besser aus als ein schwerer.
- Achten Sie auf eine gleichmäßige Lichtquelle: Wenn eine Karte nach unten rechts geworfen wird, sollten alle davon betroffen sein.
- Achten Sie darauf, dass Schatten von einem übergeordneten Element mit ausgeblendetem Überlauf abgeschnitten werden.
Häufig gestellte Fragen
Was ist der Unterschied zwischen Unschärfe und Ausbreitung?
Mit „Spread“ wird die Größe der Schattenform vor dem Weichzeichnen geändert: positiv zum Wachsen und negativ zum Schrumpfen. Unschärfe macht die Kante dann um den angegebenen Radius weicher. Um einen engen Schatten unter einer Karte zu erhalten, benötigen Sie eine kleine Unschärfe und eine leicht negative Streuung.
Warum sieht mein Schatten grau und schmutzig aus?
Weil es reines Schwarz mit hoher Deckkraft ist. Verwenden Sie einen niedrigen Alpha-Wert von etwa 0,08 bis 0,2 und erwägen Sie, den Schatten in Richtung des Hintergrundfarbtons zu tönen, der viel natürlicher wirkt.
Kann ich mehr als einen Schatten haben?
Ja. Trennen Sie mehrere Schatten in derselben Deklaration durch Kommas. Sie werden von vorne nach hinten gestapelt, sodass der erste oben liegt. Durch geschichtete Schatten werden weiche, realistische Höhen erzeugt.
Beeinflusst ein Kastenschatten das Layout?
Nein. Schatten werden außerhalb der Box des Elements gemalt und nehmen keinen Platz ein, sodass sie von einem übergeordneten Element mit ausgeblendetem Überlauf oder von einem engen Container abgeschnitten werden können.
Ist die Animation eines Kastenschattens teuer?
Ja, relativ. Wenn Sie Unschärfe oder Ausbreitung ändern, muss der Browser den Schatten bei jedem Frame neu zeichnen. Für sanfte Bewegungen animieren Sie stattdessen die Deckkraft oder Transformation oder überblenden Sie zwischen zwei vorgerenderten Schatten.