Glas- und Rahmen-Effekte
Milchglas, Verlaufsrahmen und Leuchten für Karten und Hero-Bereiche. Echtes CSS mit Vorschau, kopierbar als CSS, Tailwind oder HTML.
Im Editor öffnenCSS-Schatten-Generator
Weiche, mehrschichtige Schatten für Karten und Buttons. Vorschau mit echtem CSS, Export als box-shadow, Tailwind oder drop-shadow.
Generator öffnenLäuft direkt in deinem Browser. Deine Grafiken entstehen auf deinem Gerät.
Mit einem Preset starten
Wähle ein Preset, es öffnet sich direkt im Editor. Dort passt du alles an.
Worum geht’s?
Ein CSS-Schatten-Generator erzeugt den Code für box-shadow. Statt eines einzelnen harten Schattens legt Musterli mehrere Ebenen übereinander, deren Abstand und Unschärfe nach einer Kurve wachsen. So wirken Karten und Buttons weich und natürlich beleuchtet.
So geht’s
Stell Ebenen, Abstand, Unschärfe und Lichtrichtung ein oder drück die Leertaste für eine neue Variante. Die Vorschau ist echtes CSS auf einem Musterli-Hintergrund. Kopier danach box-shadow, die Tailwind-Klasse, die @theme-Variable oder die drop-shadow-Variante.
CSS-Schatten-Generator jetzt ausprobierenHäufige Fragen
- Warum mehrere Schattenebenen?
- Ein echter Schatten ist nahe am Gegenstand dunkel und scharf und wird mit Abstand heller und weicher. Mehrere Ebenen bilden das nach, ein einzelner box-shadow wirkt dagegen oft flach oder schmutzig.
- Wie nutze ich den Schatten in Tailwind?
- Für Tailwind v3 und v4 gibt es die Klasse shadow-[...] mit allen Ebenen. In Tailwind v4 legst du den Schatten auch als Variable --shadow-name in @theme ab und schreibst dann einfach shadow-name.
- Was ist der Unterschied zu drop-shadow?
- box-shadow folgt dem Rechteck des Elements, filter: drop-shadow() folgt der Form, etwa bei freigestellten PNG oder SVG. drop-shadow kennt keine Ausdehnung und keinen Innenschatten.
- Warum ist der Schatten nicht schwarz?
- Schatten nehmen etwas von der Farbe der Umgebung an. Musterli dunkelt darum standardmässig den Farbton des Hintergrunds ab. Du kannst die Farbe aber auch selbst wählen.
Passende Generatoren
Alle Generatoren in CSS-Effekte und Layouts
Bento-Grid
Ungleich grosse, abgerundete Kacheln in einem Raster, ohne Lücken. Für Feature-Sektionen, Portfolios und Social-Grafiken, als CSS Grid, Tailwind oder Bild.
Im Editor öffnen