Was ist ein CSS-Generator?
Verläufe, Schatten und runde Ecken lassen sich durch Zahlen tippen schwer treffen — man justiert, schaut und justiert wieder. Dieser CSS-Generator macht daraus Schieberegler und Farbwähler mit Live-Vorschau, sodass du ziehen kannst, bis es passt, und dann sauberes CSS kopierst. Enthält drei Tools: Verläufe (linear / radial), box-shadow und border-radius. Alles läuft lokal im Browser.
So funktioniert es
- Oben die Tabs wechseln: Verlauf, Box-Shadow oder Border-Radius.
- Regler ziehen und Farben wählen — die Vorschau aktualisiert sich sofort.
- Auf „CSS kopieren" klicken und den Code in dein Stylesheet einfügen.
Typische Anwendungen
- Schnell Verlaufshintergründe und Schatten für Buttons und Karten gestalten.
- Die genaue Rundung einstellen, ohne Zahlen zu raten.
- CSS lernen, indem man „Wert ↔ visueller Effekt" sieht. Farbcodes umrechnen? Nutze den Farb-Konverter.
Warum wirkt mein Schatten künstlich?
Der übliche Übeltäter ist reines Schwarz + großer Versatz + null Weichzeichnen, was wie eine schwarze Platte hinter dem Element aussieht. Echte Schatten sind weich, halbtransparent und nur leicht versetzt: Probiere einen kleinen Versatz (etwa 2–6px), moderates Weichzeichnen (10–20px) und eine dunkle Farbe mit geringer Deckkraft (z. B. rgba(0,0,0,0.15)) — das wirkt viel natürlicher. Ein oft vergessener Punkt: box-shadow beansprucht keinen Layout-Platz — anders als ein Rahmen schiebt es Nachbarelemente nicht weg, ein Schatten ändert dein Layout also nie. Für ein „Leuchten" nimm eine helle Farbe, setze den Versatz auf 0 und erhöhe den Blur. Sind die drei Effekte fertig, rechne Farben zwischen HEX, RGB und HSL mit dem Farb-Konverter um.