Generator für animierte CSS-Verlaufshintergründe

Dynamische Verlaufshintergründe online erstellen, mit mehreren Farben, Animationsrichtungen und Vorlagen; CSS-Code mit einem Klick generieren

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 Farben wählen, dann Animation anpassen; danach Code kopieren oder herunterladen. Vorlagen können direkt als Beispiele genutzt oder weiter angepasst werden: Farben, Stopps, Richtung, Tempo und Ausgabezweck. Vorschau, Erzeugung und Speichern erfolgen auf dieser Seite.

Live-Vorschau CSS Keyframes Text / Rahmen / Hintergrund Einstellungen speicherbar

Farbanzahl-

Animationsart-

Dauer-

Ausgabezweck-

Farbeinstellungen

Mit einer Vorlage geht es schneller. Farbstopps bestimmen den Verlauf des Übergangs; empfohlen sind 2–6 Farben.

Beispielvorlagen Überschreibt aktuelle Farben beim Klicken

Verlaufsbasis Linear für Webseitenhintergründe, radial für Spotlights, konisch für Rahmen oder Badges

Verlaufstyp

Verlaufswinkel135°

135°

Radiales / konisches Zentrum

Farbstopps 2 Farben müssen bleiben, bis zu 8 möglich

Animationsparameter

Für Seitenhintergründe wird eine langsamere Fließgeschwindigkeit empfohlen. Wenn Effekte reduziert werden sollen, kann der Code für reduzierte Bewegung aktiviert werden.

Animationsart Andere Keyframes-Logik wählen

Bewegungsrichtung Beeinflusst die Keyframes von background-position

Geschwindigkeit & Schleife Je größer der Hintergrund, desto stärker die Farbbewegung

Animationsdauer10s

10s

Hintergrundgröße400%

400%

Animationskurve

Endlosschleife Hin und zurück Bei Hover pausieren Reduzierte Bewegung

Erzeugen & exportieren

Klassennamen und Einsatz festlegen, CSS in die Projekt-Stildatei kopieren und dem Zielelement die Klasse hinzufügen.

Anwendungseinstellungen Ein Farbschema erzeugt Hintergründe, Text- oder Randeffekte

CSS-Klassenname

Ausgabezweck

Mindesthöhe des Containers (px)

Eckenradius (px)

Rahmenbreite (px)

Innerer Rahmenhintergrund

Generierter CSS-Code

Beispiel-HTML

Live-Vorschau

Animated Gradient Nach dem Anpassen von Farben, Richtung und Tempo wird der Effekt sofort aktualisiert. Ideal für Hero-Bereiche, Buttons, Landingpages und Karten. CSS Ready

Verlaufstyp-

Richtung-

Größe-

Klassenname-

Anleitung

Software-Nutzungsanleitung

Farbschema auswählen:Klicken Sie in „Farbeinstellungen“ auf eine Beispielvorlage oder fügen Sie Farben und Stopppunkte manuell hinzu, löschen oder passen Sie sie an.
Verlaufstyp festlegen:Wählen Sie einen linearen, radialen oder konischen Verlauf und passen Sie Winkel und Mittelpunkt nach Bedarf an.
Animationsparameter konfigurieren:Legen Sie unter „Animationsparameter“ Flussart, Bewegungsrichtung, Dauer, Hintergrundgröße, Animationskurve und Wiederholungsmodus fest.
Ausgabezweck auswählen:Wählen Sie unter „Export generieren“ Hintergrundcontainer, Verlaufstext oder Verlaufsrahmen und legen Sie Parameter wie CSS-Klassenname, abgerundete Ecken und Rahmen fest.
Effekt in der Vorschau prüfen:Rechts können Sie zwischen Vorschau-Modi für Hintergrund, Karte, Text und Rahmen wechseln. Generieren Sie den Code erst, wenn der Effekt passt.
Code kopieren oder herunterladen:Klicken Sie auf „CSS kopieren“, „HTML kopieren“ oder „CSS herunterladen“, um den Code auf Seitenelemente anzuwenden.
Einstellungen speichern:Klicken Sie auf „Einstellungen speichern“, um die aktuellen Parameter beizubehalten und sie beim nächsten Mal weiter zu bearbeiten.

Häufige Fragen

Antwort: Kopieren Sie den CSS-Code in Ihre Stylesheet-Datei und fügen Sie anschließend den Klassennamen aus dem Beispiel-HTML dem Element hinzu, das den Verlauf anzeigen soll.

Antwort: Lineare Verläufe eignen sich für Seitenhintergründe und Banner; radiale Verläufe für Spotlight- und weiche Streueffekte; konische Verläufe für Rahmen, Badges und visuelle Effekte mit Rotationsgefühl.

Antwort: Sie können die Hintergrundgröße erhöhen, mehr Farben hinzufügen, die Farbstopps anpassen oder Animationsarten wie diagonalen Fluss oder atmenden Fluss auswählen.

Antwort: Ja. Wählen Sie beim Ausgabezweck „Verlaufstext“ aus; das Tool generiert CSS-Code mit background-clip:text.

Antwort: Für normale Seitenhintergründe kann es in der Regel problemlos verwendet werden. Wenn die Seite viele Animationen enthält, empfiehlt es sich, die Animationsdauer zu verlängern, die Anzahl der Farben zu reduzieren und den Kompatibilitätscode zur Reduzierung von Bewegungseffekten zu aktivieren.