CSS Gradient Generator

What it does

The CSS Gradient Generator turns a gradient type, an angle, and a small set of color stops into a ready-to-paste background CSS declaration. Choose linear, radial, or conic, pick up to three colors with a position percentage each, and the generated CSS updates instantly as you adjust the controls.

Linear vs. radial vs. conic gradients

• Linear gradient — colors transition along a straight line at a chosen angle. 0deg points up, 90deg points right, 180deg points down, and so on around the circle. This is the most common gradient type, used for backgrounds, buttons, and overlays.

  background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);

• Radial gradient — colors radiate outward from a center point instead of along a line, producing a circular or elliptical blend. There's no angle to set; the browser's default shape (an ellipse sized to the farthest corner, centered on the element) covers the vast majority of use cases.

  background: radial-gradient(#464aff 0%, #00d4ff 100%);

• Conic gradient — colors sweep around a center point like a color wheel or pie chart, rather than blending along a line or radiating outward. The angle sets where the sweep starts.

  background: conic-gradient(from 45deg, #ff0000 0%, #00ff00 50%, #0000ff 100%);

Color stops and positions

Each color stop pairs a color with a position percentage (0-100%) along the gradient. Position 0% is where the gradient starts and 100% is where it ends; stops in between control where each color reaches full strength. This tool supports two required color stops plus an optional third — enough to build the vast majority of two- and three-color gradients used in real designs. Stops are automatically ordered by position, so it doesn't matter what order you enter them in.

How to use it

1. Choose a Gradient Type: Linear, Radial, or Conic.
2. For Linear and Conic gradients, set the Angle — the direction of the blend for linear, or the starting point of the sweep for conic.
3. Pick Color 1 and Color 2 with their positions — these define the start and end of the gradient.
4. Toggle Add a third color stop if you want a middle color, and set its color and position.
5. Copy the generated background declaration from the code output and paste it into your stylesheet.

FAQ

Why doesn't the radial gradient have shape or position options? The browser defaults — an ellipse sized to the farthest corner, centered on the element — already match how most radial gradients are used. If you need a circle instead of an ellipse, or an off-center gradient, add the circle keyword or an at <position> clause to the generated CSS by hand.

Can I use more than three color stops? This tool caps at three to keep the interface simple. For gradients with more stops, take the generated CSS and extend the comma-separated list of <color> <position>% pairs manually — the syntax is the same regardless of how many stops you add.

What does the angle mean for a conic gradient? It's the angle (in degrees) where the color sweep begins, measured clockwise from the top. 0deg starts the sweep at 12 o'clock; 90deg starts it at 3 o'clock.

Does this tool store or upload anything? No. All calculations run locally in your browser — your color and position values never leave your device.