CSS Snippet:
Gradient Glow Button
This CSS snippet creates a premium gradient button with a soft glow and subtle highlight overlay. The combination of layered shadows and colour blending gives the button depth, movement, and a polished UI feel without relying on complex animations.
It’s a strong visual CTA that works well in modern, design-led websites.
Difficulty:
Easy
Live preview
Gradient Glow
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 button when you want a high-impact call-to-action that stands out immediately on the page.
It works particularly well for primary CTAs, sign-up buttons, or key actions where you want to draw attention without relying on aggressive animations.
Where to apply it
Apply this class to your main call-to-action buttons where visual impact matters most.
Common examples include:
• “Get Started” or “Sign Up” buttons
• Landing page hero CTAs
• Product or SaaS websites
• High-conversion sections
This style works best when used sparingly as a primary action rather than across every button on the page.
Notes & Setup
Select your button in Wix Studio.
Add the class: gradient-glow-button
Paste the CSS into your site's Custom CSS section.
Adjust the gradient colours to match your brand, and tweak the shadow colours to control the glow effect.
You can also modify the padding and border radius to change the overall shape and feel of the button.
This style is designed to be visually impactful, so it works best when used as a primary call-to-action rather than across every button 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
.gradient-glow-button {
padding: 16px 32px; /* adjust size */
border-radius: 999px; /* adjust roundness */
/* Gradient button (main visual) */
background: linear-gradient(135deg, #6366f1, #ec4899); /* change colours */
background-size: 200% 200%;
border: none;
cursor: pointer;
position: relative;
/* Glow and depth */
box-shadow:
0 10px 30px rgba(99,102,241,0.4), /* glow colour 1 */
0 4px 10px rgba(236,72,153,0.3); /* glow colour 2 */
transition: all 0.3s ease;
}
/* Text inside Wix button */
.gradient-glow-button * {
color: #ffffff !important; /* change text colour */
font-weight: 600 !important;
}
/* Gloss highlight overlay */
.gradient-glow-button::before {
content: "";
position: absolute;
inset: 0;
border-radius: 999px;
background: linear-gradient(
120deg,
rgba(255,255,255,0.25),
rgba(255,255,255,0.05)
);
pointer-events: none;
}
/* Optional subtle hover */
.gradient-glow-button:hover {
transform: translateY(-2px);
box-shadow:
0 14px 40px rgba(99,102,241,0.5),
0 6px 16px rgba(236,72,153,0.4);
}
