Gradient Shift
Le fond d'ambiance passe d'un dégradé de nuit bleu-violet à un dégradé doré en 0,8 s, son halo violet devient ambre et les textes suivent : le dégradé or vit dans un calque posé sur la nuit et c'est son opacité qui s'anime, donc la bascule est continue dans tous les navigateurs. 0,6 Ko de JavaScript, 150 ms si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Transitions comprend 52 effets, dont 9 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La scène .th-gradient-scene (300 × 220 px, coins de 16 px) porte un fond .th-gradient-bg en position: absolute; inset: 0 : linear-gradient(135deg, #0f172a, #1e1b4b, #312e81), une nuit qui va du bleu ardoise à l'indigo. Par-dessus, son pseudo-élément ::after couvre la même surface avec le dégradé doré linear-gradient(135deg, #fef3c7, #fde68a, #fcd34d), à opacité 0. Au centre, la couche de contenu (z-index: 1) aligne en colonne un halo de 80 px, le titre en 1,2 rem gras et une phrase. Le halo suit le même principe : un radial-gradient violet à 40 % dessous, un ambre à 50 % dans son ::after, invisible au repos.
Un dégradé ne s'interpole pas d'une valeur à l'autre : déclaré directement à la place du premier sous .active, il remplace l'ancien d'un coup (mesuré : dégradé final affiché 60 ms après le clic dans Chromium et Firefox, malgré une transition de 0,8 s). D'où les deux calques : .active fait passer l'opacité des deux ::after de 0 à 1 avec transition: opacity .8s, pendant que le titre va de #fff à #78350f et la phrase de blanc à 50 % à #92400e (transition: color .8s). Comme les deux dégradés ont la même géométrie et que le calque doré est opaque, le mélange à chaque pixel est exactement celui qu'on obtiendrait si chaque couleur glissait vers la sienne. Mesuré 300 ms après le clic : calque doré à 0,65 d'opacité dans Chromium 151, 0,61 dans Firefox 153, 0,66 dans WebKit 26, puis 1 à 1,5 s ; le second clic refait le chemin vers la nuit.
Le script (0,6 Ko) arme chaque .th-gradient-scene déclarée role="button" : clic, Entrée et Espace basculent .active et aria-pressed. Sans ce rôle, la scène n'est pas touchée et vous posez la classe depuis votre propre contrôle (un choix de créneau, une heure, une fin de minuterie), comme dans les exemples. Les deux dégradés se remplacent en CSS sans toucher au reste : seules les deux règles background du fond et de son ::after décident de l'ambiance. L'opacité est animée par le compositeur, sans repeindre les dégradés à chaque image. L'effet ne lit pas prefers-color-scheme et ne mémorise rien.
Accessibilité
- Clavier et rôle : la scène de démonstration est un
role="button"focalisable nommé « Ambiance dorée », avecaria-pressed. Mesuré : atteinte à la touche Tab dans Chromium et WebKit, basculée par Entrée et Espace dans les trois moteurs ; contour ambre de 2 px au focus clavier. En production, préférez un bouton visible qui pilote l'ambiance. - Mouvement réduit : rien ne se déplace ; sous
prefers-reduced-motion: reduce, le fondu et les couleurs de texte passent en 150 ms. Mesuré : calque doré à 0,67 (Chromium) et 0,35 (Firefox) d'opacité 60 ms après le clic, 1 à 300 ms. - Contraste : sur la nuit, phrase à 5,0:1 et titre blanc bien au-delà ; sur l'or, titre
#78350fà 7,3:1 et phrase#92400eà 5,7:1. Pendant les 0,8 s, texte et fond traversent ensemble des tons moyens : évitez de basculer pendant qu'on lit une information critique. La couleur seule ne doit pas porter le sens (heures creuses ou pleines) : gardez un libellé.
Compatibilité navigateur
CSS (pseudo-élément ::after, transitions d'opacity et de color) + 0,6 Ko de JavaScript, aucune dépendance, ni @property ni préfixe. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : même fondu continu, mêmes valeurs à quelques centièmes près, même retour. Les transitions d'opacité sur pseudo-élément sont bien plus anciennes ; le plancher vient de inset: 0, qui étend le dégradé sur toute la scène : Chrome et Edge 87, Firefox 66, Safari 14.1 (iOS 14.5).
Sans JavaScript, la scène reste sur la nuit et ne réagit pas ; poser active dans le HTML sert directement l'ambiance dorée.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="th-gradient-root">
<div class="th-gradient-scene" role="button" tabindex="0" aria-pressed="false" aria-label="Ambiance dorée">
<div class="th-gradient-bg"></div> <!-- nuit + ::after doré -->
<div class="th-gradient-content">
<div class="th-gradient-orb"></div> <!-- halo + ::after ambre -->
<h3>…</h3>
<p>…</p>
</div>
</div>
</div>Le code complet HTML + CSS + JS de Gradient Shift, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Les deux ambiances (CSS — background de .th-gradient-bg et de .th-gradient-bg::after) |
nuit #0f172a → #312e81, or #fef3c7 → #fcd34d, à 135° |
N'importe quels dégradés fonctionnent ; gardez la même géométrie (angle, positions des arrêts) dans les deux pour un passage qui ressemble à un glissement de couleurs plutôt qu'à une superposition. |
Halo (CSS — .th-gradient-orb et son ::after) |
80 px, violet à 40 % puis ambre à 50 % | Agrandissez-le (150 à 200 px) pour un soleil ou une lune ; supprimez-le pour un fond uni. |
Couleurs des textes (CSS — h3 et p sous .active) |
#78350f et #92400e sur l'or |
Vérifiez 4,5:1 sur la zone du dégradé la plus proche du texte, pas seulement sur sa couleur moyenne : pour ces textes foncés, c'est la plus foncée, #fcd34d, où #92400e tombe à 4,92:1 (6,37:1 sur #fef3c7). |
Durée (CSS — .8s sur le fondu et les couleurs) |
0,8 s | Une ambiance supporte 1,2 s ; en dessous de 0,4 s, le changement ressemble à un saut. |
Déclencheur (HTML — role="button" sur la scène) |
la scène entière est le bouton | Retirez role, tabindex et aria-pressed et posez .active depuis votre contrôle : le script ne touche plus la scène. |
Mouvement réduit (CSS — transition-duration: .15s) |
150 ms | 0s pour un changement instantané. |
FAQ
@property, on déclare chaque couleur d'arrêt comme <color> (--g1, --g2, --g3) et on anime ces variables ; cela demande trois déclarations par dégradé, et le dégradé saute dans les navigateurs sans @property (avant Chrome 85, Safari 16.4 et Firefox 128). Le calque en fondu marche partout, n'anime que l'opacité, et, les deux dégradés ayant la même géométrie, donne à chaque pixel le même mélange. Il ne sait en revanche passer qu'entre deux ambiances par pseudo-élément..th-gradient-bg, chacun en position: absolute; inset: 0 avec son dégradé et transition: opacity .8s, et ne rendez opaque que celui de l'ambiance courante (une classe par état, par exemple .is-noon). Le fond de base reste visible quand tous les calques sont à 0.active : retirez role="button" de la scène pour qu'elle ne réagisse plus au clic. Au chargement, lisez l'heure (var h = new Date().getHours(); scene.classList.toggle('active', h >= 6 && h < 22);) avant le premier affichage, sinon le fondu se joue à l'ouverture ; puis programmez la bascule suivante avec un setTimeout calculé jusqu'à 6 h ou 22 h : posée en direct, la classe joue le fondu de 0,8 s sous les yeux de l'utilisateur. Un onglet en veille retarde les minuteries : refaites le calcul à l'évènement visibilitychange. L'effet ne lit pas prefers-color-scheme : c'est une ambiance liée à un contenu, pas un thème d'interface.
