CSS-Box-Shadow-Generator
Passe die Regler an, um einen Box-Shadow visuell zu gestalten, und kopiere anschließend das erzeugte CSS direkt in dein Stylesheet.
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
Your files are processed locally in your browser. They are not uploaded to our servers.
So funktioniert's
- Ziehe die Regler für Versatz, Weichzeichnung und Ausbreitung, um den Schatten zu formen.
- Wähle eine Schattenfarbe, passe die Deckkraft an und aktiviere bei Bedarf Inset.
- Kopiere das unter der Vorschau angezeigte box-shadow-CSS.
Was ist dieses Tool?
Der CSS-Box-Shadow-Generator lässt dich einen CSS-Box-Shadow visuell mit Reglern für Versatz, Weichzeichnung, Ausbreitung und Deckkraft gestalten, dazu ein Farbwähler und ein Inset-Schalter. Eine Live-Vorschau zeigt den Schatten, während du ihn anpasst, und das exakte CSS wird automatisch erzeugt.
Typische Anwendungen
- Einen Karten- oder Button-Schatten gestalten, ohne Pixelwerte zu raten
- Elevations- und Tiefeneffekte für eine UI entwerfen
- Lernen, wie sich jeder box-shadow-Parameter auf das Ergebnis auswirkt
- Schnell Schatten-CSS für eine Komponentenbibliothek erzeugen
Ähnliche Tools
Häufige Fragen
Was macht der Ausbreitungswert?
Ausbreitung vergrößert oder verkleinert die Größe des Schattens in alle Richtungen, bevor die Weichzeichnung angewendet wird — positive Werte machen den Schatten größer als das Element, negative kleiner.
Was ist ein Inset-Schatten?
Ein Inset-Schatten wird innerhalb des Elementrandes statt außerhalb gezeichnet, was einen eingedrückten statt erhabenen Look erzeugt.
Kann ich mehrere übereinanderliegende Schatten erstellen?
Dieses Tool erzeugt eine einzelne Schattenebene. Für geschichtete Schatten kannst du mehrere box-shadow-Werte (durch Komma getrennt) manuell kombinieren, wobei du jede Ebene einzeln mit diesem Tool gestaltest.