Farbverlauf
Nutze den Gradient Generator für CSS-Farbverläufe mit Farbstopps, Winkel, Deckkraft und Export.
Wie Farbverlauf CSS Übergänge vorbereitet
Farbverlauf erstellt sichtbare CSS Verläufe aus mehreren Farbstopps, einer Verlaufsart, einer Richtung und einer Deckkraft. Die Vorschau zeigt sofort, wie der Verlauf als Hintergrund, Karte, Schaltfläche oder Text wirken kann. Dadurch lässt sich ein Verlauf nicht nur technisch erzeugen, sondern auch im visuellen Kontext bewerten.
Der Gradient Generator ist für typische Weboberflächen ausgelegt: Hero Bereiche, Karten, Overlays, Buttons, dekorative Flächen und Exportgrafiken. Neben dem CSS Code stehen Downloads in mehreren Formaten bereit, sodass derselbe Verlauf in Code, Präsentationen oder Designunterlagen verwendet werden kann.
Die sichtbaren Einstellungen trennen die wichtigsten Entscheidungen. Du wählst Linear, Radial, Konisch oder Raute, stellst Winkel und Richtung ein, bearbeitest Farbstopps, regelst die Deckkraft und definierst die Exportgröße.
So verwendest du Farbverlauf
- Wähle zuerst den Vorschaumodus Hintergrund, Karte, Schaltfläche oder Text, damit der Verlauf im passenden Einsatzkontext sichtbar wird.
- Wähle die Verlaufsart Linear, Radial, Konisch oder Raute.
- Stelle Richtung oder Winkel über die Pfeilfelder, den Winkelregler oder das Zahlenfeld ein.
- Bearbeite die Farbstopps auf der Leiste und nutze „Hinzufügen“, wenn ein weiterer Stopp benötigt wird.
- Regle die Deckkraft, wenn der Verlauf als Overlay oder weiche Fläche eingesetzt werden soll.
- Kopiere den CSS Code oder lade den Verlauf als PNG, JPG, WebP, SVG oder PDF herunter. Für passende Ausgangsfarben kann Farbpalette helfen.
Verlaufsarten gezielt wählen
Die Verlaufsart entscheidet, wie die Farbübergänge räumlich gelesen werden. Ein linearer Verlauf führt das Auge in eine Richtung. Ein radialer Verlauf lenkt Aufmerksamkeit auf einen Mittelpunkt. Ein konischer Verlauf dreht Farben um ein Zentrum. Die Raute wirkt grafischer und eignet sich für dekorative Flächen.
| Art | Wirkung | Geeigneter Einsatz |
|---|---|---|
| Linear | Richtung klar von Start zu Ende | Hero Hintergrund, Overlay, Kartenfläche |
| Radial | Fokus vom Zentrum nach außen | Spotlight, weiche Lichtwirkung, zentrale Elemente |
| Konisch | Farbwechsel rotiert um einen Mittelpunkt | Dekorative Kreise, dynamische Akzente, visuelle Effekte |
| Raute | Grafischer Verlauf mit kantigerer Mitte | Posterartige Flächen, Karten, abstrakte Hintergründe |
Farbstopps und Deckkraft kontrollieren
Farbstopps bestimmen, an welcher Position eine Farbe im Verlauf liegt. Drei gut gesetzte Stopps können oft ruhiger wirken als viele zufällige Werte. Wenn der Übergang hart aussieht, liegt das meist an zu engem Abstand zwischen Stopps oder an Farben mit sehr unterschiedlicher Helligkeit.
Deckkraft verändert den gesamten Verlauf und ist besonders bei Overlays hilfreich. Ein Verlauf mit reduzierter Deckkraft kann über Bildern oder Karten liegen, ohne den Inhalt komplett zu verdecken. Für Text und Buttons sollte die Deckkraft jedoch sorgfältig geprüft werden, weil der Kontrast schnell leidet.
CSS Code und Bildexport unterscheiden
Der kopierte CSS Code ist die beste Wahl, wenn der Verlauf in einer Webseite flexibel bleiben soll. CSS skaliert mit dem Element, kann in Variablen eingebunden werden und lässt sich später leichter anpassen. Ein Bildexport ist sinnvoll, wenn der Verlauf außerhalb des Codes benötigt wird oder ein festes Format verlangt ist.
| Ausgabe | Wann sie passt | Hinweis |
|---|---|---|
| CSS | Webseiten, Komponenten, Themes und Prototypen | Flexibel und direkt im Stylesheet nutzbar |
| PNG | Schnelle Vorschau und Präsentationsgrafik | Gut für pixelbasierte Übergaben |
| JPG oder JPEG | Flache Hintergründe ohne Transparenzbedarf | Kann bei Verläufen Kompressionsartefakte zeigen |
| WebP | Webgrafiken mit kleinerer Dateigröße | Vor Einsatz Browser und Workflow prüfen |
| SVG | Skalierbare Vektorgrafik und Dokumentation | Besonders nützlich für klare, skalierbare Flächen |
| Freigabe oder Archivierung in Dokumenten | Praktisch für nicht technische Abstimmungen |
Praktische Tipps für bessere Farbverläufe
- Nutze weniger Stopps, wenn der Verlauf hochwertig und ruhig wirken soll.
- Setze den hellsten Bereich bewusst, damit wichtige Inhalte nicht überstrahlt werden.
- Prüfe den Verlauf im Karten und Schaltflächenmodus, bevor er für UI Flächen übernommen wird.
- Verwende sehr gesättigte Farben nicht auf großer Fläche, wenn Text darüberstehen soll.
- Stimme Zwischenfarben mit Farben Mischen ab, wenn ein Übergang kontrollierter werden soll.
Qualitätscheck vor dem Kopieren oder Download
Ein Verlauf kann in der großen Vorschau überzeugend wirken und in einer echten Oberfläche trotzdem problematisch sein. Prüfe deshalb die geplante Größe, den Inhalt darüber und die Rolle des Verlaufs. Hintergrundverläufe dürfen auffallen, sollten aber nicht mit Text, Icons oder Produktbildern konkurrieren.
Für CSS ist außerdem wichtig, dass Richtung und Art zum Layout passen. Ein linearer Verlauf von links oben nach rechts unten kann eine Hero Fläche dynamisch machen, während derselbe Verlauf in einer kleinen Schaltfläche unruhig wirkt. Kopiere oder exportiere den Verlauf erst, wenn Vorschau, Code und Zielkontext zusammenpassen.
Farbstopps für ruhige Übergänge setzen
Farbstopps bestimmen nicht nur die Farben, sondern auch die Geschwindigkeit des Übergangs. Liegen zwei Stopps sehr nah beieinander, entsteht ein harter Wechsel. Liegen sie weit auseinander, wirkt der Übergang weicher. Für Hintergründe sind weiche Übergänge meistens angenehmer, während grafische Akzente auch härtere Kanten vertragen können.
Ein guter Startpunkt sind wenige, klar gesetzte Stopps. Danach kann ein zusätzlicher Zwischenstopp helfen, wenn eine Farbe zu abrupt kippt. Zu viele Stopps machen die spätere Pflege dagegen schwieriger, weil jeder Wert eine sichtbare Wirkung auf den gesamten Verlauf hat.
Vorschau im richtigen Kontext lesen
Der Vorschaumodus ist mehr als Dekoration. Ein Verlauf, der als Hintergrund ruhig wirkt, kann auf einer Schaltfläche zu viel Bewegung erzeugen. Umgekehrt kann ein Verlauf im Textmodus interessant aussehen, aber für längere Wörter unleserlich werden. Deshalb sollte die Vorschau immer dem geplanten Einsatz ähneln.
Der Kartenmodus hilft, Flächen und Inhalte gemeinsam zu beurteilen. Der Schaltflächenmodus zeigt, ob der Verlauf eine klare Bedienfläche unterstützt. Der Textmodus ist nützlich für kurze dekorative Überschriften, sollte aber nicht als Ersatz für gut lesbaren Fließtext verstanden werden.
Exportgröße und Dateiformat abstimmen
Wenn ein Bildexport benötigt wird, beeinflussen Breite und Höhe die spätere Qualität. Eine zu kleine Datei kann auf großen Flächen unscharf oder gestreckt wirken. Eine unnötig große Datei kann dagegen schwerer sein als nötig. Für Webhintergründe sollte die Exportgröße zur realen Anzeige passen.
SVG ist oft die bessere Wahl, wenn der Verlauf skalierbar bleiben soll. PNG eignet sich für transparente oder verlustfreie Übergaben, während JPG bei weichen Verläufen sichtbare Kompression zeigen kann. WebP kann Dateigröße sparen, sollte aber zum Zielsystem passen. PDF ist eher für Abstimmung und Dokumentation geeignet als für direkten Website Code.
Verlauf und Inhalt zusammen prüfen
Ein Farbverlauf darf die eigentliche Information nicht verdrängen. Wenn Text, Produktbild oder UI Karte über dem Verlauf liegen, sollte der ruhigste Bereich hinter dem wichtigsten Inhalt stehen. Ein sehr heller oder stark gesättigter Stopp direkt hinter Text kann die Lesbarkeit deutlich verschlechtern.
Für produktive Oberflächen ist deshalb ein kurzer Realitätscheck nötig: Wo steht der Inhalt? Welche Bildschirmgrößen sind wichtig? Wird der Verlauf wiederholt, zugeschnitten oder skaliert? Ein Verlauf, der in einer breiten Desktop Vorschau ideal wirkt, kann auf mobilen Ausschnitten anders erscheinen.
CSS Verlauf vor dem Einbau vereinfachen
Ein Verlauf sollte im Code so einfach wie möglich bleiben. Wenn zwei Farbstopps kaum sichtbar sind oder eine Richtung keinen Unterschied macht, ist weniger CSS oft besser. Ein kurzer, verständlicher Verlauf lässt sich leichter warten und schneller an andere Komponenten anpassen.
Vor dem Kopieren lohnt sich ein Blick auf den erzeugten Code. Die Art des Verlaufs, die Richtung, die Farben und die Positionen sollten zur geplanten Fläche passen. Wenn ein Verlauf später als CSS Variable oder Token genutzt wird, hilft eine klare Benennung wie hero background, card accent oder button highlight.
Bei wiederkehrenden Designs sollte derselbe Verlauf nicht mehrfach leicht verändert gespeichert werden. Besser ist ein definierter Basisverlauf, der bei Bedarf mit Deckkraft, Overlay oder einem zusätzlichen neutralen Hintergrund kombiniert wird. So bleibt das visuelle System konsistent.
Für responsive Layouts sollte der Verlauf auch gedanklich zugeschnitten werden. Auf mobilen Bildschirmen ist oft nur ein Ausschnitt der großen Fläche sichtbar. Liegt der wichtigste Farbstopp außerhalb dieses Ausschnitts, verändert sich die Wirkung stark.
Ein sicherer Verlauf funktioniert deshalb nicht nur in der großen Vorschau, sondern auch auf schmalen Flächen, in Karten und hinter kurzen Texten. Erst wenn diese Situationen passen, lohnt sich der finale Export.
Wenn der Verlauf Teil einer Marke oder eines wiederholten UI Musters wird, sollte auch die Richtung festgelegt werden. Ein Verlauf, der an anderer Stelle gespiegelt oder anders gedreht wird, kann wie eine neue Gestaltung wirken. Konsistente Richtung und Stopppositionen halten die visuelle Sprache zusammen.
Diese Konsistenz ist besonders wichtig, wenn mehrere Verläufe in derselben Oberfläche erscheinen und dennoch wie ein gemeinsames System wirken sollen.