color breathe hue oklch animated gradient property ambient color-shifting hero background mood-changing section backdrop creative landing page accent static colors feel flat need animated color shift without JS want smooth hue transition in OKLCH
Color Breathe
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/color-breathe.json
Color Breathe
Background slowly shifts hue over time
Background
Customize
Quick Start
<div class="color-breathe h-screen"></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 637 bytes · 28 lines
- Custom Properties
-
--breathe-hue-start--breathe-hue-end--breathe-chroma--breathe-lightness--breathe-speed - Classes
-
.color-breathe
color breathe hue oklch animated gradient property
Smoothly animates the hue of an OKLCH color using @property to make the custom property animatable. The hue shifts between two values creating a breathing/mood-shifting effect.
Full-screen breathing background
<section class="color-breathe min-h-screen flex items-center justify-center" style="--breathe-hue-start: 280; --breathe-hue-end: 60">
<h1 class="text-5xl font-bold text-white drop-shadow-lg">Ambient</h1>
</section>