CSS-Verlauf-Generator
Farben hinein, eine Deklaration heraus.
Ergebnis
Oben einfügen oder tippen, das Ergebnis erscheint hier.
Ihre Dateien bleiben auf Ihrem Gerät
Dieses Tool läuft vollständig in Ihrem Browser. Was Sie einfügen, wird auf Ihrem Gerät verarbeitet und nie an einen Server gesendet. Es ist daher auch für Tokens, Schlüssel und unveröffentlichte Texte sicher.
So funktioniert es
- Eine Farbe je Zeile. Jede CSS-Farbe geht – hex, rgb(), hsl(), ein Farbname.
- Eine Position hinter eine Farbe schreiben, um sie festzunageln: „#000 80%“.
- Linear, radial oder konisch wählen, dazu Winkel oder Mittelpunkt.
- Die Deklaration kopieren.
Häufige Fragen
- Warum steht zuerst eine einfarbige Angabe?
- Das ist die Rückfallebene. Alles, was den Verlauf nicht lesen kann – ein alter Browser, ein E-Mail-Programm, ein PDF-Renderer – nimmt die erste Deklaration und übergeht die zweite. Ohne sie bekommen diese Leser gar keinen Hintergrund.
- Wohin zeigt 180deg?
- Nach unten. In CSS zeigt 0deg nach oben und der Winkel läuft im Uhrzeigersinn – das Gegenteil der alten -webkit-Schreibweise und der meisten Entwurfsprogramme. Es ist die Sache, die man hier am häufigsten verkehrt herum hat.
- Warum Text statt einer Fläche zum Ziehen?
- Weil man eine Fläche nicht in ein Code-Review einfügen kann. Die Ausgabe hier ist eine Deklaration: vergleichbar, versionierbar und lesbar für die nächste Person, die die Datei öffnet.
- Wird etwas an einen Server geschickt?
- Nein. Es läuft im Browser, was Sie einfügen, bleibt auf Ihrem Rechner.
Verwandte Tools
◒ CSS-box-shadow-Generator Die Deklaration, nicht eine Fläche zum Ziehen. ◒ Farb-Umrechner HEX, RGB, HSL und CMYK – dazu das Kontrastverhältnis, das über Lesbarkeit entscheidet. ◐ Kontrastprüfer Ob es überhaupt jemand lesen kann. ◒ CSS-Formatierer Eine Deklaration je Zeile – oder die ganze Datei auf einer.