Entwerfen Sie lineare, radiale und konische CSS-Verläufe mit Live-Farbstopps und kopieren Sie den Code, direkt im Browser.
CSS Gradient Generator Online
Entwerfen Sie lineare, radiale und konische CSS-Verläufe mit Live-Farbstopps und kopieren Sie den Code, direkt im Browser.
Der CSS Gradient Generator läuft vollständig in Ihrem Browser. Die Farben und Verlaufseinstellungen, die Sie entwerfen, werden nie zu ArrayKit hochgeladen.
Der CSS Gradient Generator entwirft lineare, radiale und konische Verläufe visuell, sodass Sie einen background-image-Wert nie wieder von Hand anpassen müssen. Wählen Sie einen Verlaufstyp, ziehen Sie den Winkelregler oder die Mittelpunktposition, und fügen Sie dann so viele Farbstopps hinzu, entfernen oder ändern Sie deren Farbe, wie Sie brauchen — mit nativen Farbwählern und präzisen Prozentpositionen. Ein Live-Vorschaufeld aktualisiert sich sofort während der Bearbeitung, und das Tool erzeugt eine kopierfertige `background: ...;`-Deklaration, die Sie direkt in ein Stylesheet einfügen können. Es richtet sich an Frontend-Entwickler und Designer, die den Hintergrund eines Banners, Buttons oder einer Karte prototypisieren möchten, ohne eine Design-App zu öffnen. Alles läuft lokal in Ihrem Browser, sodass die von Ihnen erstellten Verläufe nirgends hochgeladen werden.
Funktionen
Lineare, radiale und konische Verlaufstypen in einem Tool
Unbegrenzte Farbstopps, jeweils mit nativem Farbwähler und Prozentposition
Stopps sofort hinzufügen oder entfernen mit Add- und Remove-Buttons
Winkelregler und numerische Eingabe für lineare und konische Verläufe
Kreis-/Ellipsen-Umschalter mit ziehbarer Mittelpunktposition für radiale Verläufe
Das Live-Vorschaufeld aktualisiert sich bei jeder Änderung
Erzeugt eine kopierfertige CSS-Deklaration `background: ...;`
Läuft vollständig im Browser, ohne dass etwas hochgeladen wird
So verwendest du CSS Gradient Generator
Wählen Sie Linear, Radial oder Konisch als Verlaufstyp
Stellen Sie den Winkel ein (linear/konisch) oder Form und Mittelpunkt (radial)
Fügen Sie Farbstopps hinzu und passen Sie Farbe sowie Position in Prozent an
Kopieren Sie das erzeugte background-CSS aus dem Code-Feld
Ein linearer Verlauf mit zwei Stopps, von Rot nach Blau, bei einem Winkel von 90 Grad.
Häufige Fehler & Fehlerbehebung
Der Verlauf sieht flach aus oder zeigt nur eine Farbe. — Fügen Sie mindestens zwei Farbstopps mit unterschiedlichen Positionen hinzu — ein einzelner Stopp oder zwei an derselben Position erzeugen keinen sichtbaren Übergang.
Ein radialer Verlauf wird als Oval statt als Kreis dargestellt. — Stellen Sie den Formumschalter auf Kreis, oder belassen Sie ihn bei Ellipse, wenn sich der Verlauf an das Seitenverhältnis des Elements anpassen soll.
Der konische Verlauf beginnt an der falschen Stelle. — Passen Sie den Winkelwert an — konische Verläufe drehen ihren Startstopp im Uhrzeigersinn ab dem gewählten Winkel, beginnend bei 0deg nach oben.
Farben wirken zwischen den Stopps gebändert oder trüb. — Fügen Sie nahe dem Übergangspunkt einen zusätzlichen Farbstopp hinzu, statt den Browser zwei sehr unterschiedliche Farbtöne über eine große Lücke interpolieren zu lassen.
Häufig gestellte Fragen
Was ist der CSS Gradient Generator?
Er ist ein visuelles Tool zum Erstellen linearer, radialer und konischer CSS-Verläufe aus Farbstopps, mit Live-Vorschau und einer kopierfertigen background-Deklaration — ohne die Verlaufssyntax von Hand zu schreiben.
Kann der CSS Gradient Generator auch radiale und konische Verläufe erzeugen, nicht nur lineare?
Ja. Stellen Sie den Segmented Control auf Radial für einen kreis- oder ellipsenförmigen Verlauf mit ziehbarem Mittelpunkt, oder auf Konisch für einen Verlauf, der ab einem gewählten Startwinkel um einen Mittelpunkt schwenkt.
Wie viele Farbstopps kann ich im Verlaufsgenerator hinzufügen?
So viele Sie möchten. Nutzen Sie den Button Stopp hinzufügen für einen neuen Stopp und den Remove-Button in jeder Zeile zum Löschen, solange mindestens ein Stopp übrig bleibt.
Lädt der CSS Gradient Generator meine Farben irgendwohin hoch?
Nein. Der CSS Gradient Generator läuft vollständig in Ihrem Browser. Die Farben, Positionen und Verläufe, die Sie entwerfen, verlassen Ihr Gerät nie.
Welches CSS gibt der Verlaufsgenerator aus?
Eine einzelne background-Deklaration, etwa background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);, bereit zum Einfügen in ein Stylesheet, ein style-Attribut oder eine CSS-in-JS-Vorlage.
Kann ich eine exakte Position für den Mittelpunkt eines radialen oder konischen Verlaufs festlegen?
Ja. Mit den Reglern Mitte X und Mitte Y können Sie den Ursprung des Verlaufs in jeder Richtung zwischen 0% und 100% des Elements verschieben.
Verwandte Tools
CSS-Farbkonverter — Konvertiere zwischen HEX, RGB und HSL mit Live-Farbmuster.
Color Format Converter — Jede CSS-Farbe zugleich zu HEX, RGB, HSL, OKLCH und mehr konvertieren.
Tailwind Color Generator — Eine Markenfarbe in eine 50-950 Tailwind-Skala in OKLCH mit Kontrast verwandeln.
CSS Grid Generator — Ein Grid-Layout visuell bauen und sauberes grid-template-CSS kopieren.
Cubic Bezier Generator — Eine CSS-cubic-bezier()-Easing-Kurve ziehen, vorschauen und kopieren.