Gradient Button Generator
Gradient buttons with a hover effect that feels right — shift, shine, lift or glow. Keyboard focus and pressed states included; copy the CSS or Tailwind.
Picking a hover effect
- Shift slides the gradient sideways — subtle, and it works for any colours. The gradient is drawn there and back at twice the width, so it never shows a seam.
- Shine sweeps a band of light across, good for one primary call to action rather than every button.
- Lift raises the button and adds a shadow in its own colour.
- Glow grows a soft coloured halo — strongest on a dark page.
- Fill in turns an outline button solid, a clear signal for a secondary button.
States that are easy to forget
The CSS includes a :focus-visible outline, so people moving through the page with a keyboard can see where they are, a small press on :active, and a prefers-reduced-motion rule that turns the transitions off for anyone who has asked for less motion.
Readable labels
Text on a gradient is only as readable as its lightest point. Auto picks white for vivid gradients as long as it reaches 3:1 at the lightest colour — fine for short, bold labels — and tells you the exact ratio, and when black text would reach the stricter 4.5:1. To check a whole hero, use the Gradient Contrast Checker. For gradient borders on cards and inputs, see the Gradient Border Generator.