How to use the CSS gradient generator
- Choose a Gradient type: Linear, Radial or Conic.
- Set the direction. For linear, drag the Angle slider, type 0 to 360 or press an arrow button. For radial, pick a Shape and a Position of the center. For conic, set the Start angle and the position.
- Edit the Color stops with the swatch or a hex code, then set Position (0 to 100 percent) and Opacity. Add stop fills the widest gap (up to eight stops) and Reverse flips the gradient.
- Optional: switch Color blending from sRGB to OKLab or OKLCH.
- Press Copy CSS and paste it into a rule such as
.hero { background: ...; }. Give the element a height, because a gradient only fills its own box.
How the CSS is built
The output follows the MDN linear-gradient reference and the W3C CSS Images Module Level 4. A linear gradient is linear-gradient(angle, color position, ...) and angles run clockwise: 0deg points up, 90deg right, 180deg down, 270deg left. A radial gradient is radial-gradient(shape at position, stops) and a conic gradient is conic-gradient(from angle at position, stops), which sweeps clockwise. A stop placed before the one above it is pulled up to match, which makes a hard edge instead of a blend.
Browsers mix in sRGB by default. OKLab and OKLCH add in oklab or in oklch (CSS Color Level 4), which follow how people see lightness, so blends look more even. The generator writes a plain sRGB line first, so older browsers still show a gradient.
Worked example with the default inputs
As the page loads (Linear, Angle 90, a blue stop at 0 percent and a violet stop at 100 percent) the CSS code box shows exactly this:
background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);It runs left to right from #2563eb to #7c3aed. At the halfway point the sRGB mix is about rgb(81, 79, 236).
Limits and edge cases
- You can use 2 to 8 stops. Positions outside 0 to 100 percent are clamped and the field tells you.
- Opacity below 100 switches that stop to
rgba(). The preview sits on a checkerboard. - Include vendor prefixes adds
-webkit-,-moz-and-o-lines for linear and radial gradients. The old syntax measures angles from the right and turns counterclockwise, so the tool converts yours (90deg becomes 0deg). No browser ever shipped a prefixed conic gradient, and every browser since about 2013 reads the unprefixed line, so most projects can skip the box. - A browser that cannot draw OKLab or OKLCH previews sRGB instead and says so.
Frequently asked questions
How do I add a gradient background in CSS?
Paste the line from the CSS code box into the element's rule, for example .hero { background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%); }. The element needs a height, because a gradient only paints its own box.
What is the difference between linear, radial and conic gradients?
A linear gradient blends colors along a straight line at an angle. A radial gradient spreads outward from a center point in a circle or ellipse. A conic gradient sweeps colors around a center point like a color wheel.
Which direction does a CSS gradient angle point?
Angles turn clockwise from the top: 0deg runs from bottom to top, 90deg from left to right, 180deg from top to bottom and 270deg from right to left.
Do I still need -webkit- prefixes for gradients?
Almost never. Browsers have read the unprefixed syntax since about 2013. Tick Include vendor prefixes only for very old browsers. Conic gradients have no prefixed form.
Why does my gradient look gray or muddy in the middle?
Browsers mix in sRGB, and two strong colors far apart on the color wheel pass through a dull midpoint. Switch Color blending to OKLab or OKLCH, or add a livelier stop in the middle.
Pick matching colors with the color palette generator, convert a hex code with the color picker, add depth with the CSS box shadow generator, and shrink your stylesheet with the CSS minifier.