L’essentiel en bref
- 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.
Sur cette page
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
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 présente cette époque, et le dégradé argent 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é détaille la méthode et sa prise en charge par les navigateurs.
.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);
}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.
Caractère
Idéale pour
Idéale pour
Idéale pour
Idéale pour
Pour plus d’options, les polices d’affichage classe des polices grasses par ambiance, et l’effet texte rétro 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.
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 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.
Les questions qu’on nous pose
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.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil