Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium
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
Breathing Gradient
Hover or click the scene to interact

This effect is free — the Backgrounds category contains 50 effects total, including 6 free. Effect.Labs has 811 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 &lt; 128, <code>@property</code> is not supported: the angle stays at 0 deg (static gradient), but the <code>breathingHue</code> <code>background-position</code> animation keeps running. On Chrome/Edge &lt; 111 or Safari &lt; 15.4, <code>oklch()</code> is not recognized: the gradient is ignored and the element falls back to the solid color declared in <code>initial-value</code>.

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 
.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-image: ;
   background-position-x: ;
   background-position-y: ;
   background-repeat: ;
   background-attachment: ;
   background-origin: ;
   background-clip: ;
   background-color: ;
   background-size: 300% 300%;
   animation: 8s ease-in-out 0s infinite normal none running breathingHue, 12s linear 0s infinite normal none running breathingAngle;
   }

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

.halftone-content .label  {
   color: white;
   font-weight: 800;
   font-size: 1.5rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   }

@keyframes breathingHue  {
   
  0%, 100%  {
   background-position: 0% 50%;
   }
  25%  {
   background-position: 100% 0%;
   }
  50%  {
   background-position: 100% 100%;
   }
  75%  {
   background-position: 0% 100%;
   }
}
JavaScript (fx-0081) 
// Effet CSS pur — pas de JavaScript nécessaire

Customize

Options passed to the API or data-* attributes:

Option / propertyDefaultEffect
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.