Color Tools
CSS gradient generator
Create beautiful CSS gradients visually. Pick colors, set angle, toggle linear/radial, and copy the CSS.
CSS
background: linear-gradient(135deg, #0ea5e9, #f97316);
Quick angles
Frequently asked questions
- How do I create a CSS gradient?
- Choose your start and end colors, select linear or radial, and adjust the angle for linear gradients. The tool generates the CSS code instantly — just copy and paste it into your stylesheet.
- What is the difference between linear and radial gradients?
- A linear gradient transitions colors along a straight line (with a direction angle). A radial gradient transitions colors outward from a center point in a circular pattern.
- Can I use multiple color stops?
- The current version supports two color stops (start and end). You can manually add more stops to the generated CSS code in your editor.