gradient background animated color-shift loop section Animierter Hero-Hintergrund mit weichem Farbwechsel CTA-Sektion mit lebendigem Hintergrund Dark-Mode-kompatible Ambient-Animation für Abschnitte Statische einfarbige Hintergründe wirken leblos Canvas/WebGL zu schwer für einfachen Farbwechsel-Effekt Animation ohne JS oder zusätzliche Abhängigkeiten
Gradient Background Scroll
Fetch snippet JSON:
curl https://webspire.de/snippets/animations/gradient-bg-scroll.json Animations
Gradient Scroll
The gradient cycles endlessly through its color stops.
Background
Customize
Quick Start
<section class="gradient-bg-scroll py-20 text-white">...</section>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 760 bytes · 33 lines
- Custom Properties
-
--gradient-bg-color-1--gradient-bg-color-2--gradient-bg-color-3--gradient-bg-speed - Classes
-
.gradient-bg-scroll
gradient background animated color-shift loop section
Fünf Gradient-Stops im 400%-Background-Size erzeugen einen nahtlosen Loop. background-position animiert von 0% bis -300% statt 100%, um den Loop-Sprung zu vermeiden. Konfigurierbar über drei Farbwerte und --gradient-bg-speed.