How to Create a Brushed Gold Text Effect with CSS

Gold text can add a premium feel to a website without relying on image files. This technique uses layered CSS gradients to create a smooth brushed-metal appearance that scales cleanly at any size.

The effect works particularly well on black or very dark backgrounds, where the warm gold tones have enough contrast to stand out.

What creates the effect?

The brushed gold finish is made from three layers:

• A wide gold gradient that moves across the full width of the text.
• Soft changes in brightness, helping the colour feel less flat.
• Fine horizontal lines that suggest the surface of brushed metal.

Each layer is stretched once across the area where the class is applied. Nothing tiles or repeats across the text.

1. Add the brushed gold CSS

Add the following to your theme stylesheet or the Additional CSS area in WordPress.

.brushed-gold {
  display: inline-block;
  color: transparent;

  background-image:
    /* Fine, irregular horizontal brush marks */
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(255, 244, 185, 0.18) 1.2%,
      transparent 2.1%,
      transparent 6.4%,
      rgba(107, 69, 15, 0.10) 7.1%,
      transparent 8.5%,
      transparent 13.8%,
      rgba(255, 239, 166, 0.14) 14.5%,
      transparent 16.1%,
      transparent 23.6%,
      rgba(117, 75, 16, 0.08) 24.3%,
      transparent 26.2%,
      transparent 34.8%,
      rgba(255, 246, 194, 0.16) 35.5%,
      transparent 37.3%,
      transparent 46.1%,
      rgba(113, 72, 15, 0.10) 47%,
      transparent 49.2%,
      transparent 57.7%,
      rgba(255, 239, 166, 0.13) 58.5%,
      transparent 60.4%,
      transparent 69.8%,
      rgba(106, 67, 13, 0.09) 70.7%,
      transparent 72.4%,
      transparent 81.2%,
      rgba(255, 244, 185, 0.15) 82%,
      transparent 84.1%,
      transparent 92.8%,
      rgba(109, 68, 13, 0.10) 93.6%,
      transparent 95.2%,
      transparent 100%
    ),

    /* Gentle variation through the gold */
    linear-gradient(
      180deg,
      rgba(255, 235, 157, 0.10) 0%,
      rgba(126, 78, 14, 0.06) 18%,
      rgba(255, 242, 181, 0.12) 43%,
      rgba(120, 74, 12, 0.08) 68%,
      rgba(255, 225, 132, 0.08) 100%
    ),

    /* Main gold colour */
    linear-gradient(
      90deg,
      #b28530 0%,
      #dcb251 9%,
      #f0cd70 15%,
      #fde28a 21%,
      #f4ce6d 31%,
      #e4b859 43%,
      #d2a44a 55%,
      #c4963e 67%,
      #b98a34 80%,
      #ad7d2b 91%,
      #a67527 100%
    );

  /* Stretch the effect once across its applied area */
  background-size: 100% 100%;
  background-position: left top;
  background-repeat: no-repeat;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

2. Apply the class to your heading or text

Add the brushed-gold class to any heading, paragraph or inline element.

<h2 class="brushed-gold">O'BRIEN MEDIA</h2>

Example: gold heading on a black background

<div class="gold-background">
  <h2 class="brushed-gold">O'BRIEN MEDIA</h2>
</div>

.gold-background {
  background: #050505;
  padding: 48px 28px;
  text-align: center;
}

.gold-background h2 {
  font-family: Arial, sans-serif;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
  margin: 0;
}

Example: a smaller gold accent

<p class="brushed-gold gold-label">HANDMADE WITH CARE</p>

.gold-label {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

Making the effect span a full-width area

By default, the gradient follows the width of the text itself. If you want it stretched across the full width of a containing section, make the element a block and give it a width of 100%.

.brushed-gold--full-width {
  display: block;
  width: 100%;
}

<h2 class="brushed-gold brushed-gold--full-width">
  A full-width gold effect
</h2>

Choosing the right font

This style is at its best with a bold, clean sans-serif font. Strong letter shapes give the texture room to show through, while small or lightweight text can make the effect difficult to notice.

Good options include Montserrat, Poppins, Roboto, Open Sans, Arial and other bold geometric sans-serif fonts. Keep the background dark and the surrounding design simple so the gold remains the focal point.

A quick accessibility note

Brushed gold text is best used for headings, labels and decorative emphasis rather than long paragraphs. Check that the result remains easy to read against its background, especially on smaller screens.

For important body text, use a solid colour with strong contrast instead.