20 CSS Text Gradient Effects 10 / 20

Metallic Gold Text Gradient Effect CSS

A luxury membership card with a multi-stop metallic gold gradient simulating light reflection, animated via background-position shift.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="tg-10">
  <div class="tg-10__card">
    <div class="tg-10__crown">✦</div>
    <p class="tg-10__tier">PREMIER MEMBERSHIP</p>
    <h2 class="tg-10__name"><span class="tg-10__gold">Aurum</span></h2>
    <p class="tg-10__tagline">Excellence, redefined.</p>
    <ul class="tg-10__perks">
      <li><span class="tg-10__check">✦</span> Priority concierge access</li>
      <li><span class="tg-10__check">✦</span> Curated portfolio management</li>
      <li><span class="tg-10__check">✦</span> Exclusive event invitations</li>
    </ul>
    <div class="tg-10__divider"></div>
    <div class="tg-10__price"><span class="tg-10__amount tg-10__gold">$2,500</span><span class="tg-10__cycle">/year</span></div>
    <button class="tg-10__cta">Request access</button>
  </div>
</div>
.tg-10, .tg-10 *, .tg-10 *::before, .tg-10 *::after { margin:0; padding:0; box-sizing:border-box; }
.tg-10 ::selection { background:#b45309; color:#fef3c7; }

.tg-10 {
  /* Multi-stop metallic gold: dark → mid-gold → highlight → dark → shimmer */
  --gold-grad: linear-gradient(
    135deg,
    #92400e 0%,
    #b45309 15%,
    #d97706 30%,
    #fbbf24 45%,
    #fef3c7 55%,
    #fbbf24 65%,
    #d97706 80%,
    #92400e 100%
  );
  --bg: #080604;
  --surface: #0e0b07;
  --border: rgba(251,191,36,.18);
  --text: #fef9ee;
  --muted: #92816a;
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.tg-10__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 44px 36px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 60px rgba(251,191,36,.06);
}

.tg-10__crown {
  font-size: 1.6rem;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(251,191,36,.35));
  margin-bottom: 12px;
}

.tg-10__tier {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--muted);
  margin-bottom: 16px;
}

/* The metallic effect uses many gradient stops to simulate light reflection */
.tg-10__gold {
  background: var(--gold-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: tg-10-shimmer 4s ease-in-out infinite;
}

@keyframes tg-10-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

.tg-10__name {
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.tg-10__tagline {
  font-style: italic;
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 28px;
}

.tg-10__perks {
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  font-family: system-ui, sans-serif;
}
.tg-10__perks li { font-size: .875rem; color: var(--text); display: flex; align-items: center; gap: 10px; }
.tg-10__check {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: .7rem;
}

.tg-10__divider { height: 1px; background: var(--border); margin-bottom: 20px; }
.tg-10__price { display: flex; align-items: baseline; gap: 4px; justify-content: center; margin-bottom: 22px; }
.tg-10__amount { font-size: 2rem; font-weight: 700; font-family: system-ui, sans-serif; }
.tg-10__cycle { font-size: .85rem; color: var(--muted); font-family: system-ui, sans-serif; }

.tg-10__cta {
  width: 100%;
  padding: 13px;
  border-radius: 8px;
  border: 1px solid rgba(251,191,36,.4);
  background: transparent;
  font-family: system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 600;
  color: #fbbf24;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.tg-10__cta:hover { background: rgba(251,191,36,.1); }

@media (prefers-reduced-motion: reduce) {
  .tg-10__gold { animation: none; background-position: 0% 50%; }
}

How this works

The metallic illusion is created by a linear-gradient with eight colour stops cycling through dark bronze → mid gold → bright highlight → back to dark. At 135deg the gradient mimics angled light reflecting off a polished surface. The background-size: 200% 100% extension combined with an animated background-position shifts the highlight across the text, simulating surface sheen.

The shimmer animation oscillates between 0% 50% and 100% 50% using ease-in-out timing, which produces a natural acceleration/deceleration matching how light glances off physical metal. All eight colour stops in the gradient are amber/gold family hues so the overall impression is monochromatic metallic rather than rainbow.

Customize

  • Refine the metallic sheen by adding more intermediate stops — insert a near-white #fff9e6 around the 50% mark and a pure dark #78350f at 0% for deeper contrast.
  • Change shimmer speed from 4s to 2s for a faster glint, or 8s for a slow, regal sweep that suits luxury branding where restraint is valued.
  • Apply the --gold-grad variable to any additional text elements like the price amount or perk checkmarks by reusing the same class .tg-10__gold.
  • Swap the card background from near-black to deep navy #08101a to shift the context from gold-on-black to a gold-on-navy look common in financial branding.
  • Replace the crown ✦ character with a Unicode icon or SVG icon using background: var(--gold-grad); -webkit-background-clip: text applied to any inline SVG with fill: transparent.

Watch out for

  • The eight-stop metallic gradient is significantly more expensive to rasterise than a two-stop gradient. Avoid applying it to body text or any element that updates at high frequency — reserve it for static display headings or pricing callouts.
  • In Safari, animated background-position on a background-clip: text element can cause rendering artefacts when the element overlaps a CSS transform on a parent. Keep the gradient text element's ancestor chain free of transforms where possible.
  • The gradient stops use hex colours rather than HSL — if you need to modify the metallic palette systematically, convert to HSL first to make lightness adjustments predictable: the key to metallic gradients is the lightness range, not the hue.

Browser support

ChromeSafariFirefoxEdge
69+ 12.1+ 83+ 69+

animated background-position with metallic multi-stop gradients is performant in modern engines; avoid on low-end mobile devices where GPU memory is constrained.

More from 20 CSS Text Gradient Effects

Animated Moving Text Gradient Background CSSCyberpunk Neon Text Gradient CSSGlassmorphism Text Gradient ContrastPastel Soft Color Text Gradient CSSVertical Linear Gradient Text CSSRadial Gradient Text Effect CSSMulti Color Rainbow Text Gradient CSSCSS Text Gradient with Text Stroke OutlineCSS Text Gradient Fallback for Older BrowsersTailwind CSS Text Gradient Utility ClassesCSS Text Gradient on Multiline ParagraphCSS Text Gradient on Active Navigation Link
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →