Die Ergebnisse dienen nur zu Informationszwecken und können Fehler enthalten. Bitte überprüfen Sie wichtige Informationen unabhängig. Die Nutzung dieses Tools erfolgt auf eigene Gefahr.
Was dieses Tool macht
Der Box-Shadow-Generator erstellt einen CSS-box-shadow mit Schiebereglern für horizontalen Versatz, vertikalen Versatz, Unschärfe, Ausbreitung, Farbe und Deckkraft. Die Vorschau-Box aktualisiert sich beim Ziehen, und die Ausgabezeile ist sofort kopierbereit. Zu Beginn ist ein weicher Schatten eingestellt: 10px unterhalb der Box, 20px Unschärfe und 25 % Schwarz.
Die vier Längen stehen in CSS-Reihenfolge: X-Versatz, Y-Versatz, Unschärferadius, Ausbreitungsradius. Positive Versätze verschieben den Schatten nach rechts und unten, negative nach links und oben. Die Unschärfe macht die Kante weicher, die Ausbreitung vergrößert oder verkleinert den Schatten vor dem Weichzeichnen. Die Farbe wird als rgba() geschrieben, sodass die Deckkraft bereits enthalten ist und sich der Schatten in jeden Hintergrund einfügt.
Wann Sie es verwenden
- Sie verleihen Karten, Modals und Dropdowns in einem Flat Design räumliche Tiefe.
- Sie bilden die Elevation-Stufen eines Designsystems wie Material Design nach.
- Sie fügen Buttons einen dezenten Fokus- oder Hover-Effekt hinzu.
- Sie erzeugen einen farbigen Glow-Effekt mit Versatz null und einer kräftigen Farbe.
Beispiel
Eingabe
X 0, Y 10, Unschärfe 20, Ausbreitung 0, Farbe #000000, Deckkraft 25 %Ausgabe
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);Fragen zu diesem Tool
Wie erstelle ich einen inneren Schatten?
Setzen Sie das Schlüsselwort inset an den Anfang des Werts: box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.25);. Der Schatten wird dann innerhalb der Box gezeichnet – ideal für gedrückte Buttons und Eingabefelder.
Kann ich mehrere Schatten kombinieren?
Ja, trennen Sie sie durch Kommas. Realistische Elevation nutzt oft zwei: einen kleinen, scharfen Schatten für die Kante und einen großen, weichen für die Tiefe, zum Beispiel 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.12).
Warum wirkt mein Schatten auf farbigem Hintergrund grau und schmutzig?
Reines Schwarz mit geringer Deckkraft entsättigt die darunterliegenden Farben. Verwenden Sie statt Schwarz einen dunkleren Ton der Hintergrundfarbe, um ein saubereres Ergebnis zu erhalten.
Machen Schatten die Seite langsamer?
Statische Schatten sind günstig. Das Animieren eines großen, stark weichgezeichneten Schattens kann auf langsamen Geräten Frames kosten; animieren Sie stattdessen die opacity eines Pseudo-Elements, das den Schatten trägt.
Ist dieses Tool kostenlos?
Ja, es ist kostenlos. Ohne Anmeldung und ohne E-Mail. Ergebnisse direkt auf dieser Seite.
Wie erhalte ich mein Ergebnis?
Nutze das Tool auf dieser Seite. Das Ergebnis erscheint hier und wird nicht per E-Mail zugestellt.