CSS Snippet:
Gradient Border Button
This CSS snippet creates a clean button with a gradient border using a masking technique. The result is a crisp, modern outline that feels more custom than a standard solid border.
It’s a great way to add visual interest to buttons without overwhelming the design.
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 effect when you want a button to feel more premium and visually refined. The gradient border adds subtle colour and detail while keeping the overall design clean.
It works particularly well for call-to-action buttons, hero sections, and modern SaaS-style interfaces.
Where to apply it
Apply this class to buttons where you want a clean gradient outline instead of a solid border.
Common examples include:
• Primary call-to-action buttons
• Hero section buttons
• Pricing page buttons
• Minimal or modern UI designs
Notes & Setup
Select your button in Wix Studio.
Add the class: gradient-border
Paste the CSS into your site's Custom CSS section.
Adjust the gradient colours, border thickness, and padding to match your design.
This CSS fully controls the button appearance, so avoid styling the button background or border using the native Wix controls.
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 {
position: relative;
display: inline-block;
padding: 14px 28px; /* adjust padding to change button size */
background: #ffffff; /* change button background colour */
border-radius: 999px; /* reduce for less rounded corners */
border: none;
cursor: pointer;
z-index: 0;
}
/* Text styling inside Wix button */
.gradient-border * {
color: #111 !important; /* change text colour */
font-weight: 600 !important; /* adjust font weight */
}
.gradient-border::before {
content: "";
position: absolute;
inset: 0;
border-radius: 999px; /* match button radius */
padding: 3px; /* increase for thicker border */
background: linear-gradient(
90deg,
#6366f1,
#06b6d4,
#ec4899
); /* change gradient colours */
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: -1;
}
.gradient-border:hover {
background: #f8fafc; /* optional subtle hover colour */
}
