CSS Snippet:
3D Silver Text
This CSS snippet creates a 3D silver text effect using layered gradients and stacked shadows to simulate depth, highlights, and a metallic finish.
The result is clean, dimensional, and more striking than a flat metallic style, making it ideal for headings that need extra visual impact.
Difficulty:
Intermediate
Live preview
Silver 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 bold, structured, and visually prominent.
It works particularly well for modern designs, tech-inspired layouts, campaign headings, and statement typography where a flat style 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
• Feature section 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: silver-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 silver effect only.
Customisation
Colour Tones:
You can adjust the grey shades in the gradient to create brighter chrome-like silver or deeper industrial tones.
Depth:
The 3D effect is created using stacked text-shadow values. Reducing these layers will create a flatter, more subtle look.
Stroke:
The thin outline helps define the edges:
-webkit-text-stroke: 0.5px rgba(120, 130, 140, 0.25);
Adjust this to make the text sharper or softer.
Tip:
This style works best on clean backgrounds so the highlights 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
.silver-3d-text,
.silver-3d-text * {
background: linear-gradient(
160deg,
#ffffff 0%,
#f4f6f8 8%,
#d6dbe0 24%,
#aeb6bf 46%,
#7d8791 62%,
#cfd5db 78%,
#f9fbfc 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(120, 130, 140, 0.25);
text-shadow:
0 1px 0 #eef1f4,
0 2px 0 #d6dbe0,
0 3px 0 #aeb6bf,
0 4px 0 #7d8791,
0 5px 0 #5f6872,
2px 6px 10px rgba(80, 90, 100, 0.18),
4px 10px 20px rgba(80, 90, 100, 0.12);
}
