CSS Snippet:

3D Rose Gold Text

This CSS snippet creates a 3D rose gold text effect using layered gradients and stacked shadows to simulate depth, highlights, and metallic finish.

The result is a polished, premium-looking heading that feels dimensional without relying on images or external graphics.

Difficulty:

Easy

Promotion

Need help with your Wix website?

Fix a problem, rebuild your site, or get your SEO set up properly.

Expert Wix support, exactly when you need it.

Find out more

Start Now

Live preview

Rose 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 elevated, luxurious, and visually distinctive.

It works particularly well for premium brands, beauty and lifestyle sites, or any design where a metallic finish adds to the overall aesthetic.

Where to apply it

Apply this class to heading text only.

Common examples include:

• Hero headings

• Brand or logo-style text

• Premium product sections

• Feature or campaign titles

This style works best on larger text where the depth and highlights can be clearly seen.

Notes & Setup

Select your heading text in Wix Studio.
Add the class: rose-gold-3d-text
Paste the CSS into your site's Custom CSS section.

This style works best on bold, medium-to-large headings where the 3D depth and metallic gradient can be clearly seen.

Customisation

Colour Tones:

You can adjust the rose gold shades in the gradient to create lighter or darker metallic finishes.

For a deeper tone, increase the darker colour stops. For a softer look, increase the lighter tones.

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(150, 80, 70, 0.22);

You can adjust the thickness or colour for sharper or softer edges.

Tip:

This style works best on clean backgrounds so the highlights and shadows 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

.rose-gold-3d-text,
.rose-gold-3d-text * {
background: linear-gradient(
160deg,
#ffffff 0%,
#fdf1ec 8%,
#f3c3b8 24%,
#d99689 46%,
#b86e61 62%,
#f4c2b5 78%,
#fff1ec 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(150, 80, 70, 0.22);

text-shadow:
0 1px 0 #fbe7e1,
0 2px 0 #efc1b7,
0 3px 0 #d99689,
0 4px 0 #b86e61,
0 5px 0 #8f4a42,
2px 6px 10px rgba(90, 28, 28, 0.20),
4px 10px 20px rgba(90, 28, 28, 0.14);
}