CSS Gradient Generator
Start from a preset
0 points up and the angle increases clockwise.
Color stops
Gradient code
A code-first way to build a gradient
This generator is organised around the output rather than the canvas. Pick a preset as a starting point, set each stop position as a number, and read the generated code directly. It suits working to an existing spec, or adjusting a gradient that already exists in a stylesheet.
If you would rather drag handles and judge the result by eye, the visual gradient generator builds the same gradients through a canvas and exports a PNG.
The three output formats
The CSS output is a plain rule setting background-image, usable in any stylesheet. The SCSS output declares the stops as a variable and wraps them in a mixin, so one gradient can be reused across several selectors without repetition.
The Tailwind v4 output is a custom property inside an @theme block, together with the utility syntax that consumes it. Tailwind's built-in bg-linear-* utilities cover simple two-color cases only, so an arbitrary multi-stop gradient is expressed as a theme entry or an arbitrary value. Spaces inside an arbitrary value are written as underscores, which is what Tailwind's parser requires.
Support and maintenance notes
Linear and radial gradients are supported across all current browsers without vendor prefixes. Conic gradients are widely supported in current versions but are the newest of the three, so check your own support baseline before relying on one.
Repeating variants tile the stop list until the element is filled. A repeating gradient whose last stop sits at 100 percent has nothing left to repeat, so give the final stop a smaller position to see the effect.
Frequently asked questions
They build the same gradients. This page starts from presets and numeric stop positions and focuses on the generated code; the visual tool offers a drag-and-drop canvas and a PNG export.