# Effet glow en design : lumière douce, sans halo sur le texte [Canonical HTML page](https://gradiently.design/fr/guide/glow-effect) Un glow doit ressembler à de la lumière tombant sur une surface : un cœur vif, un long fondu, une pièce sombre autour. Placez-le derrière les formes et dans les fonds, loin des bords de vos lettres. ## The short version - Un effet glow est un cœur de couleur vive qui s’estompe progressivement dans un environnement plus sombre, pour se lire comme de la lumière plutôt que de la peinture. - Les glows fonctionnent mieux sur les formes, les boutons, les photos de produits et les fonds, où ils ajoutent de la profondeur et guident le regard. - Un halo de glow autour du texte floute les bords des lettres et les rend plus difficiles à lire : gardez les mots nets et placez la lumière ailleurs. - En CSS, un glow doux est généralement un dégradé radial qui s’estompe vers le transparent, ou une box-shadow à grand flou et sans décalage. - Un glow a besoin d’un fond sombre ou atténué pour se voir, et un peu de grain évite que son long fondu forme des bandes. Un **effet glow** est une tache de lumière : un cœur de couleur vive qui s’estompe lentement dans un environnement plus sombre, comme si une lampe se tenait juste derrière la surface. Bien employé, il ajoute de la profondeur à un design plat et attire l’œil vers un produit, un bouton ou une forme. Mal employé, il devient un anneau flou autour du titre. La règle que suit toute cette page est simple : mettez le glow sur les formes et les fonds, et gardez les mots nets. ## Où un glow a sa place, et où il n’en a pas De la lumière autour d’un objet dit que cet objet compte. De la lumière autour de lettres fait autre chose : elle adoucit leurs bords, réduit le contraste entre le trait et le fond, et rend la ligne floue sur les petits écrans. C’est pourquoi le glow doit se placer près des mots, jamais autour d’eux. Si le texte a besoin d’aide pour se lire, corrigez plutôt la zone derrière lui ; [les alternatives à l’ombre de texte](https://gradiently.design/fr/guide/text-shadow-alternatives) présente des options plus propres. ### À éviter - Un halo flou collé au titre - Un glow de la même couleur que le texte - Plusieurs glows de force égale en concurrence - Un glow vif sur un fond vif - Un glow ajouté à chaque bouton, carte et icône ### À faire - De la lumière derrière un produit, une forme ou une photo - Un glow sur le côté, les mots sur la zone calme - Une lumière principale et au plus un écho plus faible - Un fond sombre ou atténué pour que la lumière ait de la place - Un glow réservé à la seule chose qui compte ## Des fonds glow avec codes Le fond lumineux le plus simple est un dégradé radial qui part vif, passe vite par un ton moyen plus riche et s’estompe dans un fond presque noir. Décaler le centre hors du milieu en fait une source de lumière plutôt qu’une cible. - Lueur de braise: `radial-gradient(circle at 70% 30%, #fde68a 0%, #f97316 18%, #7c2d12 42%, #120a06 75%)` - Lumière de bassin: `radial-gradient(circle at 30% 70%, #a5f3fc 0%, #0891b2 20%, #083344 48%, #030b10 80%)` - Lueur de scène par en dessous: `radial-gradient(ellipse at 50% 100%, #f0abfc 0%, #a21caf 22%, #3b0764 50%, #0b0414 85%)` - Signal citron vert: `radial-gradient(circle at 80% 20%, #d9f99d 0%, #4d7c0f 22%, #1a2e05 50%, #070b03 80%)` - Lumière de fenêtre sur papier: `radial-gradient(ellipse at 20% 15%, #fff7ed 0%, #fed7aa 20%, #f5e6d8 50%, #efe7df 85%)` - Lampe violette: `radial-gradient(circle at 75% 25%, #c4b5fd 0%, #6d28d9 16%, #1e1b4b 45%, #09071a 80%)` Cinq glows sombres et un clair. La version claire fonctionne parce que le glow est plus chaud et plus vif qu’un fond déjà pâle, pas parce qu’il est plus fort. Chacun comporte trois parties : un cœur proche du blanc ou très pâle, un arrêt moyen saturé et un fond profond de la même famille. Sautez l’arrêt moyen et le glow paraît gris là où il rencontre le sombre, le problème décrit dans [les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients). Pour en savoir plus sur la forme elle-même, voyez [les dégradés radiaux](https://gradiently.design/fr/guide/radial-gradient). ## Comment faire un glow qui ressemble à de la vraie lumière 1. **Partez d’un fond sombre ou atténué** La lumière a besoin d’obscurité pour se voir. Un noir bleuté, un vert profond ou un ton de papier poussiéreux conviennent ; un fond blanc éclatant ne laisse nulle part où aller au glow. 2. **Donnez au cœur une teinte plus claire et plus chaude** La vraie lumière est la plus vive et la moins saturée en son centre. Faites du cœur une version pâle de la couleur du glow, comme `#fde68a` pour un glow orange. 3. **Laissez-le décroître lentement** Le fondu doit s’étendre sur une grande zone, souvent la moitié du cadre. Un fondu court ressemble à un projecteur découpé aux ciseaux. 4. **Décidez d’où vient la lumière** Placez le cœur près d’un bord ou d’un angle, ou derrière l’objet qu’il éclaire. Puis gardez le reste du design cohérent avec cette direction. 5. **Ajoutez un grain fin** Les longs fondus sombres sont là où le banding se voit le plus. Une couche de bruit léger masque les paliers ; [les dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients) donne la méthode. Un test de plus : éteignez le glow et regardez de nouveau. Si le design fonctionne encore, le glow ajoute de l’atmosphère. S’il s’effondre, le glow fait un travail qui revient à la mise en page ou au contraste. ## L’effet glow en CSS Il existe trois façons fiables de faire un glow sur le web. Une `box-shadow` sans décalage et à grand flou éclaire les bords d’une carte ou d’un bouton. Un dégradé radial sur un pseudo-élément place une douce flaque de lumière derrière un objet. Et `filter: blur()` sur une forme colorée donne le résultat le plus doux, pour un coût de rendu plus élevé. [La référence box-shadow de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) liste chaque valeur. ```css /* 1. A button that glows at its edges */ .button-glow { background: #7c3aed; color: #ffffff; box-shadow: 0 0 0 1px rgb(196 181 253 / 0.4), 0 0 24px rgb(124 58 237 / 0.55), 0 0 64px rgb(124 58 237 / 0.25); } /* 2. A pool of light behind a product image */ .product { position: relative; isolation: isolate; } .product::before { content: ""; position: absolute; inset: -20%; z-index: -1; background: radial-gradient(circle at 50% 55%, rgb(253 230 138 / 0.9), rgb(249 115 22 / 0.35) 35%, transparent 70%); } /* 3. A blurred orb in a hero background */ .orb { position: absolute; width: 480px; aspect-ratio: 1; border-radius: 50%; background: #0891b2; filter: blur(120px); opacity: 0.6; pointer-events: none; } ``` Trois glows, aucun sur du texte. Empiler deux ou trois box-shadows de force décroissante donne un bord plus doux qu’une seule grande ombre. | Méthode | Idéale pour | Coût | À surveiller | | --- | --- | --- | --- | | `box-shadow` | Boutons, cartes, champs | Faible | Coupée par `overflow: hidden` sur un parent | | Couche `radial-gradient` | Lumière derrière les images et les sections | Faible | Banding sur les longs fondus sombres | | Forme avec `filter: blur()` | Fonds d’accueil, orbes d’ambiance | Plus élevé, surtout animé | Coût de repeinture au défilement ; gardez-la fixe ou petite | Choisissez la méthode la moins coûteuse qui donne le rendu voulu. La plupart des glows d’une page devraient être des dégradés ou des ombres, pas des éléments floutés. Sur les boutons, gardez le glow discret et le libellé net : la lumière appartient à la forme du bouton, pas à ses mots. La syntaxe complète des ombres figure dans [la box-shadow CSS](https://gradiently.design/fr/guide/css-box-shadow). ## Le glow dans les publications, affiches et stories Dans un design fixe, un glow travaille au mieux derrière le sujet ou dans la moitié vide du cadre. Placez la lumière là où l’œil doit se poser d’abord, puis composez le titre sur la partie la plus sombre et la plus calme du fond. La lumière conduit le lecteur vers les mots sans les toucher. Une story d’événement verticale où une tache vive du fond se trouve juste derrière le titre et le délave De la lumière qui traverse le titre : la zone la plus vive tombe sur les lettres et les aplatit. La même story d’événement verticale avec le glow vif éloigné du titre et une zone sombre et calme derrière le texte La même story avec la lumière tenue à l’écart des mots. Le glow donne toujours l’ambiance, et le texte reste net. C’est exactement ce que fait un Mark Gradiently tout seul. Sa zone la plus calme se place derrière les mots, les couleurs près des lettres s’approfondissent ou s’éclaircissent, et l’encre automatique choisit un texte clair ou foncé par ligne à partir de la palette du Mark : pas de cadres, d’ombres ni de halos à ajouter. Vous pouvez voir l’idée dans [l’encre automatique](https://gradiently.design/fr/guide/auto-ink-legibility). - Fond de nuit: #09071a - Décroissance indigo: #1e1b4b - Lumière violette: #6d28d9 - Cœur lilas: #c4b5fd - Accent chaud: #fde68a - Texte net: #f8fafc Une palette de glow en quatre couches : fond, décroissance, lumière et cœur, plus un accent chaud et une couleur de texte qui ne prend jamais le glow. ## Glow, néon et light leaks comparés Ces trois-là se confondent. Un glow est une lumière douce et large venue d’une source. [Les dégradés néon](https://gradiently.design/fr/guide/neon-gradients) sont des couleurs saturées et électriques avec un fin trait lumineux en leur cœur, plus proches de l’enseigne. [Les light leaks](https://gradiently.design/fr/guide/light-leaks) sont des traînées chaudes qui imitent la pellicule, entrant généralement par un bord. Tous trois ont besoin d’un fond sombre, et tous trois restent à l’écart du texte. Si vous voulez que la lumière dérive et change, les dégradés aurore en sont un cousin mobile. ## FAQ ### Comment faire un effet glow en CSS ? Utilisez une `box-shadow` sans décalage et à grand flou, comme `0 0 24px` dans une couleur semi-transparente, ou un dégradé radial qui s’estompe vers le transparent derrière l’élément. Pour le glow le plus doux, floutez une forme colorée avec `filter: blur()`. ### Faut-il mettre un glow autour du texte ? Non. Un halo adoucit les bords des lettres et réduit le contraste, si bien que les mots se lisent plus difficilement. Gardez le texte net et placez le glow derrière une forme ou dans le fond, à proximité. ### Quel fond fait ressortir un glow ? Un fond sombre ou atténué de la même famille de couleurs que le glow, comme un indigo profond derrière une lumière violette. Sur un fond blanc éclatant, un glow n’a nulle part où aller. ### Pourquoi mon dégradé lumineux forme-t-il des bandes ? Les longs fondus sombres offrent peu de paliers de couleur, si bien que les écrans montrent des bandes visibles. Ajoutez une couche de grain fin ou exportez en meilleure qualité pour les masquer. ### Quelle différence entre un glow et un effet néon ? Un glow est une lumière large et douce venue d’une source. Le néon est une couleur saturée avec un fin trait intensément lumineux en son centre, comme un tube d’enseigne.