CSS Gradient Generator
Create linear, radial, and conic gradients. Copy CSS or Tailwind, download as PNG.
Click to fullscreen
Ready-made Gradients
Color Stops (drag to reorder)
Type
Angle
Quick Actions
Opacity
100%
PNG Size
CSS Gradient Tips
Use 3+ color stops
Two-color gradients look flat. Add a mid-tone stop to create richer, more natural transitions.
Try the 60° sweet spot
Diagonal gradients at 45–135° feel dynamic and energetic. Perfect for hero backgrounds.
Low opacity for subtlety
Use the Opacity slider to create translucent gradients that overlay content without overwhelming it.
Radial for spotlight effects
Radial gradients work great as subtle highlights on cards or buttons — adjust position with X/Y sliders.
Conic for charts & dials
Conic gradients create pie-chart-like sweeps. Adjust the angle to control where the sweep starts.
Tailwind arbitrary values
Tailwind's from-[#hex] syntax lets you use any hex color — no config needed in Tailwind v3+.
Frequently Asked Questions
A CSS gradient is a smooth transition between two or more colors, defined entirely in CSS without needing an image file. They are resolution-independent, scale perfectly on any screen, and are supported in all modern browsers.
Linear gradients transition along a straight line at a given angle. Radial gradients radiate outward from a center point in a circular or elliptical shape. Conic gradients rotate colors around a center point like a color wheel or pie chart.
Click "Copy CSS" and paste it into your stylesheet. For example:
.hero { background: linear-gradient(135deg, #006fd4, #00c7be); } You can apply it to any element as a background.The Tailwind output generates utility classes using arbitrary value syntax (e.g.
bg-gradient-to-br from-[#006fd4] to-[#00c7be]). This works with Tailwind v3+ without any extra configuration. For 3-stop gradients, a via-[#hex] class is added.Yes — click "PNG" to download your gradient as a PNG image. The default export size is 1080×1080 px. You can change this to 1920×1920 or 4K (3840×3840) in the Advanced Settings panel.
The Opacity slider (in Advanced Settings) reduces the alpha channel of all color stops simultaneously. This lets you create semi-transparent gradients that reveal the background beneath — useful for overlay effects on images or colored sections.