About the CSS Gradient Generator
This CSS gradient generator covers all three gradient functions in one place: linear for a straight blend, radial for one that spreads from the centre outwards, and conic for a sweep around a point. Choose your start and end colours, set the angle, and move the two position sliders to control where each colour reaches full strength. The preview redraws live and a swatch strip shows the computed midpoint, which is often the colour that decides whether a blend looks clean or muddy. The finished background-image declaration is ready to copy.
How to use the CSS Gradient Generator
- 1
Pick a Gradient type — Linear, Radial or Conic.
- 2
Set the Angle slider, which rotates a linear gradient or sets the starting sweep position for a conic one.
- 3
Choose the Start colour and End colour, then move Start position and End position to control where each reaches full strength.
- 4
Adjust Preview radius to see the gradient inside a rounded box, then copy the CSS.
What people use it for
Hero section backgrounds
A linear gradient at 135 degrees between two close hues gives a hero panel depth without an image request, and it scales to any viewport without artefacts.
Spotlight effects behind content
A radial gradient from a light tint to the page background creates a soft glow behind a headline that draws the eye to the centre of the composition.
Pie and donut charts in pure CSS
Conic gradients with hard stops at matching percentages produce a chart segment without any SVG or JavaScript, and animate cheaply with a CSS variable.
Gradient borders and text
Generate the gradient here, then apply it through background-clip: text for gradient type, or as a background on a wrapper with padding to fake a gradient border.
How CSS gradient angles work
The angle in linear-gradient names the direction the gradient travels towards, measured from the upward vertical and increasing clockwise. So 0deg runs from the bottom edge to the top, 90deg runs left to right, 180deg runs top to bottom and 270deg runs right to left. This trips people up because it differs from the convention used in trigonometry and in SVG, where zero points right and angles increase anticlockwise. There is also a keyword form: to bottom right and its relatives, which behave subtly differently from a fixed angle. A keyword corner gradient adjusts its actual angle so the transition line meets the corner exactly, meaning the same declaration produces different angles on a square and on a wide banner. A numeric angle stays fixed regardless of the box's aspect ratio. Conic gradients read the angle differently again: the from value sets where the sweep begins, with 0deg at twelve o'clock, and the sweep always runs clockwise.
Colour stops, hard stops and the grey dead zone
A colour stop is a colour plus an optional position. Between two stops the browser interpolates, and the position values decide where each colour holds solid. Setting the start to 20 percent and the end to 80 percent means the first fifth is flat start colour, the middle blends and the last fifth is flat end colour. Give both stops the same position and no interpolation happens at all, producing a hard edge — the basis for stripes, progress bars and CSS pie charts. The blend itself has a well-known problem: browsers interpolate in gamma-encoded sRGB by default, so a gradient between complementary hues passes through a desaturated grey in the middle rather than through a colourful mid-tone. Blue to yellow is the classic offender. The fix is either to insert a hand-picked middle stop, or to use the modern in oklab or in oklch syntax, which interpolates in a perceptually uniform space and keeps the midpoint saturated.
Tips
- Use background-image rather than the background shorthand so you do not silently reset background-color and background-position.
- Gradients themselves cannot be transitioned — animate background-position on an oversized gradient, or cross-fade two stacked layers instead.
- Add a matching background-color fallback for the rare browser or email client that ignores gradient syntax.