BackgroundsFree

Color Breathing Gradient

Background that breathes by rotating an OKLCH gradient angle and shifting its position via two independent CSS animations — zero JavaScript.

CSS@propertyOKLCH

Updated October 4, 2026

Breathing Gradient

Hover or click the scene to interact

This effect is free — the Backgrounds category contains 55 effects total, including 7 free. Effect.Labs has 840 vanilla effects. Explore the category →

View in catalogue Free account

Usage examples

Now in beta

Design tools that think with you.

Generate, iterate and ship interfaces 10× faster — no code required.

Get started free

① SaaS Landing — Full-screen hero

WhenThe landing page opens on a full-viewport or half-screen hero that must capture attention immediately without overwhelming the headline text.

WhyThe breathing gradient creates subtle motion perceived by peripheral vision — the eye stays anchored on the headline without distraction. OKLCH hues transition without brightness jumps, which a compressed JPG cannot reproduce at this file size (< 1 KB).

SettingsbreathingHue 12 s (slower, calmer), breathingAngle 20 s, rgba(0,0,0,0.35) overlay to ensure white text contrast, background-size 300% 300%.

inhale · 4 s

Breathe

Session · 4 : 00 remaining

② Meditation app — Session background

WhenA meditation timer fills the entire screen to eliminate distractions. The background must shift silently through inhale / exhale phases without any extra UI.

WhyThe slow OKLCH angle rotation and diagonal position drift literally illustrate breathing: the gradient 'inhales' (cool hues) then 'exhales' (warm hues). On a full-screen surface, both independent animations (8 s / 16 s) are fully perceptible and soothing — imperceptible on a 60 px banner.

SettingsbreathingHue 8 s ease-in-out (aligns with breathing rhythm), breathingAngle 16 s linear, background-size 300% 300%, light rgba(0,0,0,0.22) overlay to let hues lead.

Back shortly

We're deploying an update. The page will refresh automatically.

Estimated time · ~2 min

③ Waiting page — Maintenance screen

WhenThe site is being deployed or under maintenance: the full-viewport page must reassure visitors that the system is alive, with no JavaScript and no heavy image.

WhyThe rotating gradient replaces an aggressive spinner — the gentle animation on a large surface calms the wait without creating anxiety. Zero JavaScript, under 1 KB of CSS: ideal in a deployment context where assets may be partially unavailable.

SettingsbreathingHue 12 s ease-in-out, breathingAngle 20 s linear, background-size 300% 300%, rgba(0,0,0,0.40) overlay, cool-neutral palette for a sober, professional tone.

How it works

@property registers --bg-angle as a CSS property of type <angle>. Without that declaration, animating a gradient from 0 deg to 360 deg would produce an instant jump — the engine has no way to interpolate an angle inside background-image. With @property, interpolation works exactly like a number: the breathingAngle animation (12 s, linear) continuously spins the gradient direction without any flicker.

Color stops use OKLCH (oklch(L% C H)). Unlike HSL, OKLCH guarantees perceptually uniform lightness: a transition from purple → pink → green produces no brightness spike in the middle of the gradient. Only the H component (hue, 0–360) changes from stop to stop; L and C stay constant, yielding smooth transitions that sRGB cannot match.

The second animation, breathingHue (8 s, ease-in-out), shifts background-position along a diagonal path: 0% 50% → 100% 0% → 100% 100% → 0% 100%. Combined with background-size: 300% 300% — the gradient covers three times the element area — that movement scrolls hues across the visible zone. The two non-divisible durations (8 s / 12 s) ensure the animations never resync during the first few minutes, producing a long and unpredictable cycle.

The effect is 100% CSS: no JavaScript, no dependencies. It composes naturally with border-radius, clip-path, and mask, and applies to any HTML element. A position: absolute overlay with background: rgba(0,0,0,0.3) is enough to keep overlaid text readable without touching the gradient.

Accessibility

prefers-reduced-motion absent: the source code includes no @media (prefers-reduced-motion: reduce) rule — the animation runs continuously even when the OS signals a motion preference. For accessible deployments, add manually: @media (prefers-reduced-motion: reduce) { .breathing-gradient { animation: none; } }.
The element should carry aria-hidden="true" when purely decorative — screen readers have nothing useful to announce about an animated background.
Text overlaid on the gradient must meet WCAG AA (ratio ≥ 4.5:1). Check the OKLCH lightness of the dominant zone and adjust a dark scrim opacity as needed.
Without a user-controlled pause mechanism, a looping animation longer than 5 seconds covering the main view is not WCAG 2.2.2 compliant. Add a pause button if the effect occupies the full interface surface.
No keyboard navigation impact: the effect is a background; all interactive elements layered on top remain in the normal tab order.

