Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces ✨ Passer Premium
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
Breathing Gradient
Survolez ou cliquez la scène pour interagir

Cet effet est gratuit — la catégorie Backgrounds en contient 50 au total, dont 6 gratuits. Effect.Labs regroupe 811 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 &lt; 128, <code>@property</code> n'est pas supporté : l'angle reste à 0 deg (gradient statique), mais l'animation <code>breathingHue</code> sur <code>background-position</code> continue de fonctionner. Sur Chrome/Edge &lt; 111 ou Safari &lt; 15.4, <code>oklch()</code> 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 <code>initial-value</code>.

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 
.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

Personnaliser

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

Option / propriétéDéfautEffet
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.