CSS Snippet:
Gradient Border Container
This CSS snippet creates a clean container with a smooth gradient border using layered backgrounds. The gradient wraps neatly around the edges while keeping the inside minimal and easy to work with.
It’s a modern way to introduce colour and detail without overwhelming your layout.
Difficulty:
Easy
Live preview
Gradient Border
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 when you want to add subtle visual interest and colour to a section without using heavy backgrounds or strong shadows.
It works well for highlighting important content while keeping the overall design clean and controlled.
Where to apply it
Apply this class to containers that need to stand out slightly from the surrounding content.
Common examples include:
• Feature highlights
• Pricing or plan sections
• Key content blocks
• Callout areas
This style works particularly well in modern layouts with neutral backgrounds.
Notes & Setup
Select your container in Wix Studio.
Add the class: gradient-border-container
Paste the CSS into your site's Custom CSS section.
You can adjust the gradient colours to match your brand.
If you don’t want the hover effect, simply remove the :hover section from the CSS.
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
.gradient-border-container {
padding: 24px 28px;
border-radius: 16px;
border: 2px solid transparent;
background:
linear-gradient(#ffffff, #ffffff) padding-box,
linear-gradient(90deg, #6366f1, #06b6d4, #ec4899) border-box;
transition: all 0.25s ease;
}
/* Optional hover */
.gradient-border-container:hover {
background:
linear-gradient(#f8fafc, #f8fafc) padding-box,
linear-gradient(90deg, #6366f1, #06b6d4, #ec4899) border-box;
}