Browser compatibility

Requires @property (CSS Houdini) and oklch() — available in all modern browsers since 2023–2024.

Chrome 111+✓ Full

Edge 111+✓ Full

Firefox 128+✓ Full

Safari 16.4+✓ Full

Mobile iOS 16.4+✓ Full

Android Chrome 111+✓ Full

On Firefox < 128, @property is not supported: the angle stays at 0 deg (static gradient), but the breathingHue background-position animation keeps running. On Chrome/Edge < 111 or Safari < 15.4, oklch() is not recognized: the gradient is ignored and the element falls back to the solid color declared in initial-value.

The code

Copy the three blocks into your page. No dependencies.

HTML

<div class="chroma-demo breathing-gradient">
    <span class="label">Breathing Gradient</span>
  </div>

CSS

@property --hue-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.chroma-demo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.breathing-gradient {
  background: linear-gradient(var(--hue-angle),
      oklch(0.65 0.25 0),
      oklch(0.55 0.28 120),
      oklch(0.7 0.22 240),
      oklch(0.6 0.3 360));
  background-size: 300% 300%;
  animation: breathingHue 8s ease-in-out infinite, breathingAngle 12s linear infinite;
}

.breathing-gradient .label {
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.05em;
  z-index: 1;
}

@keyframes breathingHue {

  0%,
  100% {
    background-position: 0% 50%;
  }

  25% {
    background-position: 100% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  75% {
    background-position: 0% 100%;
  }
}

@keyframes breathingAngle {
  from {
    --hue-angle: 0deg;
  }

  to {
    --hue-angle: 360deg;
  }
}

JavaScript (fx-0081)

Customize

Options passed to the API or data-* attributes:

Option / property	Default	Effect
animation-duration (breathingHue)	8s	Speed of background-position shift — 5 s for an energetic rhythm, 16 s for a very slow, calming fade.
animation-duration (breathingAngle)	12s	Speed of gradient angle rotation — 8 s = dynamic, 25 s = almost imperceptible movement.
--bg-angle initial-value	0deg	Starting angle before animation (declared in @property). 90deg orients the gradient vertically at rest.
OKLCH hue stops (H)	305 → 18 → 140 → 258 → 308	H values (0–360) at each gradient stop. Ex. 180→240→300 = cool blue-violet palette; 30→60→120 = warm green-yellow. Keep L and C stable for perceptual consistency.
OKLCH chroma (C)	0.25–0.29	Perceptual saturation. 0.12 = soft pastels, 0.35 = vivid colors. Below 0.08 yields near-neutral tones.
OKLCH lightness (L)	62–72%	Stop lightness. 40% = dark tones for dark mode, 80% = light tones for a light background.
background-size	300% 300%	Amplitude of the visible shift. 200% 200% = contained and regular movement, 500% 500% = slow and wide drift.

FAQ

Does the effect require a library or bundler?

No — Color Breathing Gradient is 100% CSS: no JavaScript, no npm dependencies. The CSS block drops directly into a stylesheet or inline <style>. Compatible with Angular, React, Vue, and Svelte — just wrap the element in a component; the effect touches nothing outside the targeted element.

Why use OKLCH instead of HSL for an animated gradient?

In HSL, a hue transition from 60° (yellow) to 180° (cyan) appears to darken abruptly because those hues have very different perceptual lightnesses. OKLCH decouples lightness (L), saturation (C), and hue (H) in a perceptually uniform way: transitions stay at constant lightness, with no visual dip mid-gradient. The result looks cleaner and more professional with no extra effort.

Can the gradient fill a rounded shape or a circle?

Yes. border-radius on the .breathing-gradient element clips the gradient natively. For a circle: border-radius: 50% + overflow: hidden. clip-path works the same way for custom shapes. The animation is unaffected by clipping.

Fundamentals

Design & Visuals

Animations & Scroll

Gallery & More

Color Breathing Gradient

Usage examples