CSS Box-Shadow-Generator
Generiere box-shadow-Werte visuell. Passe Versatz, Unschärfe, Streuung, Farbe an und verwende innere oder mehrere Schatten. Kopiere das CSS sofort.
Preview
Shadows
CSS
box-shadow: 0px 4px 12px 0px #00000080; Voreinstellungen
Inhaltsverzeichnis
Was ist box-shadow?
box-shadow ist eine CSS-Eigenschaft, die einen oder mehrere Schatten hinter einem Element zeichnet. Du kontrollierst den horizontalen und vertikalen Versatz, den Unschärferadius, die Streuung, die Farbe und ob der Schatten innen liegt. Schatten fügen Tiefe hinzu ohne zusätzliches Markup oder Bilder.
Syntax
box-shadow: offset-x offset-y blur-radius spread-radius color [inset]; Mehrere Schatten werden durch Kommas getrennt. Offset X/Y verschieben den Schatten; blur weicht den Rand auf; spread vergrößert oder verkleinert den Schatten; Farbe kann hex, rgb oder rgba sein. Verwende inset für einen inneren Schatten.
Anwendungsfälle
- Karten und Panels — Weiche Schatten, um Inhalte hervorzuheben.
- Schaltflächen — Subtile Tiefe oder Innen für gedrückten Zustand.
- Modals und Dropdowns — Geschichtete Schatten für Erhöhung.
- Bilder — Bilder mit einem Schatten rahmen oder schweben lassen.
Häufig gestellte Fragen
Ein innerer box-shadow wird innerhalb des Rahmenrahmens des Elements gezeichnet, als käme das Licht von oben. Verwende ihn für gedrückte Schaltflächen, Eingaben oder versenkte Panels.
Ja. Füge mehr Schatten mit "Schatten hinzufügen" hinzu. Sie stapeln sich in der Reihenfolge; der erste Schatten ist oben. Verwende mehrere Schatten für geschichtete Tiefe.