How many color stops can I use?

You can use between 2 and 6 color stops. More stops give you more control over how colors transition across the gradient.

Where can I paste the generated CSS?

The copied background rule works in any stylesheet, inline style, or CSS-in-JS setup, it is plain standard CSS with no frameworks or prefixes required.

Does this tool store my gradients?

No. Everything runs in your browser, nothing is uploaded or saved.

CSS Gradient Generator

Design linear and radial gradients with live preview and copyable CSS.

linearradial

Angle: 90°

Stop 1

Color

Position: 0%

Stop 2

Color

Position: 100%

background: linear-gradient(90deg, #7C3AED 0%, #2563EB 100%);

Everything runs in your browser, nothing is sent or stored anywhere.

About this tool

Gradients add depth and energy to buttons, hero sections, cards, and backgrounds, but writing them by hand means guessing at angles and stop positions. The JoliTools CSS Gradient Generator gives you a visual canvas where every change updates instantly, so you can experiment freely until the gradient looks exactly right.

You control every part of the gradient: up to six color stops, each with its own position slider, a 360-degree angle control for linear gradients, and one-click switching to radial mode for soft spotlight effects. The generated CSS is a single background declaration you can copy and paste anywhere, no build tools or vendor prefixes needed.

How to use the css gradient generator

1Choose Linear or Radial for the gradient type.
2Set each stop's color and drag its position slider.
3Click + Add color stop to add up to 6 colors (or remove stops you don't need).
4Adjust the angle slider for linear gradients.
5Click Copy CSS and paste the background rule into your stylesheet.

Good to know

Like every JoliTools utility, the gradient generator works entirely in your browser with no sign-up and no cost. Tweak, preview, and copy as much as you like, whether you are styling a personal project or a client deliverable.

Frequently asked questions

Linear gradients blend colors along a straight line at an angle you set (0–360 degrees). Radial gradients radiate outward from a central circle, creating a soft spotlight or vignette effect.

More free tools you might find useful.

New