Seven gradient buttons that stay readable: a sweeping sunset fill, a rounded gradient outline, a mesh of radial gradients, a shine streak, a gradient-text secondary button, a gradient that drifts slowly, and a primary and secondary pair that shows where a gradient belongs.
A warm gradient with white text. Every stop is dark enough for the label to keep at least 4.5:1 contrast, and hover shifts background-position across a gradient twice the width of the button, which animates smoothly where a gradient change would not.
A rounded gradient border made with two backgrounds: the padding-box layer is the button colour and the border-box layer is the gradient, seen through a transparent border. On hover the inner layer turns to the gradient too, filling the button.
Three radial gradients layered over a base colour make a soft mesh, the blurred-colour look of many product sites, with no image file. An inset white highlight along the top edge and a coloured shadow underneath give the surface depth.
A green gradient button with a diagonal white streak that crosses it on hover. The streak is a skewed pseudo-element moved by its left position inside overflow: hidden, so it stays within the rounded corners, and it is removed for reduced motion.
A quiet secondary button whose label is filled with a gradient using background-clip: text on an inner span. A pale tinted background and a matching border keep it readable as a button, and both gradient stops are dark enough to pass contrast on the tint.
A four-colour gradient three times the size of the button drifts back and forth over eight seconds, so the button feels alive without flashing. The animation only moves background-position, and it stops completely when reduced motion is requested.
A pair of actions where only the primary one gets the gradient, which is how gradients work best: as emphasis, not decoration everywhere. Both buttons share a height and radius, and they wrap onto two lines on narrow screens.
A gradient is only as readable as its lightest point under the text. Test the white label against each colour stop, not just the middle, and darken any stop that falls under 4.5:1.
Animate position, not colours
Browsers cannot transition one gradient into another, but they can move it. Make the background larger than the button with background-size and transition background-position for a smooth shift.
Gradient borders with two backgrounds
A rounded gradient border needs no extra element: give the button a transparent border and two backgrounds, a solid one clipped to padding-box and the gradient clipped to border-box.
Use gradients for emphasis
When every button has a gradient, none stands out. Keep the gradient for the main action and give secondary actions a plain or outlined style.
Frequently asked questions
Can I use these on a light and a dark site?
Yes. Each demo shows its intended background, and the colours are easy to swap in the CSS.
Why is the gradient text inside a span?
background-clip: text clips the whole background, so the gradient sits on the label span and the button keeps its own solid tint.
Do gradients slow the page down?
No. Gradients are drawn by the browser with no image download, and the animated ones only move background-position.