CSS Snippet:

Antique Brass Container

This CSS snippet creates a soft antique brass container with a warm metallic gradient, subtle highlights, and gentle depth.

The result feels grounded, premium, and slightly vintage, making it ideal for sections and panels that need a more atmospheric, heritage-inspired look.

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

Antique Brass

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, rich, and slightly moody without becoming visually heavy.

It works especially well for feature sections, content cards, premium callouts, and darker design themes.

Where to apply it

Apply this class to container elements only.

Common examples include:

• Content cards

• Feature panels

• Highlight sections

• Testimonial blocks

• Premium callout areas

This style works best when given space to allow the gradient and surface effect to be visible.

Notes & Setup

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

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

Customisation

Shape:

This version uses a subtle 5px radius, giving it a more structured and refined panel feel compared to softer card styles.

Depth:

The inner highlights and outer shadow create a layered metallic surface. Reducing these values will produce a flatter look.

Shine:

The ::after layer adds a subtle reflective sheen. Remove it for a more matte finish.

Tip:

This style works best when used sparingly as a feature surface to maintain its impact.

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

.antique-brass-container {
padding: 32px;
border-radius: 5px;

background: linear-gradient(
160deg,
#f6f1e6 0%,
#e2d3b0 12%,
#bfa36a 35%,
#9a7b47 55%,
#8c6f3f 70%,
#cbb27a 85%,
#f3ead4 100%
);

box-shadow:
inset 0 2px 6px rgba(255, 255, 255, 0.5),
inset 0 -4px 10px rgba(90, 70, 40, 0.35),
0 10px 30px rgba(40, 30, 10, 0.25);

position: relative;
}

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

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

pointer-events: none;
}