Gradient Playground
Create CSS gradients visually
Create beautiful CSS gradients interactively. Choose colors, adjust angles, switch between linear and radial, and copy the CSS code instantly.
How to Use Gradient Playground
- 1Pick colors using the color inputs or click "Random" for instant inspiration
- 2Choose gradient type: Linear or Radial
- 3Adjust the angle (linear) or shape (radial) with the slider
- 4Preview the gradient live on the large canvas
- 5Copy the CSS code or download the gradient as a PNG image
Features
- Up to 4 color stops - create complex multi-color gradients
- Linear and radial gradient types
- Adjustable angle (0–360°) for linear gradients
- Radial shape options - circle or ellipse
- Random gradient generator - instant inspiration with one click
- Live preview on full-width canvas
- CSS code copy - get the exact background CSS for your project
- Download as PNG - save the gradient as an image
- Color picker for each stop - fine-tune every color
Frequently Asked Questions
Can I use these gradients commercially?
Yes. The gradients you create are yours to use in any project - personal or commercial. No attribution required.
What CSS property does the generated code use?
The standard CSS `background` property with `linear-gradient()` or `radial-gradient()`. Compatible with all modern browsers.
Can I add more than 4 colors?
The interface supports up to 4 color stops, but you can edit the generated CSS to add more. The tool is designed for simplicity.
How is the gradient generated?
Completely in your browser using CSS. The preview renders in real-time and the code is generated based on your selections.