22 CSS Gradient Buttons01 / 22

Pure CSSMIT licensed

CSS Gradient Button With Glow Shadow

A pricing-card CTA whose coral-to-violet gradient is echoed by a blurred pseudo-element underneath, producing a hue-matched ambient glow instead of a flat black drop shadow.

Published

Live Demo
Try it

The code

<div class="gb-01">
  <div class="gb-01__card">
    <span class="gb-01__badge">Most Popular</span>
    <h3 class="gb-01__title">Pro Workspace</h3>
    <p class="gb-01__price"><strong>$24</strong> / month · billed yearly</p>
    <button class="gb-01__btn" type="button">Upgrade to Pro</button>
    <p class="gb-01__note">Cancel anytime · 14-day free trial</p>
  </div>
</div>
.gb-01,
.gb-01 *,
.gb-01 *::before,
.gb-01 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gb-01 ::selection {
  background: #ff6b9d;
  color: #fff;
}

.gb-01 {
  --grad-a: #ff6b6b;
  --grad-b: #c44dff;
  --grad-c: #7c5cff;
  --glow: rgba(196,77,255,.45);
  --ink: #2b2440;
  --card: #fffaf5;
  --dur: .45s;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background: linear-gradient(160deg,#fdf3ec 0%,#f5ecfd 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.gb-01__card {
  background: var(--card);
  border-radius: 24px;
  padding: 44px 40px 40px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px -24px rgba(124,92,255,.18),0 2px 8px rgba(43,36,64,.05);
}

.gb-01__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #c44dff;
  background: rgba(196,77,255,.1);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.gb-01__title {
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.5px;
  margin-bottom: 8px;
}

.gb-01__price {
  font-size: 15px;
  color: #8a819e;
  margin-bottom: 28px;
}

.gb-01__price strong {
  color: var(--ink);
  font-size: 20px;
}

.gb-01__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 17px 32px;
  border: none;
  border-radius: 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(120deg,var(--grad-a) 0%,var(--grad-b) 55%,var(--grad-c) 100%);
  box-shadow: 0 10px 28px -6px var(--glow),0 4px 10px -4px rgba(255,107,107,.4);
  transition: transform var(--dur) cubic-bezier(.34,1.56,.64,1),box-shadow var(--dur) ease;
  -webkit-tap-highlight-color: transparent;
}
/* Duplicate gradient blurred underneath = hue-matched ambient glow */

.gb-01__btn::before {
  content: "";
  position: absolute;
  inset: 8px -4px -10px;
  border-radius: inherit;
  background: linear-gradient(120deg,var(--grad-a),var(--grad-b),var(--grad-c));
  filter: blur(22px);
  opacity: .55;
  z-index: -1;
  transition: opacity var(--dur) ease,transform var(--dur) ease;
}

.gb-01__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -8px var(--glow),0 8px 16px -6px rgba(255,107,107,.5);
}

.gb-01__btn:hover::before {
  opacity: .85;
  transform: scaleX(1.04);
}

.gb-01__btn:active {
  transform: translateY(-1px) scale(.985);
}

.gb-01__btn:focus-visible {
  outline: 3px solid #c44dff;
  outline-offset: 3px;
}

.gb-01__note {
  margin-top: 16px;
  font-size: 12.5px;
  color: #a89fbc;
}

