Free Tool
CSS Gradient Generator
Create stunning CSS gradients visually. Choose from linear, radial, or conic gradients, customize colors and positions, then copy the code to your project.
1
Pick a gradient type and adjust colors
2
Fine-tune with angle, position, and presets
3
Copy the CSS or Tailwind code
Gradient Type
135°
Color Stops
2 / 810%
2100%
Preview
Code
CSS
background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
Tailwind CSS
bg-[linear-gradient(135deg,_#06b6d4_0%,_#8b5cf6_100%)]
Preset Gradients
Click a preset to use it as a starting point, then customize.
Email Me These Results
Get your calculation + related frameworks and templates.
or use email
Get this + weekly PM tools and templates.