CSS Gradient Generator

How to use the CSS gradient generator

1. Choose a Gradient type: Linear, Radial or Conic. The large preview at the top updates with every change.
2. For a linear gradient, set the Angle with the slider or type it in degrees (90° goes from left to right, 180° from top to bottom). For a conic gradient, the angle is where the sweep starts.
3. For radial and conic gradients, move the center with Center X and Center Y. A radial gradient can be a Circle or an Ellipse (the Shape menu).
4. Edit the Color stops. Click anywhere on the bar to add a stop there with the color the gradient already has at that point, or use Add stop to fill the widest gap. Drag a handle to move it. Each stop also has a row where you can pick its color, type any CSS color, set its Position (%) or Remove it (a gradient keeps at least two stops).
5. Optionally tick Repeating, choose the Color interpolation, click Reverse to flip the stops or Random gradient for inspiration.
6. Copy the result from CSS code with Copy.

Keyboard: focus a handle on the bar, then use the arrow keys to move it by 1 % (10 % with Shift), Home and End to jump to the ends, and Delete to remove it.

The three gradient functions

• linear-gradient() blends colors along a straight line. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) runs from indigo on the left to pink on the right. Angles are clockwise from the top: 0deg points up, 90deg right.
• radial-gradient() radiates from a center point. radial-gradient(circle at 30% 40%, …) places the center 30 % from the left and 40 % from the top. An ellipse stretches with the box, a circle stays round.
• conic-gradient() sweeps around a center like the hands of a clock. conic-gradient(from 0deg at 50% 50%, …) makes color wheels, pie charts and spinner effects. Stop positions are shares of the full turn.

The Repeating option uses repeating-linear-gradient() and its siblings: the pattern defined by your stops repeats until the box is filled. Put the last stop well below 100 % (for example 20 %) to see stripes or rings.

Two stops at the same position create a hard edge instead of a blend, which is how stripes and flags are made. The generator keeps stops sorted by position in the code, as CSS requires.

sRGB or OKLCH interpolation

By default, browsers blend gradient colors in sRGB. Between two saturated colors, such as blue and yellow, this often creates a dull grey or muddy middle. CSS Color Level 4 lets you choose the interpolation space: linear-gradient(90deg in oklch, …) blends in the perceptual OKLCH space and keeps the middle vivid.

With OKLCH (smoother, with sRGB fallback), the tool writes two background declarations: first the classic sRGB version, then the OKLCH one. Browsers that support interpolation spaces (Chrome and Edge 111+, Safari 16.2+, Firefox 127+) use the second line; older ones ignore it and keep the first.

Tips

• Colors with transparency are accepted in the stop fields, for example #00000080 or rgb(0 0 0 / 50%), which is handy for overlays on images.
• The code is written with background. Use background-image instead if you set other background properties separately.
• Subtle gradients (two close tints of one color) usually look more professional than rainbow blends.