CSS Gradient Generator — Create Linear & Radial Gradients Free
Build beautiful CSS gradients with a visual editor. Choose linear, radial, or conic gradient type. Add up to 8 color stops, drag to reorder, and control position precisely with sliders. Browse 12 preset gradients or build your own. CSS and Tailwind output update in real time — copy with one click.
100% private. All gradient generation happens in your browser. Nothing is sent to any server.
How to Create a CSS Gradient Free
- 01
Pick colors and type
Select linear, radial, or conic gradient type. Add up to 8 color stops and drag them to reorder. Click a preset to start from a gallery design.
- 02
Adjust direction and positions
Set the angle using the compass or type a custom degree. Drag the position sliders to control where each color stop appears.
- 03
Copy CSS or Tailwind
The CSS output updates in real time. Click Copy to grab the CSS, or use the Tailwind config snippet for Tailwind projects.
Frequently Asked Questions
What types of CSS gradients can I create?
You can create three types: linear-gradient (colors transition along a straight line at any angle), radial-gradient (colors radiate outward from a center point in a circle or ellipse), and conic-gradient (colors rotate around a center point like a pie chart). All three types support up to 8 color stops.
How do I set the gradient angle?
For linear gradients, use the direction compass to pick one of 8 preset directions (up, down, left, right, and four diagonals), or type any custom angle from 0 to 360 degrees. 0deg points up, 90deg points right, 180deg points down, and 270deg points left.
What is a color stop position?
A color stop position (0–100%) tells the browser where along the gradient a particular color should be fully rendered. A position of 0% is the start, 100% is the end. By placing stops at specific positions you can control how quickly colors transition, create sharp color bands, or extend one color over a larger area.
How do I copy the generated gradient?
Click the "Copy" button in the CSS Output panel. This copies the background shorthand CSS property to your clipboard. You can paste it directly into your stylesheet. The output also includes the -webkit- prefix for older browser compatibility.
Can I use this gradient in Tailwind CSS?
The tool generates an approximate Tailwind class using bg-gradient-to-* with from-* and to-* values for simple two-stop gradients. For complex gradients with custom colors or more than two stops, use the Tailwind config snippet provided — add it to the backgroundImage theme extension in tailwind.config.js.