CSS Snippet:
Silver Text
This CSS snippet creates a polished silver text effect using layered gradients and soft shadows to produce a clean metallic finish.
The result feels modern, crisp, and refined, making it ideal for headings that need a subtle but elevated visual style.
Difficulty:
Intermediate
Live preview
Silver
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 sleek, minimal, and slightly premium without introducing warm tones.
It works particularly well for modern brands, tech-focused designs, clean editorial layouts, and interfaces where a neutral metallic accent fits the aesthetic.
Where to apply it
Apply this class to heading text only.
Common examples include:
• Hero headings
• Section titles
• Product names
• Minimal or modern brand text
This effect works best on larger text where the metallic highlights can be clearly seen.
Notes & Setup
Select your heading text in Wix Studio.
Add the class: silver-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 silver effect.
Customisation
Highlights:
The lighter colour stops create the reflective metallic effect. For a softer finish, reduce the contrast between the highlights and darker greys.
Tone:
You can shift the feel of the silver by adjusting the grey tones. Cooler greys create a more modern look, while warmer greys create a softer finish.
Best Use:
This style works best on bold headings and clean, neutral backgrounds where the metallic effect can stand out.
Tip:
Avoid applying this effect to long paragraphs or small text, as the detail is best appreciated at larger sizes.
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-text,
.silver-text * {
display: inline-block;
background: linear-gradient(
145deg,
#aeb6bf 0%,
#dfe4e8 10%,
#7d8791 22%,
#f4f6f8 24%,
#7d8791 28%,
#dfe4e8 48%,
#f4f6f8 50%,
#dfe4e8 52%,
#aeb6bf 82%,
#f4f6f8 84%,
#7d8791 86%,
#7d8791 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,255,0.4),
0 3px 8px rgba(120, 130, 140, 0.12),
0 8px 18px rgba(80, 90, 100, 0.06);
}
