# Effet texte chrome : lettres et fonds métalliques

[Canonical HTML page](https://gradiently.design/fr/guide/chrome-effect)

Le chrome n’est pas gris. C’est un miroir du monde alentour, écrasé sur la surface d’une lettre. Une fois cela compris, un texte chrome convaincant tient en un dégradé et quelques minutes.

## The short version

- Un effet texte chrome imite le métal poli, qui reflète son environnement au lieu d’avoir une couleur propre.
- Les dégradés chrome convaincants montrent un ciel clair au-dessus d’une ligne d’horizon nette et un sol sombre en dessous, avec un reflet plus lumineux près du bas.
- En CSS, le texte chrome est un dégradé linéaire découpé aux lettres avec background-clip: text et un remplissage de texte transparent.
- Le chrome fonctionne mieux sur de grandes polices d’affichage grasses et larges, et mal sur du texte fin ou petit.
- Teinter la partie ciel du dégradé en bleu, rose ou violet fait passer le chrome de l’industriel au rétro ou au Y2K.

Un **effet texte chrome** fonctionne parce que le métal poli n’a presque aucune couleur propre : il reflète son environnement. Sur une lettre brillante, on voit un ciel pâle dans la moitié haute, un horizon sombre et net au milieu, et un sol qui s’éclaircit de nouveau vers le bord du bas. Mettez ces bandes dans un seul dégradé avec une cassure franche à l’horizon, découpez-le sur une police grasse, et vous avez du chrome. Un fondu gris lisse, ce que la plupart essaient d’abord, ressemble juste à du gris.

## Comment le chrome reflète la lumière

Imaginez un pare-chocs chromé dehors. La courbe haute reflète le ciel : elle est pâle et souvent un peu bleutée. Là où la surface se tourne vers le sol, le reflet bascule brusquement vers le paysage sombre : c’est la ligne d’horizon, et c’est le détail le plus important. En dessous, le reflet du sol s’éclaircit quand la courbe remonte, pour finir sur un reflet vif en bordure.

- **Bande de ciel :** pâle, froide, de plus en plus claire vers le haut.
- **Horizon :** un saut net du clair au sombre juste sous le milieu. Aucun fondu doux.
- **Bande de sol :** sombre à l’horizon, qui se réchauffe ou s’éclaircit vers le bas.
- **Reflet de bordure :** un fin trait lumineux près du bord du bas.
- **Contour :** un bord sombre autour de chaque lettre détache le métal du fond.

## Des dégradés chrome à copier

- Chrome classique: `linear-gradient(180deg, #ffffff 0%, #dfe6ee 22%, #a9b4c2 47%, #2a2e36 49%, #4a4f59 62%, #b9bec6 86%, #f4f6f8 92%, #7d838d 100%)`
- Chrome ciel: `linear-gradient(180deg, #f2f8ff 0%, #b8d4f2 25%, #6d93c4 48%, #1d2533 50%, #3b3a45 64%, #c9b8a8 88%, #fff4e6 94%, #8a7f78 100%)`
- Chrome liquide Y2K: `linear-gradient(180deg, #fdf2ff 0%, #e4c6f5 22%, #9fb7f0 48%, #2b2142 49%, #4c3a6b 62%, #f0a8d0 86%, #fff0f8 92%, #8a6f9a 100%)`
- Chrome sombre: `linear-gradient(180deg, #9aa3ad 0%, #5d6670 49%, #0d0f12 50%, #1c2026 70%, #6e7782 92%, #2a2f36 100%)`
- Fond en disque chrome: `conic-gradient(from 20deg at 50% 50%, #e6e9ed, #6b7280, #f8fafc, #4b5563, #e5e7eb, #8b939e, #f1f3f5, #5b636e, #e6e9ed)`

Quatre dégradés de texte et un fond. Remarquez le quasi-saut de chaque dégradé de texte autour de 48 à 50 % : cet horizon net est ce qui se lit comme du métal.

Les versions teintées sont celles où le chrome devient intéressant. Un ciel bleu donne l’allure du badge de voiture classique ; les roses et les violets le poussent vers le Y2K, qui s’appuyait beaucoup sur le chrome liquide. [L’esthétique Y2K](https://gradiently.design/fr/guide/y2k-aesthetic) présente cette époque, et [le dégradé argent](https://gradiently.design/fr/guide/silver-gradient) propose des métaux plus doux et satinés quand le chrome miroir est trop.

## Texte chrome en CSS

La technique est le texte en dégradé : peignez un dégradé en fond de l’élément, découpez-le aux formes des lettres et rendez le remplissage du texte transparent. Une ombre franche décalée, appliquée avec `filter` plutôt que `text-shadow` pour qu’elle se place derrière le dégradé découpé, donne du poids aux lettres. [Le texte en dégradé](https://gradiently.design/fr/guide/css-gradient-text) détaille la méthode et sa prise en charge par les navigateurs.

```css
.chrome {
  font-family: "Rubik Mono One", system-ui, sans-serif;
  font-size: clamp(3rem, 12vw, 9rem);
  line-height: 1;
  color: #a9b4c2; /* fallback where clipping is unsupported */
  background: linear-gradient(
    180deg,
    #ffffff 0%, #dfe6ee 22%, #a9b4c2 47%,
    #2a2e36 49%, #4a4f59 62%,
    #b9bec6 86%, #f4f6f8 92%, #7d838d 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #1b1e24;
  filter: drop-shadow(0 4px 0 #1b1e24);
}
```

Texte chrome classique. Le dégradé couvre la boîte de la ligne : gardez `line-height` à 1, sinon l’horizon s’éloigne du milieu des lettres.

## Texte chrome dans une appli de design

1. **Composez d’abord le mot** Tapez un mot court dans une police d’affichage grasse, en grande taille. Ne le convertissez en contours que si votre appli ne sait pas remplir un texte vivant avec un dégradé.
2. **Appliquez un remplissage en dégradé vertical** Utilisez les arrêts de Chrome classique ci-dessus. Vérifiez que le dégradé va du haut des lettres au bas, et non sur tout le canevas.
3. **Affûtez l’horizon** Faites glisser les arrêts clair et sombre du milieu presque l’un sur l’autre. S’il paraît encore doux, rapprochez-les davantage.
4. **Ajoutez le bord et le poids** Un trait sombre d’un ou deux pixels, puis une ombre franche décalée droit vers le bas. Évitez les ombres floues et les lueurs externes.

## Les polices qui conviennent au chrome

Le chrome a besoin de surface. Les traits fins n’ont pas de place pour le ciel, l’horizon et le sol, et l’effet s’effondre en un trait gris. Choisissez des polices grasses, larges, idéalement arrondies ou adaptées au biseau, et composez-les en grand.

| Police | Caractère | Idéale pour |
| --- | --- | --- |
| Rubik Mono One | Grasse, large, angles arrondis | Logos, mots isolés |
| Bungee | Enseigne, bloc, droite | Affiches, titres d’événements |
| Michroma | Large, technique, futuriste | Tech et sport mécanique |
| Monoton | Style néon filaire, rétro | Looks années 80 et disco |

Quatre polices d’affichage gratuites de Google Fonts qui tiennent bien un dégradé chrome. Ce sont toutes des polices d’affichage : ne les employez jamais pour du texte courant.

Pour plus d’options, [les polices d’affichage](https://gradiently.design/fr/guide/display-fonts) classe des polices grasses par ambiance, et [l’effet texte rétro](https://gradiently.design/fr/guide/retro-text-effect) associe le chrome aux contours et à l’extrusion pour un traitement années 80 complet.

## Réussir son chrome

### Fait faux

- Un fondu lisse du gris clair au gris foncé
- Un horizon placé tout en haut ou tout en bas
- Du chrome sur du texte fin ou petit
- Aucun contour, si bien que les lettres se fondent dans le fond
- Des halos de lueur doux autour des lettres

### Fait métal

- Un saut net d’horizon juste sous le milieu
- Un ciel clair au-dessus, un sol sombre en dessous
- Une police d’affichage grasse à taille de titre
- Un fin contour sombre et une ombre franche décalée
- Un fond sombre uni ou en dégradé avec de la place autour du mot

Employez le chrome pour un mot ou un titre court, jamais pour un paragraphe. C’est un traitement de titre pour pochettes d’albums, affiches d’événements, merchandising, chaînes de jeu et campagnes nostalgiques. Sur un fond chargé, il disparaît : offrez-lui une surface calme et plus sombre.

Une pochette d’album carrée avec le seul mot TURBO en lettres capitales grasses sur une surface sombre

Un mot gras sur une surface sombre : le cadre dont le texte chrome a besoin pour se lire comme du métal.

Une story verticale de soirée club intitulée Night Drive avec une courte ligne de détail simple en dessous

Une story verticale où un titre court porte l’éclat et où le détail reste simple et lisible.

Dans Gradiently, des traitements de lettrage comme Extrusion, Inline et Contour donnent au titre de la profondeur, un trait gravé ou un contour sur un Mark vivant, ce qui va bien aux looks métalliques, et le Mark garde sa zone la plus calme derrière les mots pour qu’un titre brillant ne lutte jamais contre un fond chargé. Pour un éclat irisé plutôt qu’un métal miroir, voyez [le dégradé holographique](https://gradiently.design/fr/guide/holographic-gradients).

## FAQ

### Comment faire un effet texte chrome ?

Utilisez un dégradé vertical avec une bande de ciel pâle, un horizon sombre et net juste sous le milieu et une bande de sol plus claire, puis découpez-le sur une police grasse et ajoutez un fin contour sombre.

### Comment faire du texte chrome en CSS ?

Définissez un dégradé linéaire chrome comme fond, puis utilisez `background-clip: text` avec `-webkit-text-fill-color: transparent`. Ajoutez `filter: drop-shadow()` pour une ombre franche décalée.

### Quelles couleurs composent un dégradé chrome ?

Un quasi-blanc, un gris bleuté pâle, un charbon très sombre à l’horizon, un gris moyen et un reflet vif près du bas. Teintez le ciel en bleu, rose ou violet pour les versions rétro.

### Quelles polices conviennent le mieux au texte chrome ?

Des polices d’affichage grasses et larges comme Rubik Mono One, Bungee ou Michroma, en grand. Les polices fines n’ont pas la place de laisser voir le reflet.

### Quelle différence entre le chrome et l’argent ?

Le chrome est un miroir, avec un reflet d’horizon net et un fort contraste. L’argent en design est généralement plus doux et satiné, avec des transitions plus tendres.