CSS Snippet:
3D Gold Text
This CSS snippet creates a 3D gold text effect using layered gradients and stacked shadows to simulate depth, highlights, and metallic finish.
The result is bold, polished, and more dimensional than a flat metallic text style, making it ideal for headings that need extra visual impact.
Difficulty:
Intermediate
Live preview
Gold 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 more dramatic, decorative, and visually prominent.
It works particularly well for luxury-inspired designs, campaign headings, statement branding, and premium content blocks where a flatter text effect would feel too subtle.
Where to apply it
Apply this class to heading text only.
Common examples include:
• Hero headings
• Campaign or launch titles
• Logo-style text
• Premium feature headings
This style works best on medium-to-large headings where the depth and metallic finish can be clearly seen.
Notes & Setup
Select your heading text in Wix Studio.
Add the class: gold-3d-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 applies the 3D metallic gold effect only.
Customisation
Colour Tones:
You can adjust the gold shades in the gradient to create lighter champagne gold or deeper antique gold finishes.
Depth:
The 3D effect is created using stacked text-shadow values. Adding more layers increases the depth, while reducing them creates a flatter look.
Stroke:
The thin outline helps define the edges:
-webkit-text-stroke: 0.5px rgba(140, 110, 30, 0.22);
You can soften or strengthen this depending on how sharp you want the lettering to appear.
Tip:
This style works best on clean backgrounds so the highlights, shadows, and depth remain clearly visible.
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
.gold-3d-text,
.gold-3d-text * {
background: linear-gradient(
160deg,
#ffffff 0%,
#fff7d6 8%,
#f5d27a 24%,
#d4a437 46%,
#a67c1c 62%,
#f2cf66 78%,
#fff6d1 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(140, 110, 30, 0.22);
text-shadow:
0 1px 0 #fff3c4,
0 2px 0 #f2cf66,
0 3px 0 #d4a437,
0 4px 0 #a67c1c,
0 5px 0 #7a5a12,
2px 6px 10px rgba(80, 60, 10, 0.20),
4px 10px 20px rgba(80, 60, 10, 0.14);
}
