CSS-Generator
Box-Shadow, clip-path, Cubic-Bezier-Easing und Glassmorphism mit Live-Vorschau
- Dateien verlassen Ihr Gerät nicht
- Läuft im Browser
- Kostenlos, ohne Anmeldung, ohne Wasserzeichen
16px
Tailwind (beliebiger Wert)
shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]So verwenden Sie: CSS-Generator
CSS visuell mit Live-Vorschau erzeugen: Box-Schatten, Clip-Path, Cubic-Bézier-Easing, Glassmorphismus, Blob-Radius und Textschatten. Jeder Generator liefert reines CSS und eine Tailwind-Klasse mit beliebigem Wert, beides direkt kopierbar.
- 1
Wählen Sie einen Generator: „Box-Schatten“, „Clip-Path“, „Cubic Bézier“, „Glassmorphismus“, „Blob-Radius“ oder „Textschatten“.
- 2
Starten Sie mit einer Vorlage oder passen Sie Schieberegler und Farben an.
- 3
Wo möglich, ziehen Sie direkt in der Vorschau: Clip-Path-Punkte, die beiden Bézier-Griffe oder die Blob-Griffe.
- 4
Kopieren Sie das CSS oder die Tailwind-Klasse aus der Ausgabe darunter.
Häufige Fragen
Kann ich mehrere Schatten übereinanderlegen?
Ja. Klicken Sie bei „Box-Schatten“ auf „Ebene hinzufügen“; jede Ebene hat eigenen Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und Innen-Option.
Wie füge ich Punkte beim Clip-Path hinzu oder entferne sie?
Ein Doppelklick auf eine Kante der Form fügt einen Punkt hinzu; Punkt auswählen und Entf drücken entfernt ihn. „Kreis“, „Ellipse“ und „Inset“ werden stattdessen über Schieberegler eingestellt.
Warum sehe ich keinen Glaseffekt?
backdrop-filter verwischt nur, was hinter dem Element liegt, und braucht daher einen farbigen oder unruhigen Hintergrund. Die Ausgabe enthält das Präfix -webkit- für Safari.
Was bewirken Bézier-Werte außerhalb von 0–1?
Y-Werte über 1 oder unter 0 lassen die Bewegung überschießen, was einen Federungs- oder Ausholeffekt ergibt. Mit „Abspielen“ vergleichen Sie das mit einer linearen Bewegung.
Braucht die Tailwind-Ausgabe ein Plugin?
Nein. Sie nutzt die Syntax für beliebige Werte, etwa rounded-[…] oder [clip-path:…], die in Standard-Tailwind funktioniert.