CSS Snippet:

Rose Gold Container

This CSS snippet creates a soft rose gold container with a metallic gradient finish, subtle inner highlights, and gentle depth.

The result feels polished and premium, making it ideal for sections, cards, or feature panels that need a more elevated visual style.

Difficulty:

Intermediate

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

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 container style when you want a section or panel to feel warm, glossy, and slightly luxurious without becoming visually heavy.

It works especially well for feature cards, highlighted content blocks, product spotlights, and premium service sections.

Where to apply it

Apply this class to container elements only.

Common examples include:

• Content cards

• Feature panels

• Highlight sections

• Testimonial boxes

• Premium callout areas

This style works best when given enough padding and space to let the gradient and surface effect show clearly.

Notes & Setup

Select your container or box element in Wix Studio
Add the class: rose-gold-container
Paste the CSS into your site's Custom CSS section.

This style applies the surface finish, rounded shape, and depth. You can then style the content inside using the Wix Design panel as normal.

Customisation

Depth:

The combination of inset highlights and outer shadow gives the container its soft metallic depth. Reducing these values will create a flatter, more minimal version.

Corners:

The border-radius can be increased for a softer card style or reduced for a more structured panel.

Shine:

The ::after layer adds a subtle surface sheen. You can remove it entirely for a cleaner, flatter finish.

Tip:

This style looks best when used intentionally as a featured surface rather than applied to every box on the page.

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-container {
padding: 32px;
border-radius: 20px;

background: linear-gradient(
160deg,
#ffffff 0%,
#fdf1ec 12%,
#f3c3b8 35%,
#e6a79a 55%,
#d48a7c 70%,
#f4c2b5 85%,
#fff1ec 100%
);

box-shadow:
inset 0 2px 6px rgba(255, 255, 255, 0.6),
inset 0 -4px 10px rgba(184, 110, 97, 0.25),
0 10px 30px rgba(90, 28, 28, 0.15);

position: relative;
}

.rose-gold-container::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;

background: linear-gradient(
120deg,
rgba(255,255,255,0.5),
rgba(255,255,255,0.05) 40%,
transparent 60%
);

pointer-events: none;
}