BackgroundsGratuit

Color Breathing Gradient

Fond qui respire en faisant tourner l'angle d'un dégradé OKLCH et en déplaçant sa position via deux animations CSS indépendantes — zéro JavaScript.

CSS@propertyOKLCH

Mis à jour le 4 octobre 2026

Breathing Gradient

Survolez ou cliquez la scène pour interagir

Cet effet est gratuit — la catégorie Backgrounds en contient 55 au total, dont 7 gratuits. Effect.Labs regroupe 840 effets vanilla. Découvrir la catégorie →

Voir dans le catalogue Compte gratuit

Exemples d'usage

Bêta ouverte

Des outils qui pensent avec vous.

Générez, itérez et livrez vos interfaces 10× plus vite — sans écrire une ligne de code.

Commencer gratuitement

① Landing SaaS — Hero plein écran

QuandLa landing page s'ouvre sur une zone d'accroche (viewport entier ou demi-écran) qui doit capter l'attention immédiatement sans surcharger le texte.

PourquoiLe dégradé qui respire crée un mouvement subtil perçu par la vision périphérique — le regard reste ancré sur la headline sans être distrait. Les teintes OKLCH s'enchaînent sans saut de luminosité, ce qu'une image JPG compressée ne peut pas reproduire à ce poids (< 1 Ko).

RéglagesbreathingHue 12 s (plus lente, plus apaisante), breathingAngle 20 s, overlay rgba(0,0,0,0.35) pour assurer le contraste du texte blanc, background-size 300 % 300 %.

Inspirez · 4 s

Respirez

Session · 4 : 00 restantes

② App de méditation — Fond de session

QuandUn minuteur de méditation occupe toute la surface de l'écran pour éliminer les distractions. Le fond doit évoluer en silence avec les phases inspire / expire, sans interface supplémentaire.

PourquoiLa rotation lente de l'angle OKLCH et le déplacement diagonal de position illustrent littéralement la respiration : le gradient « inspire » (teintes froides) puis « expire » (teintes chaudes). Sur une grande surface plein écran, les deux animations indépendantes (8 s / 16 s) sont pleinement perceptibles et apaisantes — ce qu'un bandeau de 60 px rend invisible.

RéglagesbreathingHue 8 s ease-in-out (cale sur le rythme respiratoire), breathingAngle 16 s linear, background-size 300 % 300 %, overlay rgba(0,0,0,0.22) léger pour laisser les teintes dominer.

De retour dans un instant

Nous déployons une mise à jour. La page se rechargera automatiquement.

Temps estimé · ~2 min

③ Page d'attente — Écran de maintenance

QuandLe site est en cours de déploiement ou en maintenance : la page pleine vue doit signaler au visiteur que le système est vivant, sans JavaScript, sans image lourde.

PourquoiLe gradient qui tourne remplace un spinner agressif — l'animation douce sur grande surface calme l'attente sans créer d'anxiété. Zéro JavaScript, moins d'1 Ko de CSS : idéal dans un contexte de déploiement où les assets peuvent être partiellement indisponibles.

RéglagesbreathingHue 12 s ease-in-out, breathingAngle 20 s linear, background-size 300 % 300 %, overlay rgba(0,0,0,0.40), palette teintes neutres-froides pour une tonalité sobre et professionnelle.

Comment ça marche

@property enregistre --bg-angle comme propriété CSS de type <angle>. Sans cette déclaration, animer un gradient de 0 deg à 360 deg produirait un saut instantané — le moteur ne saurait pas interpoler un angle dans background-image. Avec @property, l'interpolation est identique à celle d'un nombre : l'animation breathingAngle (12 s, linéaire) fait alors tourner l'angle du dégradé en continu, sans accroc.

Les arrêts de couleur sont exprimés en OKLCH (oklch(L% C H)). Contrairement à HSL, OKLCH garantit une luminosité perceptuellement uniforme : un passage violet → rose → vert ne produit pas de bosse de luminosité au milieu du dégradé. Le composant H (teinte, 0–360) est le seul paramètre qui varie d'un arrêt à l'autre ; L et C restent stables, ce qui rend les transitions d'une douceur impossible en sRGB.

La seconde animation, breathingHue (8 s, ease-in-out), déplace background-position selon un trajet diagonal : 0 % 50 % → 100 % 0 % → 100 % 100 % → 0 % 100 %. Couplé à background-size: 300 % 300 % — le dégradé occupe trois fois la surface de l'élément — ce déplacement fait défiler les teintes sur toute la zone visible. Les deux durées non-multiples (8 s / 12 s) garantissent que les animations ne se resynchronisent pas dans les premières minutes, produisant un cycle long et imprévisible.

L'effet est 100 % CSS : aucun JavaScript, aucune dépendance. Il se compose naturellement avec border-radius, clip-path ou mask, et s'applique à n'importe quel élément HTML. Un overlay position: absolute avec un background: rgba(0,0,0,0.3) suffit à rendre le texte superposé lisible sans toucher au gradient.

