CSS Gradient Generator Code

How the Gradient Maker works

CSS gradient generator code: linear, radial and conic

CSS gradients are images generated by the browser rather than downloaded, which means they cost no network request, scale to any size without artefacts, and can be animated by regenerating them. There are three functions and they differ only in how they lay the colour stops out in space.

Linear gradients run along an angle. linear-gradient(135deg, …) interpolates along a line at that angle. CSS angles here start at 0deg pointing up and increase clockwise, so 90deg runs left to right and 180deg runs top to bottom — a common source of confusion for anyone expecting the mathematical convention. You can also use keywords: to bottom right is often clearer than computing the angle for a specific box.

Radial gradients run outward from a point. radial-gradient(circle at 50% 50%, …) puts the first colour at the centre and the last at the edge. The shape can be circle or ellipse, and the sizing keywords — closest-side, farthest-corner and friends — decide where "the edge" is on a non-square element. farthest-corner is the default and usually what you want for a background wash.

Conic gradients sweep around a point. conic-gradient(from 135deg at 50% 50%, …) rotates the stops around the centre rather than moving out from it. This is what makes pie charts, colour wheels and progress rings possible in pure CSS, and pairing one with mask or border-radius produces effects that used to require SVG.

Colour stops are positions along that path. Each stop is a colour and an optional position, and the browser interpolates smoothly between neighbours. Two stops at the same position produce a hard edge rather than a blend, which is how you get stripes: repeat pairs of identical positions and the gradient becomes a set of solid bands.

Banding, and how to avoid it. Interpolating between two colours of similar lightness but different hue often produces a muddy grey band in the middle, because the shortest path in sRGB passes through desaturated territory. Adding a deliberate middle stop — as this tool does — steers the interpolation through a colour you chose rather than one the maths picked. Modern CSS can also interpolate in Oklab or Oklch, which avoids the problem at the cost of narrower browser support.

They are images, so they follow image rules. A gradient can be used anywhere a background-image can: layered with commas, sized with background-size, repeated, or clipped to text with background-clip: text. It cannot be used where a <color> is expected, which is why border-image or a padded wrapper is needed for a gradient border.

Accessibility still applies. Text over a gradient has a different contrast ratio at every point along it, and the failing region is usually the lightest end. Check the worst case rather than the average, and consider a translucent scrim behind the text if the range is wide.

Related tools