CSS box-shadow Generator
Generieren Sie erweiterte CSS-Schatten (box-shadow) mit einer intuitiven Benutzeroberfläche.
Ein kostenloses Tool, das mehrere Ebenen und die neuesten Designtrends unterstützt.
Ebeneneinstellungen
Schattenparameter
Vorschau
Über
Der CSS box-shadow Generator ist ein kostenloses Tool, das wichtige Schattenstile (box-shadow) für Webdesign mit einer intuitiven Benutzeroberfläche erstellt.
Nicht nur einfache Schatten, sondern auch reichhaltige Schatten mit mehreren Ebenen, glatte Schatten, wie sie von Apple und modernen Webdiensten verwendet werden, 3D-Neumorphismus und flacher Neo-Brutalismus können sofort aus Voreinstellungen erstellt werden.
Der generierte Code kann in drei Formaten ausgegeben werden: Standard-CSS-Eigenschaften, CSS-Variablen (benutzerdefinierte Eigenschaften) und Tailwind-CSS-Dienstprogrammklassen (unterstützt beliebige Werte) und kann mit einem einzigen Klick kopiert werden.
Anleitung
Wählen Sie oben eine Voreinstellung aus, die dem Bild nahe kommt, das Sie erstellen möchten. Natürlich können Sie auch von Grund auf neu erstellen, indem Sie Ebenen hinzufügen.
Passen Sie X/Y-Versätze (Position), Unschärfestärke, Ausbreitung, Farbe und Deckkraft an. Indem Sie mehrere Schatten mit "Ebene hinzufügen" stapeln, können Sie natürlichere und luxuriösere Schatten erstellen.
Wählen Sie je nach Umgebung "CSS" oder "Tailwind" aus dem Ausgabefeld aus und drücken Sie die Zwischenablage-Taste, um den Code zu kopieren.
Eigenschaften
Syntax und Eigenschaften von box-shadow
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
- offset-x / offset-y
- Die horizontale und vertikale Position des Schattens. Positive Werte verschieben den Schatten nach rechts/unten, negative Werte nach links/oben.
- blur-radius (Unschärfe)
- Die Unschärfe des Schattens. Je größer der Wert, desto weiter und heller breitet sich der Schatten aus. Bei 0 wird es zu einer scharfen Grenze (fester Schatten).
- spread-radius (Ausbreitung)
- Erweitert oder verkleinert die Größe des Schattens selbst. Positive Werte führen zu einem größeren Schatten als das Element, negative Werte zu einem kleineren Schatten.
- inset (innerer Schatten)
- Wenn dieses Schlüsselwort angegeben wird, fällt der Schatten in das Element anstatt nach außen. Wird zur Darstellung von eingedrückten Benutzeroberflächen verwendet.
FAQ
Q. Wirkt sich box-shadow auf die Leistung aus?
Q. Was ist der Unterschied zwischen box-shadow und filter: drop-shadow?
Q. In welchen Ausdrücken wird inset verwendet?
Q. Was sind die Vorteile des Stapelns mehrerer Schatten?
Anwendungsfälle
Karten-UIs und Modale
Hebt Elemente vom Hintergrund ab und vermittelt dem Benutzer visuell, dass es sich um anklickbare Elemente oder wichtige Inhalte handelt.
Hover/Active-Zustände von Schaltflächen
Indem Sie den Schatten beim Überfahren mit der Maus vergrößern oder beim Klicken auf `inset` umschalten, können Sie eine interaktive Schaltfläche mit Druckgefühl implementieren.
Neumorphismus-Design
Indem Sie einen hellen und einen dunklen Schatten diagonal auf ein Element mit derselben Farbe wie der Hintergrund platzieren, erzeugen Sie eine Textur, die das Element herausgedrückt oder eingedrückt erscheinen lässt.
Glüheffekt
Indem Sie den Versatz auf 0 setzen und ihn mit lebendigen Farben verteilen, können Sie einen Effekt erzielen, als ob das Element Licht ausstrahlt – nur mit CSS.
Feedback senden
Bitte teilen Sie uns Ihre Gedanken mit, um das Tool zu verbessern.
Feedback ist vorübergehend ausgesetzt
Der Server ist ausgelastet oder der Spam-Schutz ist aktiv. Bitte versuchen Sie es später erneut.