Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Buttons

Pro

Gradient Button for React

A button filled with a gradient that keeps sliding back and forth, in vivid colors or your theme's. For React with Base UI, when one call to action has to stand out.

Framework
UI library

The Gradient Button's fill is a gradient that slides slowly back and forth, so its colors keep moving under the label. By default it runs through violet, pink and blue under a white label, so it stands out on any theme; pass your theme's variables to colors to match it instead. On hover a soft glow of the same colors comes up under the button.

Use it for one action per page, an Upgrade or a Start trial, where a little constant movement earns attention; more than one on screen and they compete. For a ring of light around a plain button instead, use the Glow Border Button. It wraps the Button, so size works as usual. The fill is a layer twice the button's width moved by a CSS keyframe animation the install adds to your stylesheet, with no animation library, and it stands still when the system asks for reduced motion.

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { GradientButton } from "@/components/ui/gradient-button";
<GradientButton>Upgrade to Pro</GradientButton>

Demos

Colors

colors takes any CSS colors, start to end, including your theme's variables. Here one button moves between the primary color and a darker shade of it, and the other runs from the primary color to the destructive one, for a Go live button. The gradient slides there and back, so the list doesn't need to end where it starts.

Preview width

Hover

animate="hover" keeps the gradient still until the pointer arrives or the button takes keyboard focus, and it waits where it stopped when they leave. Use it where constant motion would distract.

Preview width

Duration

duration is one full shift, there and back, in milliseconds; the default is 3000. A short cycle feels lively, so keep it for small buttons; a long one, 8000 here, drifts calmly under a large hero button.

Preview width

Accessibility

The gradient and the glow are decoration and hidden from assistive tech: the button is announced and activated as any Button. With animate="hover", keyboard focus starts the gradient just as hover does, and the glow comes up on focus too.

Enter
Activate the button.
Space
Activate the button.

FAQ

How do I use my brand colors?

Pass them to colors, as theme variables such as var(--primary) or any CSS color. The Colors demo builds two palettes from theme variables.

Which colors does it use by default?

Violet, pink and blue, each dark enough that the white label stays above a 4.5:1 contrast ratio. They don't follow the theme on purpose: a gray primary color would make the gradient a plain button. Pass colors to use your theme's.

Can it move only on hover?

Yes, pass animate="hover". The gradient waits where it is and moves while the button is hovered or has keyboard focus, as in the Hover demo.

Is the label readable on every part of the gradient?

The label is white with a faint shadow, and every default color keeps it above 4.5:1. If you pass your own colors, check the label against the lightest one, and set a dark label with className for light palettes.

Will a constant animation slow the page down?

No. The gradient is drawn once on a layer twice the button's width, and the keyframes only move that layer with translate, which the browser can hand to the compositor: no repaint, no re-render and no JavaScript while it runs.

Does it support variants?

size works as usual. The gradient replaces the fill, so variant changes little; it's made to be the one filled, colorful button.

Which way does it slide in a right-to-left layout?

The gradient is mirrored: it starts on the right and first slides the way the page reads.

What happens with reduced motion?

The gradient is shown, but it doesn't move. The glow still fades in on hover.

API Reference

GradientButton

data-slot="gradient-button-fill"

PropType
animate?"always" | "hover"

When the gradient moves: all the time, or only while the button is hovered or has keyboard focus (it waits where it is in between).

Type
"always" | "hover"
Default
"always"
children?ReactNode

The label, above the gradient.

colors?string[]

The CSS colors the gradient runs through, start to end; it slides there and back, so they needn't repeat. By default violet, pink and blue, dark enough for the white label; pass theme variables such as var(--primary) to follow your theme.

Default
VIVID_STOPS
duration?number

One full shift of the gradient, there and back, in milliseconds.

Default
3000
focusableWhenDisabled?boolean

Whether the button should be focusable when disabled.

Default
false
nativeButton?boolean

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).

Default
true
render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string

Merged with the part's classes.

CSS variableType
--gradient-button-colorsstring

The gradient's colors, comma-separated, start to end.

--gradient-button-durationstring

One shift there and back (3s).

All 35 buttons