CSS Farbverlauf Generator

Vor zehn Jahren erstellten Webdesigner Farbverläufe in Photoshop, schnitten sie in große JPG-Dateien zu und banden sie als kachelnden Hintergrund ein. Das war schlecht für SEO, verlangsamte Ladezeiten und sah auf 4K-Monitoren unscharf aus.

Moderne Browser führten die CSS-Funktion linear-gradient() ein. Da es sich um mathematische Anweisungen handelt, rendert die GPU des Browsers den Verlauf in Echtzeit. Mit dem Generator von Utiliome erstellst du komplexe Verläufe, die sofort laden und sich an jede Bildschirmgröße anpassen.

Das Verständnis der drei grundlegenden CSS-Verlaufstypen ermöglicht maximale kreative Freiheit:

• Lineare Verläufe: Der häufigste Typ. Du definierst einen Winkel (wie 45deg oder to right bottom) und die Farben gehen fließend ineinander über.
• Radiale Verläufe: Erzeugen einen kreis- oder ellipsenförmigen Effekt. Ideal, um zentrale Elemente hervorzuheben oder 3D-Kugeleffekte zu gestalten.
• Konische Verläufe: Der neueste Zusatz der CSS-Spezifikation. Farben verlaufen um einen Mittelpunkt (0 bis 360 Grad). Perfekt für Kreisdiagramme und Lade-Animationen in reinem CSS.

Ein einfacher Verlauf benötigt zwei Farben. Utiliome erlaubt es dir jedoch, unendlich viele Farbstopps einzubauen.

Schreibst du zum Beispiel linear-gradient(to right, red 0%, green 50%, blue 100%), geht die Farbe zur Bildschirmmitte sanft in Grün und am Ende in Blau über.

Du kannst auch harte Übergänge erzeugen, indem du zwei verschiedenen Farben denselben Prozentwert zuweist (z. B. red 50%, blue 50%). So entstehen Streifenmuster und Flaggen in reinem CSS.

Ein beliebter Trend im modernen Webdesign ist die Anwendung von Farbverläufen auf großen Typografien (bekannt durch Apple und Stripe).

Erstelle dazu einen Standard-Verlauf mit Utiliome und wende ihn mit drei CSS-Regeln an:

1. Verlauf auf das Element anwenden: background-image: linear-gradient(...);
2. Hintergrund auf den Text zuschneiden: -webkit-background-clip: text; background-clip: text;
3. Textfarbe transparent machen: -webkit-text-fill-color: transparent;

Dadurch bleibt dein Text markierbar sowie SEO-freundlich und sieht gleichzeitig modern aus.

Früher war das Schreiben von CSS-Farbverläufen kompliziert, da sich die Syntax mehrfach änderte. Entwickler mussten fünf verschiedene Zeilen schreiben, damit Verläufe überall gleich aussahen.

Heute ist die linear-gradient()-Syntax Standard. Um die Unterstützung älterer mobiler Geräte zu sichern, fügt der Generator von Utiliome auf Wunsch automatisch die nötigen -webkit- Präfixe ein.

Wer React- oder Next.js-Anwendungen mit Tailwind CSS entwickelt, möchte keine manuellen style-Attribute im Code stehen haben.

Utiliome schließt diese Lücke. Nach dem Designen wählst du die Tailwind-Exportoption. Das Tool wandelt deine HEX-Werte in Tailwind-Syntax (wie from-[#ff0000] via-[#00ff00] to-[#0000ff]) um, damit du sie direkt in JSX einfügen kannst.