20 CSS Gradient Text Designs 08 / 20

CSS Metallic Chrome Gold Copper Gradient Text

Vertical multi-stop linear gradients mimic the specular highlights of chrome, gold, and copper metal surfaces clipped to display text.

Pure CSS MIT licensed

Live Demo Open in tab

Open in playground

The code

<div class="gt-08">
  <span class="gt-08__label">Metallic gradient text</span>
  <div class="gt-08__chrome">CHROME</div>
  <div class="gt-08__divider"></div>
  <div class="gt-08__gold">GOLD</div>
  <div class="gt-08__divider"></div>
  <div class="gt-08__copper">COPPER</div>
</div>

<div class="gt-08">
  <span class="gt-08__label">Metallic gradient text</span>
  <div class="gt-08__chrome">CHROME</div>
  <div class="gt-08__divider"></div>
  <div class="gt-08__gold">GOLD</div>
  <div class="gt-08__divider"></div>
  <div class="gt-08__copper">COPPER</div>
</div>

.gt-08, .gt-08 *, .gt-08 *::before, .gt-08 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-08 {
  --bg: #0c0c0c;
  font-family: 'Bebas Neue', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 2rem;
}
.gt-08__label {
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #333;
  font-family: monospace;
}
.gt-08__chrome {
  font-size: clamp(4rem, 15vw, 10rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .08em;
  background: linear-gradient(180deg,
    #ffffff 0%,
    #e8e8e8 15%,
    #a0a0a0 30%,
    #ffffff 45%,
    #707070 55%,
    #c8c8c8 70%,
    #404040 85%,
    #b0b0b0 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-08-shimmer 3s ease-in-out infinite;
}
.gt-08__gold {
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .1em;
  background: linear-gradient(180deg,
    #fff4d0 0%,
    #f5c842 15%,
    #c8962a 30%,
    #ffe680 50%,
    #b07c20 65%,
    #e6b830 80%,
    #7a5010 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-08-shimmer 4s ease-in-out infinite reverse;
}
.gt-08__copper {
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .12em;
  background: linear-gradient(180deg,
    #ffcba4 0%,
    #cd7a3a 20%,
    #a0522d 40%,
    #e8955a 55%,
    #7a3a18 70%,
    #d4814a 85%,
    #8b4513 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-08-shimmer 5s ease-in-out infinite;
}
.gt-08__divider {
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffffff30, transparent);
}
@keyframes gt-08-shimmer {
  0%, 100% { background-position: center 0%; }
  50%       { background-position: center 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-08__chrome, .gt-08__gold, .gt-08__copper { animation: none; }
}

.gt-08, .gt-08 *, .gt-08 *::before, .gt-08 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-08 {
  --bg: #0c0c0c;
  font-family: 'Bebas Neue', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 2rem;
}
.gt-08__label {
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #333;
  font-family: monospace;
}
.gt-08__chrome {
  font-size: clamp(4rem, 15vw, 10rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .08em;
  background: linear-gradient(180deg,
    #ffffff 0%,
    #e8e8e8 15%,
    #a0a0a0 30%,
    #ffffff 45%,
    #707070 55%,
    #c8c8c8 70%,
    #404040 85%,
    #b0b0b0 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-08-shimmer 3s ease-in-out infinite;
}
.gt-08__gold {
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .1em;
  background: linear-gradient(180deg,
    #fff4d0 0%,
    #f5c842 15%,
    #c8962a 30%,
    #ffe680 50%,
    #b07c20 65%,
    #e6b830 80%,
    #7a5010 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-08-shimmer 4s ease-in-out infinite reverse;
}
.gt-08__copper {
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .12em;
  background: linear-gradient(180deg,
    #ffcba4 0%,
    #cd7a3a 20%,
    #a0522d 40%,
    #e8955a 55%,
    #7a3a18 70%,
    #d4814a 85%,
    #8b4513 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-08-shimmer 5s ease-in-out infinite;
}
.gt-08__divider {
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffffff30, transparent);
}
@keyframes gt-08-shimmer {
  0%, 100% { background-position: center 0%; }
  50%       { background-position: center 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-08__chrome, .gt-08__gold, .gt-08__copper { animation: none; }
}

How this works

Metallic sheen requires at least five gradient stops: a bright near-white highlight at the top, a mid-dark band, a second highlight, a deep shadow, and a final mid-light. This two-highlight, two-shadow pattern replicates the way cylindrical metal reflects a light source above and a secondary bounce from below. The stops are defined in linear-gradient(180deg, ...) — vertical — because horizontal metal type looks flat.

The gt-08-shimmer keyframe oscillates background-position between 0% and 100% vertically on a background-size: 100% 300% canvas, sliding the highlight band up and down to simulate light movement. Each metal (chrome, gold, copper) uses a distinct warmth in its stop colours — grey-blue for chrome, amber-yellow for gold, red-brown for copper.

Customize

Add a rose-gold variant by blending the copper browns with pink highlights: replace #cd7a3a with #d4a0b0 and the bright stop with #ffc8d8.
Increase the shimmer travel by setting background-size: 100% 500% — the highlight will sweep a longer distance on each cycle.
Pair with letter-spacing: .15em and the Bebas Neue font for the classic chrome badge typographic look used in automotive logos.

Watch out for

Vertical gradients on background-clip:text look best with tall, condensed typefaces; wide proportioned letters lose the cylindrical sheen effect.
The shimmer relies on a background-size taller than the element — if the font renders at an unexpected line-height the highlight may not be visible at the keyframe start position.
Do not use mix-blend-mode on a metallic gradient text element against a dark background — the luminosity blend flattens the highlight contrast that creates the metallic illusion.

Browser support

Chrome	Safari	Firefox	Edge
57+	10.1+	49+	57+

Fully supported in all modern browsers; Internet Explorer has no background-clip:text support.

More from 20 CSS Gradient Text Designs

CSS Hover Reveal Gradient Text Effect CSS Toggle Switch Gradient Text Colour Picker CSS Glitter Sparkle Gradient Text Effect CSS Crystalline Prism Gradient Text CSS Scroll Gradient Text Reveal on Scroll CSS Click Ripple Gradient Text Interaction CSS Cursor-Tracked Radial Gradient Text CSS Typewriter Loop Gradient Text Animation CSS Animated Gradient Text Flow CSS Aurora Borealis Gradient Text Sweep CSS Conic Gradient Text Hue Spin CSS Rainbow Wave Per-Letter Gradient Text

View the full collection →