Accessibilité

prefers-reduced-motion absent : le code source n'inclut pas de règle @media (prefers-reduced-motion: reduce) — l'animation tourne en continu même si l'OS signale une préférence réduite. Pour les déploiements accessibles, ajouter manuellement @media (prefers-reduced-motion: reduce) { .breathing-gradient { animation: none; } }.
L'élément doit porter aria-hidden="true" lorsqu'il est purement décoratif — les lecteurs d'écran n'ont rien à annoncer sur un fond animé.
Le texte superposé sur le dégradé doit respecter WCAG AA (ratio ≥ 4,5:1). Vérifier la luminosité OKLCH de la zone dominante et ajuster l'opacité d'un scrim sombre si nécessaire.
Sans contrôle de pause utilisateur, une animation en boucle de plus de 5 secondes couvrant la vue principale n'est pas conforme à WCAG 2.2.2. Ajouter un bouton pause si l'effet occupe la surface entière de l'interface.
Aucun impact sur la navigation clavier : l'effet est un fond, tous les éléments interactifs superposés restent dans le flux de tabulation normal.

Compatibilité navigateur

Nécessite @property (Houdini CSS) et oklch() — disponibles dans tous les navigateurs modernes depuis 2023–2024.

Chrome 111+✓ Complet

Edge 111+✓ Complet

Firefox 128+✓ Complet

Safari 16.4+✓ Complet

Mobile iOS 16.4+✓ Complet

Android Chrome 111+✓ Complet

Sur Firefox < 128, @property n'est pas supporté : l'angle reste à 0 deg (gradient statique), mais l'animation breathingHue sur background-position continue de fonctionner. Sur Chrome/Edge < 111 ou Safari < 15.4, oklch() n'est pas reconnu : le gradient est ignoré et l'élément s'affiche avec un fond uni via la couleur de secours définie dans initial-value.

Le code

Copiez les trois blocs dans votre page. Aucune dépendance.

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)

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriété	Défaut	Effet
animation-duration (breathingHue)	8s	Vitesse de déplacement du background-position — 5 s pour un rythme énergique, 16 s pour un fondu très lent et apaisant.
animation-duration (breathingAngle)	12s	Vitesse de rotation de l'angle du dégradé — 8 s = dynamique, 25 s = mouvement presque imperceptible.
initial-value de --bg-angle	0deg	Angle de départ du dégradé avant animation (déclaré dans @property). 90deg oriente le dégradé verticalement au repos.
Teintes OKLCH (hue stops)	305 → 18 → 140 → 258 → 308	Valeurs H (0–360) des arrêts de couleur. Ex. 180→240→300 = palette froide bleu-violet ; 30→60→120 = vert-jaune chaud. Garder L et C stables pour conserver la cohérence perceptuelle.
Chroma OKLCH (C)	0.25–0.29	Saturation perceptuelle des couleurs. 0.12 = pastels doux, 0.35 = couleurs vives. Réduire sous 0.08 pour des tons quasi-neutres.
Lightness OKLCH (L)	62–72 %	Luminosité des stops. 40 % = tons sombres pour dark mode, 80 % = tons clairs pour un fond light.
background-size	300% 300%	Amplitude du déplacement visible. 200 % 200 % = mouvement réduit et régulier, 500 % 500 % = dérive lente et ample à grande échelle.

FAQ

L'effet nécessite-t-il une librairie ou un bundler ?

Non — Color Breathing Gradient est 100 % CSS : aucun JavaScript, aucune dépendance npm. Le bloc CSS se colle directement dans une feuille de styles ou dans un <style> inline. Compatible avec Angular, React, Vue et Svelte — enveloppez simplement l'élément dans un composant ; l'effet ne touche rien en dehors de l'élément ciblé.

Pourquoi utiliser OKLCH plutôt que HSL pour un dégradé animé ?

En HSL, un passage de teinte 60° (jaune) à 180° (cyan) semble s'assombrir brutalement, car ces teintes ont des luminosités perceptuelles très différentes. OKLCH découple la luminosité (L), la saturation (C) et la teinte (H) de façon perceptuellement uniforme : les transitions restent à luminosité constante, sans creux visuels au milieu du dégradé. Le résultat est plus propre et plus professionnel sans effort supplémentaire.

Le gradient peut-il habiller une forme arrondie ou un cercle ?

Oui. border-radius sur l'élément .breathing-gradient découpe le gradient nativement. Pour un cercle : border-radius: 50% + overflow: hidden. clip-path fonctionne de la même façon pour des formes personnalisées. L'animation n'est pas affectée par le masquage.

Fondamentaux

Design & Visuels

Animations & Scroll

Galerie & Plus

Color Breathing Gradient

Exemples d'usage