CSS Snippet:
Rose Gold Text
This CSS snippet creates a polished rose gold text effect using layered gradients and soft shadows to give the lettering a warm metallic finish.
The result feels premium and decorative without looking overly heavy, making it ideal for standout headings and refined brand moments.
Difficulty:
Intermediate
Live preview
Rose Gold
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, glossy, and slightly luxurious without becoming hard to read.
It works particularly well for beauty, fashion, lifestyle, premium services, and any design where a soft metallic accent helps elevate the visual style.
Where to apply it
Apply this class to heading text only.
Common examples include:
• Hero headings
• Section titles
• Premium product names
• Decorative brand-style 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: rose-gold-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 rose gold effect.
Customisation
Highlights:
The lighter colour stops create the metallic shine effect. For a softer finish, tone these down slightly using warmer pink-white shades.
Depth:
The effect uses soft text shadows rather than heavy 3D stacking, which keeps it elegant and easier to use across modern layouts.
Best Use:
This style works best on bold headings and clean backgrounds where the metallic finish has room to stand out.
Tip:
Avoid applying this effect to long paragraphs or small body 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
.rose-gold-text,
.rose-gold-text * {
display: inline-block;
background: linear-gradient(
145deg,
#d48a7c 0%,
#e7aea2 10%,
#bf6f61 22%,
#f8dcd6 24%,
#bf6f61 28%,
#e7aea2 48%,
#f8dcd6 50%,
#e7aea2 52%,
#d48a7c 82%,
#f8dcd6 84%,
#b86e61 86%,
#b86e61 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.35),
0 3px 8px rgba(184, 110, 97, 0.12),
0 8px 18px rgba(90, 28, 28, 0.06);
}
