Online-Generator für Verlaufs-Hintergründe

CSS-Verlaufseffekte in Echtzeit voranzeigen, unterstützt lineare, radiale und konische Verläufe, Code mit einem Klick generieren und Bilder exportieren

Fehler melden

Browser-Ausführungsmodus: Ihre Daten werden in Ihrem Browser verarbeitet und nicht auf den Server hochgeladen.

Geschwindigkeit und Stabilität: Die Verarbeitungsgeschwindigkeit hängt von Ihrem Gerät und Browser ab. Für große Stapelaufgaben kann die Desktop-Version stabiler sein.

Tool wird geladen, bitte warten...

Wenn das Online-Tool nicht lädt oder läuft, versuchen Sie das Desktop-Tool. https://tools.yikeaigc.com/

Tool-Nutzung

Zur alten Version zurückkehren

Erst Verlauf einstellen, dann Code kopieren oder Bild exportieren. Unterstützt lineare, radiale, konische, wiederholte Verläufe und mehrere Farbstopps; Änderungen werden rechts in der Vorschau synchronisiert.

Verlauf einstellen

Erst Verlaufstyp wählen, dann Richtung und Farbstopps anpassen. Farbstopps am besten aufsteigend anordnen.

VerlaufstypKonische Verläufe eignen sich für Winkel-Farbräder und ringförmige Hintergründe

Richtung und FormLineare Verläufe nutzen Winkel oder Schnellrichtungen

Linearer Winkel90°

Wiederholungsperiode32%

Radiale Form

Streubereich

Wiederholungsperiode32%

Zentrum X50%

Zentrum Y50%

Startwinkel0°

Zentrum X50%

Zentrum Y50%

Verlauf wiederholen Weichlicht-Ebene Vignette Feinstruktur

FarbstoppsUnterstützt 2–10 Stopps, mit Deckkraft und Position

BeispielvorlagenAls Startpunkt für Farbanpassungen

Code-Export

Nach Prüfung der Vorschau CSS kopieren oder PNG-, JPG-, SVG-, CSS-Dateien und Asset-Paket exportieren.

CodeformatDeklarationsart nach Entwicklungsszenario wählen

Codemodus

Klassen- / Variablenname

Fallback-Hintergrundfarbe einfügen Code komprimieren

CSS-Code

BildmaßeEigene Größe gilt für Bild- und SVG-Export

Größenvorlagen

JPG-Qualität92%

Breite (px)

Höhe (px)

Ressourcen herunterladenRessourcenpaket enthält CSS, SVG, PNG und Einstellungs-JSON

Live-Vorschau

Gradient Preview Änderungen werden sofort aktualisiert

TypLinear

Farbstopps2

Exportgröße1920x1080

Codelänge0

Anleitung

Anleitung zur Softwarenutzung

Verlaufstyp festlegen: Wählen Sie einen linearen Verlauf, radialen Verlauf oder konischen Verlauf. Linear eignet sich für Banner und Webseitenhintergründe, radial für Effekte mit Ausbreitung vom Zentrum, konisch für Ringe, Farbräder und dekorative Muster.
Richtung und Form anpassen:
- Linearer Verlauf: Sie können Richtungsschaltflächen verwenden oder die Richtung über den Winkel-Schieberegler auf 0-360 Grad einstellen.
- Radialer Verlauf: Sie können Kreis oder Ellipse, Ausbreitungsbereich sowie die X/Y-Position des Mittelpunkts einstellen.
- Konischer Verlauf: Sie können den Startwinkel und die Position des Mittelpunkts einstellen.
Farbknoten konfigurieren: Verwenden Sie Farbauswahl, HEX-Eingabefeld, Positionsprozentsatz und Transparenzparameter, um jeden Farbknoten zu steuern. Sie können Farben hinzufügen, löschen, sortieren, umkehren und die Knoten mit einem Klick gleichmäßig verteilen.
Effektoptionen verwenden: Sie können wiederholte Verläufe, eine Weichlicht-Ebene, Vignettierung und feine Texturen aktivieren, damit der Hintergrund besser für den ersten Webseitenbereich, Karten, Poster und Designmaterialien geeignet ist.
Kopieren und exportieren: Wählen Sie unter „Code-Export“ den CSS-Klassennamen, nur Deklarationen oder den CSS-Variablenmodus aus. Sie können CSS-Code kopieren sowie PNG-, JPG-, SVG-, CSS-Dateien und ZIP-Ressourcenpakete exportieren.
Speichern und teilen: Speichern Sie unter „Speichern und teilen“ die aktuellen Einstellungen, erstellen Sie einen Freigabelink oder fügen Sie vorhandenen CSS-Verlaufscode ein, um ihn in das Tool zu laden und weiterzubearbeiten.

Häufige Fragen

Antwort: Ein linearer Verlauf geht entlang einer geraden Richtung über und eignet sich für Webseitenhintergründe, Schaltflächen und Banner; ein radialer Verlauf breitet sich vom Mittelpunkt nach außen aus und eignet sich für Spotlights und Hintergründe mit Tiefe; ein konischer Verlauf rotiert um das Zentrum und eignet sich für Farbräder, Ringe und dekorative Effekte.

Antwort: Klicken Sie auf „Farbe hinzufügen“, um Farbknoten hinzuzufügen, und legen Sie dann jeweils Farbe, Positionsprozentsatz und Transparenz fest. Die Knotenposition beeinflusst den Bereich des Farbübergangs; Sie können auch „Gleichmäßig verteilen“ verwenden, um die Knoten schnell zu ordnen.

Antwort: Wiederholende Verläufe eignen sich für regelmäßige Hintergründe wie Streifen, Wellen und ringförmig wiederholte Texturen. Für lineare und radiale Verläufe kann der Wiederholungsmodus aktiviert werden; bei konischen Verläufen empfiehlt es sich, den Effekt über Farbstopps und Winkel zu steuern.

Antwort: Es können PNG-, JPG-, SVG- und CSS-Dateien exportiert werden, außerdem kann ein ZIP-Ressourcenpaket heruntergeladen werden. Das Ressourcenpaket enthält CSS-Code, SVG-Dateien, PNG-Bilder und Einstellungs-JSON, damit Archivierung und spätere Bearbeitung einfacher sind.

Antwort: Kopieren Sie den generierten CSS-Code und fügen Sie ihn in die Stylesheet-Datei Ihrer Webseite ein. Das Tool bietet drei Modi: CSS-Klassenname, nur Deklaration und CSS-Variablen. Sie können je nach Projektgewohnheiten wählen.

Antwort: Ja. Fügen Sie im Bereich „CSS importieren“ unter „Speichern & Teilen“ den Code für linear-gradient, radial-gradient oder conic-gradient ein. Nach einem Klick auf „In Tool einlesen“ können Sie Farben, Winkel und Positionen weiter anpassen.

Antwort: Nein. Verlaufserstellung, Kopieren des Codes, Zeichnen von Bildern und Packen der Ressourcen erfolgen lokal. Designinhalte müssen nicht auf einen Server hochgeladen werden.