@media (prefers-reduced-motion: reduce) {
  .gb-01__btn,
    .gb-01__btn::before {
    transition: none;
  }

  .gb-01__btn:hover {
    transform: none;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Gradient Button from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: CSS Gradient Button With Glow Shadow
Source: https://codefronts.com/components/css-gradient-buttons/css-gradient-button-with-glow-shadow/

A pricing-card CTA whose coral-to-violet gradient is echoed by a blurred pseudo-element underneath, producing a hue-matched ambient glow instead of a flat black drop shadow.
## HTML
```html
<div class="gb-01">
  <div class="gb-01__card">
    <span class="gb-01__badge">Most Popular</span>
    <h3 class="gb-01__title">Pro Workspace</h3>
    <p class="gb-01__price"><strong>$24</strong> / month · billed yearly</p>
    <button class="gb-01__btn" type="button">Upgrade to Pro</button>
    <p class="gb-01__note">Cancel anytime · 14-day free trial</p>
  </div>
</div>
```
## CSS
```css
.gb-01,
.gb-01 *,
.gb-01 *::before,
.gb-01 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gb-01 ::selection {
  background: #ff6b9d;
  color: #fff;
}

.gb-01 {
  --grad-a: #ff6b6b;
  --grad-b: #c44dff;
  --grad-c: #7c5cff;
  --glow: rgba(196,77,255,.45);
  --ink: #2b2440;
  --card: #fffaf5;
  --dur: .45s;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background: linear-gradient(160deg,#fdf3ec 0%,#f5ecfd 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.gb-01__card {
  background: var(--card);
  border-radius: 24px;
  padding: 44px 40px 40px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px -24px rgba(124,92,255,.18),0 2px 8px rgba(43,36,64,.05);
}

.gb-01__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #c44dff;
  background: rgba(196,77,255,.1);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.gb-01__title {
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.5px;
  margin-bottom: 8px;
}

.gb-01__price {
  font-size: 15px;
  color: #8a819e;
  margin-bottom: 28px;
}

.gb-01__price strong {
  color: var(--ink);
  font-size: 20px;
}

.gb-01__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 17px 32px;
  border: none;
  border-radius: 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(120deg,var(--grad-a) 0%,var(--grad-b) 55%,var(--grad-c) 100%);
  box-shadow: 0 10px 28px -6px var(--glow),0 4px 10px -4px rgba(255,107,107,.4);
  transition: transform var(--dur) cubic-bezier(.34,1.56,.64,1),box-shadow var(--dur) ease;
  -webkit-tap-highlight-color: transparent;
}
/* Duplicate gradient blurred underneath = hue-matched ambient glow */

.gb-01__btn::before {
  content: "";
  position: absolute;
  inset: 8px -4px -10px;
  border-radius: inherit;
  background: linear-gradient(120deg,var(--grad-a),var(--grad-b),var(--grad-c));
  filter: blur(22px);
  opacity: .55;
  z-index: -1;
  transition: opacity var(--dur) ease,transform var(--dur) ease;
}

.gb-01__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -8px var(--glow),0 8px 16px -6px rgba(255,107,107,.5);
}

.gb-01__btn:hover::before {
  opacity: .85;
  transform: scaleX(1.04);
}

.gb-01__btn:active {
  transform: translateY(-1px) scale(.985);
}

.gb-01__btn:focus-visible {
  outline: 3px solid #c44dff;
  outline-offset: 3px;
}

.gb-01__note {
  margin-top: 16px;
  font-size: 12.5px;
  color: #a89fbc;
}

@media (prefers-reduced-motion: reduce) {
  .gb-01__btn,
    .gb-01__btn::before {
    transition: none;
  }

  .gb-01__btn:hover {
    transform: none;
  }
}
```

How this works

The button paints a three-stop linear-gradient(120deg, ...) and stacks two glow sources: a colored box-shadow tuned to the gradient's middle hue, and a ::before pseudo-element that duplicates the exact same gradient, offset downward with inset: 8px -4px -10px, softened by filter: blur(22px) and pushed behind the button with z-index: -1.

On hover the button lifts with translateY(-3px) on a springy cubic-bezier(.34,1.56,.64,1) curve while the glow layer's opacity rises from .55 to .85 and stretches slightly via scaleX(1.04) — all compositor-friendly properties, so the lift and bloom stay at 60fps.

Make it yours

  • Retint the whole treatment by editing --grad-a, --grad-b and --grad-c on the .gb-01 root — the glow inherits automatically because ::before repeats the same stops.
  • Make the glow moodier by raising filter: blur(22px) to blur(34px) and dropping the resting opacity to .4 so it only blooms on hover.
  • Tighten the halo's spread by shrinking the negative inset values — inset: 10px 2px -6px hugs the button instead of spilling wide.
  • Swap the bouncy hover for a calmer one by replacing the cubic-bezier(.34,1.56,.64,1) spring with plain ease-out on the transform transition.
  • Match the --glow shadow color to whichever gradient stop dominates your palette; a mismatched glow hue is the fastest way to make the effect look pasted-on.

Gotchas — read before shipping

  • The blurred ::before needs z-index: -1 plus a positioned ancestor; if a parent creates a stacking context with an opaque background, the glow can vanish behind it.
  • Large blur radii repaint expensively while animating — animate the layer's opacity/transform only, never the filter value itself.
  • On very light backgrounds a .55 resting opacity can wash out adjacent text; drop it to around .35 or reduce the negative bottom inset so the bloom stays under the button.

Browser support

ChromeSafariFirefoxEdge
76+13+72+76+

Everything here is long-supported CSS; only filter: blur() on pseudo-elements sets the floor.

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →