Button Gradient Generator
Design beautiful gradient CSS buttons with hover effects — copy the ready-to-use CSS.
Presets
Button Text
Gradient Colours
From
To
Angle
135°
Text Colour
Button text colour
Size & Shape
Padding X
28px
Padding Y
14px
Font size
16px
Radius
8px
Effects
Generated CSS
What is a CSS Gradient Button?
A gradient button uses a linear-gradient() as its background instead of a flat colour. This creates a sense of depth and visual richness that flat buttons lack. Gradient buttons are widely used in calls to action, hero sections, and marketing pages where you want the primary action to stand out.
The key to a polished gradient button is matching the hover state — either brightening the gradient, reversing it, or pairing it with a subtle lift via transform: translateY(-2px) and a coloured box-shadow. This generator handles all of that for you and outputs clean, copy-paste-ready CSS.
How to Use
- Choose two gradient colours and set the angle.
- Adjust padding, font size, and border radius to shape the button.
- Toggle Box shadow and Hover effect for extra polish.
- Type your button label in the Button Text field.
- Click ⿻ Copy CSS to copy the complete CSS to your clipboard.
Frequently Asked Questions
Toggle the Border checkbox in this generator for a bordered variant. For a transparent background with a gradient border, a more advanced technique uses a pseudo-element: set
background-clip: padding-box on the button and apply the gradient to a ::before pseudo-element positioned behind it. This generator outputs a simpler, broadly-compatible version.Tailwind includes utility classes for gradients:
bg-gradient-to-r from-orange-500 to-amber-400. For a fully custom gradient that doesn't have a Tailwind preset, use Tailwind's arbitrary value syntax: bg-[linear-gradient(135deg,#e85d26,#f7971e)]. Or add the CSS from this generator to a custom component in your Tailwind config.No. Everything runs entirely in your browser. Nothing is sent to any server.