Zum Inhalt springen
TextArray
100% lokal

CSS-Farbverlauf-Generator

Generiere CSS lineare und radiale Farbverläufe mit benutzerdefinierten Farben und Winkeln.

Ausgabe

CSS-Farbverlauf-Generator

Ein CSS-Farbverlauf-Generator erstellt Hintergrund-Gradient-Deklarationen in Sekunden. Lineare Farbverläufe fließen in einer einzigen Richtung und eignen sich perfekt für subtile Hintergründe oder auffällige Übergänge. Radiale Farbverläufe strahlen von einem Mittelpunkt aus und sind ideal für Scheinwerfereffekte oder sanfte Farbübergänge. Wähle den Farbverlauf-Typ, stelle den Winkel für lineare Farbverläufe (0–360 Grad) ein und wähle zwei Farben – Hex-Codes, RGB, RGBA oder benannte Farben funktionieren alle. Das Tool generiert eine vollständige CSS-Hintergrund-Eigenschaft, die du direkt in dein Stylesheet einfügen kannst.

Farbverläufe gehören zu den vielseitigsten Designelementen in modernem CSS. Sie reduzieren die Dateigröße im Vergleich zu Bild-Hintergründen, skalieren unendlich und animieren sich in Browsern reibungslos. Die Live-Vorschau zeigt genau, wie dein Farbverlauf aussieht, während du Farben und Winkel anpasst. Kopiere die Ausgabe und wende sie auf ein beliebiges Element an – einen Seiten-Hintergrund, einen Button, einen Hero-Bereich oder ein Kartenoverlay.

Alles läuft in deinem Browser, sodass deine Farbwahl und Einstellungen privat bleiben. Es werden keine Daten irgendwohin gesendet. Das Tool funktioniert auch offline, sodass du Farbverläufe überall und jederzeit generieren kannst. Ob du eine Website gestaltest, einen App-Prototyp erstellst oder einfach mit Farbkombinationen experimentierst, dieser Generator beschleunigt deinen Arbeitsfluss.

Häufige Fragen

Was ist ein CSS-Farbverlauf?
Ein CSS-Farbverlauf ist ein sanfter Farbübergang, der direkt vom Browser gerendert wird. Lineare Farbverläufe verlaufen entlang einer Linie, radiale Farbverläufe strahlen von einem Mittelpunkt aus. Beide sind leicht, skalierbar und können animiert werden.
Welchen Winkel verwende ich für verschiedene Richtungen?
Für lineare Farbverläufe: 0° ist von links nach rechts, 90° von oben nach unten, 180° von rechts nach links, 270° von unten nach oben. Jeder Winkel zwischen 0 und 360 Grad funktioniert. Radiale Farbverläufe verwenden keinen Winkel.
Kann ich jedes Farbformat verwenden?
Ja. Hex-Codes (#FF0000), RGB (rgb(255, 0, 0)), RGBA mit Transparenz (rgba(255, 0, 0, 0.5)), HSL und benannte Farben (red, blue) funktionieren alle in CSS-Farbverläufen.
Werden meine Farben irgendwo übertragen?
Nein. Dieses Tool läuft vollständig in deinem Browser. Deine Farben, Winkel und Einstellungen verlassen dein Gerät nie.