CSS Snippet:

Antique Brass Text

This CSS snippet creates a rich antique brass text effect using layered gradients and soft shadows to produce a warm, heritage-style metallic finish.

The result feels refined, editorial, and slightly moody, making it ideal for designs that lean into classic luxury rather than modern shine.

Difficulty:

Intermediate

Promotion

Need help with your Wix website?

Fix a problem, rebuild your site, or get your SEO set up properly.

Expert Wix support, exactly when you need it.

Find out more

Start Now

Live preview

Antique Brass

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Use case

Use this text style when you want a heading to feel elegant, timeless, and more understated than traditional gold.

It works especially well for interior-inspired designs, editorial layouts, premium service brands, and any design where a softer, aged metallic finish fits the aesthetic.

Where to apply it

Apply this class to heading text only.

Common examples include:

• Hero headings

• Section titles

• Editorial or brand-style text

• Premium feature headings

This effect works best on larger text where the depth and tonal variation can be clearly seen.

Notes & Setup

Select your heading text in Wix Studio.
Add the class: antique-brass-text
Paste the CSS into your site's Custom CSS section.

Use the Wix Design panel to control the font family, size, weight, and alignment. This snippet only applies the metallic antique brass effect.

Customisation

Tone:

Antique brass sits between gold and bronze, with deeper and more muted tones. You can adjust the gradient to create a lighter brass or a darker, more aged finish.

Highlights:

The lighter stops create the reflective effect. Reducing their brightness will give a more subtle, aged appearance.

Best Use:

This style works best on clean or darker backgrounds where the warmer tones can stand out.

Tip:

Use this for headings and key text elements rather than body text to maintain clarity and impact.

Licensing

This CSS snippet is free to use in personal and commercial Wix Studio projects. You’re welcome to copy, adapt, and use it on client or business websites.

Credit is not required, but if you found it useful, we’d really appreciate a small link back to Wix Doctor, ideally on your site’s footer, about page, credits page or wherever feels appropriate.

Linking back helps more Wix users discover the library and supports the continued creation of free snippets, tutorials, and community resources.

CSS Code

css

.antique-brass-text,
.antique-brass-text * {
display: inline-block;

background: linear-gradient(
145deg,
#8c6f3f 0%,
#cbb27a 10%,
#5e4726 22%,
#f0e6cc 24%,
#5e4726 28%,
#cbb27a 48%,
#f0e6cc 50%,
#cbb27a 52%,
#8c6f3f 82%,
#f0e6cc 84%,
#5e4726 86%,
#5e4726 100%
);

-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0 transparent;

text-shadow:
0 1px 0 rgba(255,255,240,0.3),
0 3px 8px rgba(90, 70, 40, 0.12),
0 8px 18px rgba(40, 30, 10, 0.08);
}