Button Gradient Generator
Create beautiful gradient buttons with CSS. Choose colors, adjust angle, see the button update live — copy the production-ready CSS in one click.
Color Stops
Button CSS
What Is a Gradient Button?
A gradient button uses a smooth color transition as its background instead of a flat solid color. Gradient buttons feel more premium and modern than solid-color buttons and are widely used on SaaS landing pages, mobile apps and modern branding. The most common style is a diagonal two-color gradient — like linear-gradient(135deg, #155EEF, #7C3AED).
How to Design Good Gradient Buttons
- Keep it subtle: Two colors from the same family or close on the color wheel look cleaner than contrasting hues.
- Use a consistent angle: 135° (top-left to bottom-right) is the most common and works with most layouts.
- Add a subtle shadow: A colored shadow (matching the primary hue) creates depth and makes the button pop.
- Contrast text: White text works on most gradients; verify with a contrast checker to meet WCAG AA.
- Include a hover state: Slightly darker gradient or a subtle transform creates satisfying interactive feedback.
Best Practices for Accessible Gradient Buttons
Test the button's lightest gradient stop against the text color for WCAG AA contrast (4.5:1 minimum). If the gradient has a light stop, white text may fail; consider a darker text color or a darkening overlay. Also ensure the button has a visible focus state for keyboard accessibility.