L’essentiel en bref
- Un dégradé argent se lit comme du métal plutôt que du gris quand il combine une légère teinte froide, une large plage du sombre au clair et un étroit reflet lumineux.
- L’argent poli a des transitions nettes et un fort contraste, l’argent satiné des transitions douces, et l’argent brossé ajoute de fines lignes parallèles.
- Les gris parfaitement neutres paraissent plats et poussiéreux : la plupart des argents convaincants tirent très légèrement vers le bleu ou, pour le platine et l’étain, très légèrement vers le chaud.
- Les longs dégradés gris subtils sont particulièrement sujets au banding, qu’une couche de grain fin masque.
- Les dégradés argent fonctionnent mieux sur le texte, les bordures, les boutons et les petites formes, sur fond sombre.
Sur cette page
Un dégradé argent ressemble à du métal quand il a trois choses que le gris simple n’a pas : une faible teinte froide, un grand écart entre ses arrêts les plus sombre et le plus clair, et un reflet étroit plutôt qu’étalé. Un code fiable pour commencer : linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c). Voici six argents à copier, les règles d’éclairage qui les sous-tendent, et du CSS pour du texte argent, des boutons et du métal brossé.
Codes de dégradé argent
Comment éclairer un dégradé argent
L’argent, comme tout métal poli, montre surtout de la lumière réfléchie. Votre dégradé est un reflet peint : pensez à l’origine de la lumière et à la netteté avec laquelle la surface l’accroche.
- 1
Teintez légèrement les gris vers le froid
Ajoutez une pointe de bleu à chaque arrêt, juste assez pour que le gris ne ressemble plus à de la poussière ou du ciment.
- 2
Allez plus sombre que ce qui semble juste
Le métal a besoin d’une ombre profonde. Votre arrêt le plus sombre doit être un gris canon, pas un gris moyen.
- 3
Gardez le reflet étroit
Une bande presque blanche sur une petite tranche du dégradé se lit comme de l’éclat. Une large zone claire se lit comme une surface grise pâle.
- 4
Décidez : poli ou satiné
Rapprochez les arrêts pour un argent poli aux reflets nets ; écartez-les pour une finition douce et satinée.
Poussez le contraste à fond, avec une ligne d’horizon nette au milieu, et l’argent devient du chrome miroir ; l’effet texte chrome couvre cette version. Pour un métal chaud avec la même logique, voyez le dégradé or.
Argent ou simple gris
Se lit comme du gris
- Des gris parfaitement neutres
- Deux arrêts, du gris clair au gris moyen
- Seulement des transitions égales et douces
- Une large zone pâle sans reflet net
- De grandes zones plates d’argent sur une page blanche
Se lit comme de l’argent
- Des gris à la faible teinte froide ou chaude
- Cinq ou six arrêts, du gris canon au presque blanc
- Un reflet plus net quelque part
- Un reflet étroit et lumineux, décentré
- Des détails d’argent sur fond sombre
Si vous voulez en réalité une surface neutre et calme plutôt que du métal, c’est un autre travail : le dégradé gris et le dégradé monochrome traitent les gris tonals et doux pour les arrière-plans.
Quelle finition d’argent choisir
Chaque finition dit quelque chose de légèrement différent : choisissez-la pour l’usage plutôt que par habitude. Une marque peut très bien en employer deux, par exemple l’argent poli pour un logo et l’argent brossé pour des panneaux d’emballage, tant que la teinte reste la même.
À employer pour
À employer pour
À employer pour
À employer pour
À employer pour
Texte et boutons argent en CSS
.silver-text {
font-weight: 800;
font-size: clamp(2.5rem, 8vw, 6rem);
color: #a7afb9; /* fallback */
background: linear-gradient(
135deg,
#5f6670 0%, #c9cfd6 28%, #f7f9fb 44%,
#a7afb9 58%, #4b525c 82%, #9aa2ac 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.silver-button {
padding: 0.85rem 1.6rem;
border: 1px solid #4b525c;
border-radius: 999px;
color: #1c2026;
font-weight: 600;
background: linear-gradient(180deg, #f7f9fb 0%, #c9cfd6 48%, #a7afb9 52%, #d9dee3 100%);
box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgb(0 0 0 / 0.25);
cursor: pointer;
}
.silver-button:hover {
background: linear-gradient(180deg, #ffffff 0%, #d6dbe0 48%, #b3bac3 52%, #e3e7eb 100%);
}
.brushed {
background:
repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px);
}Le bouton utilise un palier au milieu, de 48 % à 52 %, qui se lit comme un horizon reflété dans une surface courbe. Le bouton en dégradé CSS propose d’autres modèles de boutons, et le texte en dégradé explique le découpage du texte et sa prise en charge par les navigateurs.
Créer avec l’argent
L’argent évoque le moderne, le froid et le précis, là où l’or évoque le chaud et la tradition. Il convient aux lancements technologiques, aux montres et à la bijouterie, aux anniversaires (l’argent est la noce du 25e), aux campagnes d’hiver et à tout ce qui a un côté futuriste. Comme l’or, il paraît le plus précieux à petite dose sur fond sombre : un monogramme, un filet fin, un seul titre.
Une invitation d’anniversaire où une lumière froide et métallique porte le thème et où les mots restent calmes.
Une publication produit pour une montre : une surface sombre et froide avec l’argent comme lumière, pas comme aplat gris.
L’argent s’associe aussi bien aux bleus glacés et au bleu marine profond pour une palette d’hiver, et au noir et blanc pour un look sobre et éditorial. Les palettes de couleurs de luxe réunit plusieurs combinaisons bâties autour de métaux froids. Dans le Studio de Gradiently, un Mark métallique froid se rend en direct derrière vos mots à chaque taille, et l’encre automatique choisit un texte clair ou foncé pour chaque ligne à partir de la palette du Mark, pour que les surfaces argentées restent lisibles sans que vous vérifiiez chaque format.
Les questions qu’on nous pose
Quel est un bon code de dégradé argent ?
Essayez linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c). Il va du gris canon à un reflet presque blanc en passant par l’argent clair, puis revient.
Quels codes hex donnent un argent métallique ?
Une combinaison comme #4b525c, #5f6670, #a7afb9, #c9cfd6 et #f7f9fb. Chacun tire très légèrement vers le bleu, ce qui évite l’aspect de simple gris.
Comment faire un effet métal brossé en CSS ?
Utilisez un dégradé linéaire répété avec de minuscules arrêts espacés d’un ou deux pixels dans des gris proches, comme repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px).
Pourquoi mon dégradé argent paraît-il gris ?
Il manque probablement de contraste et d’un reflet. Ajoutez un arrêt gris canon plus sombre, une bande étroite presque blanche et une faible teinte froide à chaque arrêt.
Quelle différence entre les dégradés argent et platine ?
En design, le platine est généralement un argent légèrement plus froid et plus brillant, au reflet plus blanc, tandis que l’étain est un gris argent plus sombre et plus chaud.
Quelle couleur de fond met le mieux l’argent en valeur ?
Les fonds sombres comme le noir, le charbon, le bleu marine profond ou le bleu nuit. L’argent sur blanc ou gris pâle perd son reflet et paraît plat et délavé.
É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