01. CSS Gradient Button With Glow Shadow (opens in a new tab)
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.
22 CSS Gradient Buttons
22 production-grade CSS gradient buttons you can copy-paste into any project — spanning the full gradient-button playbook plus eight unconventional interaction patterns. Canonical demos cover hue-matched glow shadows, gradient borders and ghost fills, hover transitions via background-position, sliding sweeps, gradient text, shiny sheens, neon glows, glassmorphism, futuristic oklch hue-cycling, pill shapes, search-bar combos, checkout CTAs, and Tailwind-style palettes. The eight experimental interactions push harder: Magnetic Pull (button attracts the cursor via pointer-tracked translate), Breathing (a calm pill that gently inhales via transform:scale and slides its gradient on a 5s cycle with subtle hue drift), Layered Depth (three CSS-only gradient layers at three Z-depths, each parallax-shifting at a different rate), Gradient Trail (click emits 10 particles that fade over 800ms), Hold to Confirm Charging (conic gradient ring fills as you press-and-hold), Sliced Shutter (six vertical strips shutter-roll between two gradients), Gooey Liquid (SVG-goo pill whose droplets squish out and fuse with the body), and Cursor Tracking Aurora (dark glass button whose aurora and border spotlight chase the pointer via @property registered custom properties). Scoped under .gb-NN or .gx-NN, prefers-reduced-motion guarded, framework-agnostic.
Related51 CSS Buttons20 CSS Animated Buttons36 CSS Button Hover Effects
Course pickPartner: Zero to Mastery
Affiliate linkWant to create eye-catching CSS effects like these from scratch?
You just browsed 22 gradient buttons. Learn the advanced CSS behind them: gradients, clipping, masking, blend modes and filters, so the next effect is yours, not a copy-paste.
10% off at checkout with code
Check ZTM Course
Every ZTM course in one membership: $25/month, paid yearly at $299 · 30‑day money-back guarantee
Advanced CSS for Web Design. We may earn a commission, at no extra cost to you.
02. CSS Magnetic Gradient Button (opens in a new tab)
A conversion-research SaaS CTA whose gradient button attracts the cursor when it approaches — subtly translates toward the pointer while the radial hotspot tracks its exact position, then springs back to center with a soft bounce when the pointer leaves.
03. CSS Breathing Gradient Button (opens in a new tab)
A mindfulness-app CTA that breathes on a 5-second cycle — the pill gently inhales via a subtle transform:scale(1.045), its gradient slides across itself, and the ambient glow swells and settles. No shape morphing, no label fade, just a calm rhythm matching an app's meditative practice.
04. CSS Gradient Border Button (opens in a new tab)
Transparent-body buttons with multi-color gradient outlines via the double-background background-clip trick, including an orbiting conic variant animated through @property.
05. CSS Gradient Ghost Button Hover Fill (opens in a new tab)
An editorial ghost button with a gradient border and gradient text that floods with its full teal-to-lime fill on hover via a scaleY-unrolling pseudo-element.
06. CSS Gradient Button Hover Effect (opens in a new tab)
A side-by-side lab comparing the two production fixes for smooth gradient hovers — sliding an oversized background-position versus cross-fading a second gradient layer with opacity.
07. CSS Sliding Gradient Button On Hover (opens in a new tab)
A music-player CTA where a 300%-wide grape-to-tangerine gradient sweeps fully across on hover, chased by a skewed light streak riding the same easing curve.
08. CSS Gradient Text Button (opens in a new tab)
Minimal studio buttons whose labels carry a four-hue oil-slick gradient through background-clip: text, flowing across the letters on hover while the chrome stays quiet.
09. CSS Shiny Gradient Button Effect (opens in a new tab)
A discount-coupon CTA on a royal purple-to-blue gradient with a skewed white sheen streaking across every few seconds — the classic landing-page shine, tuned not to strobe.
10. CSS Layered Depth Gradient Button (opens in a new tab)
A gaming-CTA whose gradient body is split into three stacked Z-depth layers — on cursor hover the layers parallax-shift at different rates, giving the button the physical depth of a 3D dollop of jelly floating over its own drop shadow. Zero WebGL, ~12 lines of JS.
11. CSS Neon Glowing Gradient Button (opens in a new tab)
A dark-arcade Insert Coin button rendered as a neon tube — gradient border, glowing text, and two blurred gradient copies breathing behind it as tight halo and wide ambient wash.
12. Glassmorphism Gradient Button CSS (opens in a new tab)
A frosted-glass membership card and button floating over four drifting gradient blobs, with backdrop-filter doing live blur, saturation and brightness on everything behind the glass.
13. Futuristic AI Style Gradient Button (opens in a new tab)
A 2027-grade AI console Generate button where every color derives from one @property-registered OKLCH hue that drifts through the full wheel, plus a JS generating state with scanline acceleration and a hairline progress rail.
14. CSS Gradient Pill Button (opens in a new tab)
A topic-picker of fully-rounded gradient pills — six duotone palettes, hidden-checkbox selection with hue-matched glows, and gradient slides on hover, all without JavaScript.
15. CSS Gradient Search Bar Button (opens in a new tab)
A travel-search bar where a rounded input and a sunset-gradient search button live inside one seamless pill, and :focus-within lights a gradient ring around the entire bar.
16. CSS Gradient Checkout CTA Button (opens in a new tab)
A high-trust order-summary Pay button on a blue-to-green security gradient, with a JS idle → processing → confirmed flow that crossfades three stacked label layers.
17. CSS Gradient Trail Button (opens in a new tab)
A checkout-confirmation CTA that emits ten tiny gradient particles from the click point on release — each a small radial gradient, scattered at random angles, fading opacity and scaling down over 800ms. Reward without confetti overload.
18. Tailwind Style CSS Gradient Button (opens in a new tab)
A docs-style specimen grid of the four most-loved utility-framework gradient recipes — indigo/purple, cyan/blue, emerald/teal, rose/orange — in pure CSS with hover shade-deepening.
19. Hold To Confirm Charging Gradient Button (opens in a new tab)
A destructive-action button that must be pressed and held while a conic gradient ring charges around it — it jitters nervously near completion, fires only at 100%, and drains the charge back down if released early.
20. Sliced Shutter Gradient Button (opens in a new tab)
A CTA cut into six vertical strips that roll from a sunset gradient to an ocean gradient in a staggered piano-wave, with each strip windowing its exact column of one continuous gradient so the seams are invisible.
21. Gooey Liquid Gradient Button (opens in a new tab)
A candy-gradient pill whose hidden droplets squish outward and merge with the button body through an SVG goo filter on hover, while the core slowly kneads its border-radius like soft jelly.
22. Cursor Tracking Aurora Gradient Button (opens in a new tab)
A dark glass button whose aurora core and gradient border spotlight both chase the pointer with a lazy trailing glide, then drift back to center when the cursor leaves — powered by transitions on registered @property percentages.
FAQ
Frequently asked questions
What is a CSS gradient button?
A CSS gradient button is a button element styled with a multi-stop gradient as its background instead of a flat colour. The canonical recipe is a
background: linear-gradient(120deg, colour1, colour2) declaration on the button, optionally paired with a hue-matched box-shadow (for a coloured ambient glow that reads as material depth) and a small translateY(-2px) hover lift. Modern gradient button designs go further — animated background-position shifts on hover so the gradient appears to slide, background-clip: text for gradient text on a transparent button body, or SVG filter tricks (feGaussianBlur + feColorMatrix) for gooey liquid effects. All 22 demos in this collection ship copy-paste ready, scoped under .gb-NN or .gx-NN so multiple buttons can coexist on one page without style bleed.How do I add a hue-matched glow shadow to a gradient button?
Two techniques stacked. First, add a coloured
box-shadow whose colour is picked from the middle of the gradient — for a violet-to-pink gradient, use box-shadow: 0 8px 24px rgba(167, 139, 250, 0.4). This gives the button a colour-tinted ambient glow instead of a flat black drop shadow. Second, layer a ::before pseudo-element behind the button (via z-index: -1) that duplicates the exact same gradient, offset downward with inset: 8px -4px -10px, and softened with filter: blur(22px). The blurred pseudo bloom mimics a coloured light source under the button. On hover, animate the pseudo's opacity from 0.55 to 0.85 and give it a tiny scaleX(1.04) so the glow stretches — combined with a translateY(-3px) lift on the button itself, the whole treatment reads as premium and expensive. Demo 01 in this collection ships the complete recipe.How do I make a gradient border button in pure CSS?
The 2026-idiomatic pattern uses two stacked backgrounds with
background-clip: padding-box, border-box. Set the border to border: 3px solid transparent (transparent so the border shows the layered background). Then declare background: linear-gradient(button-body-colour) padding-box, linear-gradient(45deg, gradient-stop-1, gradient-stop-2) border-box. The first layer paints the button interior (padding-box clip); the second layer paints the gradient (border-box clip) which shows through the transparent 3px border. Result: a real gradient border with a solid interior, no SVG or JavaScript required. On hover, animate the border-box gradient's angle via @property --border-angle for a rotating border effect, or fade the interior to transparent so the whole button becomes a gradient wash. Demo 04 ships the recipe.Can I use CSS Grid or Flexbox for button layouts?
Flexbox is the right answer for the internals of a single button.
display: inline-flex; align-items: center; gap: 8px gives you perfect icon-plus-label alignment without margins or manual vertical centring. For a search-bar-plus-button combo (like Google's search field with a submit button attached), Flexbox with flex: 1 on the input and a fixed-size button next to it produces the pattern with zero calc() math. CSS Grid is useful when you have multi-line button content with distinct rows (label plus subtitle plus icon column) — grid-template-columns: auto 1fr auto handles the three-column layout cleanly. For the vast majority of gradient buttons in this collection, display: inline-flex is enough. Demo 15 (search bar button) uses Flexbox; demo 17 (button with icon) uses inline-flex with gap for icon spacing.How do I animate a gradient smoothly on hover without jank?
You can't interpolate between two
linear-gradient() values directly — CSS treats gradients as opaque images, not tweenable values. The working pattern instead is to keep the gradient static and animate the background-position — declare a wide gradient (say background-size: 300% 100%) then transition background-position: 0% 0% to background-position: 100% 0%. The gradient appears to slide across the button, giving the illusion of a smooth colour change. Combined with a transition: background-position 0.35s cubic-bezier(0.4, 0.2, 0.2, 1) this stays at 60fps because background-position is a compositor-only property (like transform and opacity). The alternative — for a genuinely different gradient on hover — is to layer TWO gradients on ::before and ::after, cross-fade their opacity on hover. Demos 06, 07, 09, and 10 in this collection ship these techniques.How do I keep gradient buttons accessible?
Four rules preserve accessibility without abandoning the gradient aesthetic. First, meet WCAG AA contrast at 4.5:1 for body copy against the effective button colour — for gradient buttons, sample the darkest gradient stop and test contrast against the text colour, because that's the worst-case region. Second, use a real button element (with an explicit
type='button' attribute for form-safe behaviour) for interactive buttons — never a div with a click handler. The button element is keyboard-accessible for free, gets a focus outline, and works with screen readers. Third, respect @media (prefers-reduced-motion: reduce) for animated gradients (sliding sweeps, infinite loops, drifting hues) — replace with a static gradient or the final settled state. Fourth, add a visible :focus-visible outline distinct from the hover state so keyboard users can see where focus is. Every demo in this collection follows all four rules.How do I build a hold-to-confirm button for destructive actions?
The pattern uses a conic gradient ring that fills as the user holds the button, with a JS
requestAnimationFrame loop writing progress (0-100) to a CSS custom property. The button's ::before is a conic-gradient(from -90deg, accent 0%, accent calc(var(--p) * 1%), transparent 0%) — so as --p rises from 0 to 100, the coloured arc grows around the ring. Turn the filled disc into a ring using the two-layer mask trick: mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) plus mask-composite: exclude (Chrome/Safari) with -webkit-mask-composite: xor (older WebKit). The JS listens for pointerdown (calls setPointerCapture so drags-off don't fire pointerup on parent), charges over a set duration, jitters via a .is-arming class past 78%, and locks into .is-done at 100%. Bonus: Space and Enter keydown/keyup mirror the pointer flow for keyboard users. Demo 19 ships this exact pattern with a 1.2-second hold, a 2.4x-faster drain on release, and a nervous jitter animation.How is this different from libraries like Tailwind, shadcn/ui, or Chakra buttons?
Tailwind CSS ships utility classes that build gradient buttons via utility composition —
bg-gradient-to-r from-violet-500 to-pink-500 hover:from-violet-600 hover:to-pink-600 shadow-lg. That works fine for a standard hue-matched gradient, but the utility system does not extend to conic-ring hold-to-confirm patterns, gooey SVG filters, or cursor-tracking spotlights — for those you'd write custom CSS anyway. shadcn/ui and Chakra ship pre-styled button components with variant slots that let you customize the gradient via theme tokens; both are excellent for design systems but do not include the experimental interaction patterns in this collection. Framer Motion has springs that make hover physics feel premium but adds 40KB of dependencies. For any framework where you want portable CSS, the 22 demos here ship raw so you can lift the technique and drop it into React, Vue, Svelte, Astro, or plain HTML with zero adaptation. Copy the CSS, wrap the interaction in your framework's event handlers (Demos 19 and 22 in this collection have their JS ready to paste), done.Related collections
15 CSS 3D Tilt Hover Cards
15 mouse-aware 3D tilt hover cards — e-commerce product spotlight, glassmorphism parallax team card, interactive pricing tier, holographic NFT collectible, pop-out mascot, dark tech grid with border glow, media player album art, blog article preview, cyberpunk neon glow, dashboard KPI widget, minimalist real estate, flip-to-back tilt, mobile app showcase, course learning card, and a Pure CSS touch-friendly tilt. Vanilla JS writes --rx/--ry/--mx/--my; all rendering stays in CSS on the GPU.
24 CSS Animated Cards
24 hand-coded CSS animated card patterns organised by what triggers the motion, not by card style. Scroll and entrance triggers: staggered grid reveals, @starting-style mount-in, scroll-driven scale and fade on animation-timeline: view(), View Transitions API card-to-detail morphs, blur-to-sharp lazy image loading, and FLIP re-layout when a filter changes. State-change triggers: add-to-cart success morph, like and save particle burst, expand and collapse to intrinsic height with calc-size(), swipe-to-dismiss on Pointer Events, and skeleton-to-loaded crossfade. Data-driven triggers: count-up KPI metrics, SVG sparkline draw-on-enter, and progress ring fill on load. Ambient idle loops: breathing glow, floating drift, animated gradient mesh backgrounds, conic rotating borders, auto-cycling testimonial decks, and live status pulses. Plus four hover patterns where the effect is the topic itself: cursor spotlight, holographic foil glare, corner ribbon slide, and horizontal accordion expand. Every card is scoped under a .ac-NN prefix for no-collision pasting, guards prefers-reduced-motion, animates compositor-only properties, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
22 CSS Avatars
22 hand-coded CSS avatars for chat apps, team dashboards, comment threads, account menus, and social profiles. Covers circular and squircle shapes, gradient and conic story rings, hexagon clip-path crops, online status dots, notification count badges, verified checkmarks, stacked facepiles with plus-N overflow, initials fallbacks for users without photos, broken-image recovery, avatar pickers, and a size scale system where the ring, badge, and status dot all scale from a single custom property.