CSS Gradient Generator

Angles and Directions

Build linear, radial, and conic CSS gradients visually, then copy the generated background rule. For linear gradients, adjust the angle in degrees: 0deg points upward, 90deg points right, 180deg points downward, and 270deg points left.

Understanding the Generated CSS

The output sets background on a .gradient class; rename the class to your own selector or paste the declaration into an existing rule. For linear gradients, the angle controls the direction — 0deg points upward (bottom-to-top), 90deg points right (left-to-right), and 180deg points downward (top-to-bottom). For radial gradients, the syntax specifies the shape and its position before the color list. For conic gradients, from sets the starting angle and at sets the sweep center.

Example: the Default Linear Gradient

The tool opens on Linear at 90deg with a blue and a violet stop:

.gradient {
  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
}

Click Top and the angle becomes 0deg, so the blue stop sits at the bottom edge and violet at the top. An angle is measured clockwise from “to top” (CSS Images Level 3 §3.1), and the gradient line is long enough for the corners to receive the first and last colors exactly, so 45deg on a wide box is not the same as to top right.

Example: a Two-Slice Pie With Conic Stops

Switch to Conic, keep from 0deg and center, set the stops to #3b82f6 at 0% and 40%, add two stops, and set both to #f59e0b, one at 40% and one at 100%. When two stops share a position, the color of the upper row comes first, and the rows re-sort when you leave a position box, so check the row order after the edits. The output is:

.gradient {
  background: conic-gradient(from 0deg at center, #3b82f6 0%, #3b82f6 40%, #f59e0b 40%, #f59e0b 100%);
}

Two stops at the same percentage make a hard edge, so the box shows a 40% blue slice starting at 12 o’clock and the rest in amber. Add border-radius: 50% and an equal width and height to turn it into a pie. Add a text label next to it: screen readers get nothing from a background.

Limits

• Two to six stops, each with a whole-number position from 0 to 100%. Lengths (20px), double positions (#3b82f6 0% 40%) and transition hints need a manual edit.
• Stops are written in position order. The CSS lists stops from the lowest position to the highest, and the rows move into that order when you leave a position box. Two stops at the same position keep the order of the list, which is how a hard edge is made (the pie chart example above). Positions outside 0–100 are written as 0% or 100%.
• sRGB blending. Hex stops interpolate in gamma-encoded sRGB, the compatibility rule for legacy colors in CSS Color 4, so complementary colors pass through a dull, grayish middle. Writing linear-gradient(in oklch 90deg, …) by hand avoids that in Chrome 111, Firefox 127 and Safari 16.2 and later (MDN browser compat data).
• Fixed positions and shapes. Radial and conic centers come from nine keywords; radial size is always the default farthest-corner. Repeating gradients and multiple layered backgrounds are not generated.
• Hex colors only. The text field accepts a 6-digit code with #; there is no alpha, so for a fade to transparent replace the last stop with transparent or an rgba() value after copying.

To build a set of related stop colors, start from the color palette generator or the color shades generator.

Common Use Cases

CSS gradients are used for hero section backgrounds, card headers, button fills, progress bars, decorative overlays, and text fill effects (via background-clip: text). Conic gradients are especially useful for pie charts and color-wheel pickers rendered purely in CSS.