Entwicklerwerkzeuge

Generator für animierte CSS-Farbverläufe

Animierten CSS-Farbverlauf mit drei Farben erstellen. Winkel und Dauer einstellen, Vorschau pausieren und CSS mit Bewegungsschutz kopieren.

Generator für animierte CSS-Farbverläufe

KOSTENLOS

Farbe 1#2563ebFarbe 2#7c3aedFarbe 3#06b6d4

Winkel: 135°Zyklusdauer: 10 s

Vorschau und CSS berücksichtigen reduzierte Bewegung. Dem Element die Klasse animated-gradient zuweisen.

Erzeugter Code

.animated-gradient {
  background: linear-gradient(135deg, #2563eb, #7c3aed, #06b6d4);
  background-size: 300% 300%;
  animation: toolnoza-gradient 10s ease infinite;
}
@keyframes toolnoza-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .animated-gradient { animation: none; }
}

Beispiel

Ein blau-violett-türkiser Verlauf bei 135° und einem Zehn-Sekunden-Zyklus erzeugt einen bewegten Hintergrund.

Hinweise und Grenzen

Die Animation verschiebt background-position statt einzelner Farben. Die Vorschaupause verändert den exportierten Code nicht.

Benötigt der Verlauf JavaScript?

Nein. Der Code verwendet CSS-Keyframes und eine Media Query. Das Element benötigt Größe oder Inhalt, damit sein Hintergrund sichtbar ist.

Referenz

MDN — CSS animations

Generator für animierte CSS-Farbverläufe

Generator für animierte CSS-Farbverläufe

Beispiel

Hinweise und Grenzen

Ähnliche Werkzeuge

Praktische Anleitungen

Benötigt der Verlauf JavaScript?

Referenz