CSS Snippet:
3D Antique Brass Text
This CSS snippet creates a 3D antique brass text effect using layered gradients and stacked shadows to simulate depth and a rich metallic finish.
The result is more dimensional and dramatic than a flat brass style, making it ideal for headings that need extra visual presence.
Difficulty:
Intermediate
Live preview
Antique Brass 3D
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 bold, decorative, and visually prominent while maintaining a classic, heritage tone.
It works particularly well for campaign headings, editorial layouts, and premium brand moments where a flatter text style would feel too subtle.
Where to apply it
Apply this class to heading text only.
Common examples include:
• Hero headings
• Campaign or feature titles
• Logo-style text
• Statement typography
This style works best on medium-to-large text where the depth and metallic effect can be clearly seen.
Notes & Setup
Select your heading text in Wix Studio.
Add the class: antique-brass-3d-text
Paste the CSS into your site's Custom CSS section.
Use the Wix Design panel to control typography. This snippet applies the 3D metallic brass effect only.
Customisation
Depth:
The 3D effect is created using stacked shadow layers. Reducing these layers will create a flatter, more subtle look.
Tone:
You can shift the brass tone lighter or darker depending on your design. Deeper tones create a more aged, heritage feel.
Stroke:
The thin outline helps define the edges and can be adjusted for sharper or softer text.
Tip:
This style works best on clean or dark backgrounds to maximise contrast and visibility.
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-3d-text,
.antique-brass-3d-text * {
background: linear-gradient(
160deg,
#f6f1e6 0%,
#e2d3b0 8%,
#bfa36a 24%,
#8c6f3f 46%,
#5e4726 62%,
#cbb27a 78%,
#f3ead4 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
letter-spacing: 0.02em;
-webkit-text-stroke: 0.5px rgba(90, 70, 40, 0.25);
text-shadow:
0 1px 0 #efe4c9,
0 2px 0 #cbb27a,
0 3px 0 #a38752,
0 4px 0 #7a6136,
0 5px 0 #5e4726,
2px 6px 10px rgba(60, 45, 20, 0.20),
4px 10px 20px rgba(60, 45, 20, 0.14);
}
