CSS Gradient Generator
Design a linear or radial CSS gradient visually and copy the generated code.
About this tool
Design a linear or radial CSS gradient with a live preview, then copy the ready-to-use CSS.
Key Features
- Linear and radial gradients
- Live visual preview as you adjust it
- Standard, widely-supported CSS output
- Adjustable angle for linear gradients
How to Use
- Choose linear or radial.
- Pick two colors.
- For linear gradients, set the angle.
- Copy the generated CSS.
Benefits
- Design backgrounds and buttons without trial-and-error in dev tools
- Get valid CSS syntax every time
- Quickly preview color combinations
Frequently Asked Questions
A linear gradient transitions colors along a straight line at a chosen angle — good for backgrounds and banners. A radial gradient transitions colors outward from a center point in a circle — good for spotlight effects, buttons, or badges.
Yes — the linear-gradient() and radial-gradient() functions this tool generates have been supported in all major browsers for many years, with no vendor prefixes needed.
This tool generates a simple two-color gradient, which covers the most common use case. To add more color stops, you can extend the generated CSS by hand — for example, adding a third color and percentage inside the same gradient() function, using this tool's output as your starting point.