Free online CSS gradient button generator. Customize text, colors, radius, shadows, borders and hover effects.
π‘ Generated CSS supports all modern browsers.
Copy the CSS code into your stylesheet. Use class='gradient-btn' in your HTML to apply the style. You can also copy the HTML snippet directly.
The generated CSS uses standard linear-gradient and border-radius. Supports all modern browsers (Chrome, Firefox, Safari, Edge) with -webkit- prefix.
Choose from preset directions (top-to-bottom, left-to-right, diagonal, etc.) or customize with a specific angle (0-360 degrees). Default is 135 degrees.
Hover effects use CSS :hover pseudo-class. On hover, the gradient can reverse, brighten, add glow shadow, slightly scale up, or adjust opacity. All pure CSS.