CSS Gradients Explained: Linear, Radial and Conic (With Examples)

The short answer

A CSS gradient is an image the browser draws from colours you list, so you get a smooth background without any image file. There are three main types:

• linear-gradient() blends colours along a straight line at an angle.
• radial-gradient() blends outward from a centre point in a circle or ellipse.
• conic-gradient() sweeps colours around a centre point, like the hands of a clock.

The CSS Gradient Generator lets you pick the type, angle and colour stops with a live preview, then copy the finished background rule.

Building a gradient with the generator

Open the CSS Gradient Generator.

Choose linear, radial or conic.

For linear and conic, set the Angle with the slider (0° to 360°).

Edit the Color stops: click a swatch to pick a colour and drag its slider to set the position from 0% to 100%. Click + Add stop for more colours; click × to remove one (a gradient keeps at least two).

Or start from a preset: Sunset, Ocean, Forest, Dusk, Fire, Rose, Sky or Gold. Clicking a preset switches the type to linear.

Click Copy CSS. You get one line such as background: linear-gradient(135deg, #4f6ef7 0%, #7c3aed 100%);.

Paste it into the CSS rule for your element. Gradients are images, so they go in background or background-image, not in background-color.

Linear gradients

background: linear-gradient(135deg, #4f6ef7 0%, #7c3aed 100%);

The angle sets the direction the gradient travels:

Angle	Direction	Keyword equivalent
0deg	Bottom to top	to top
90deg	Left to right	to right
180deg	Top to bottom (the default)	to bottom
270deg	Right to left	to left
135deg	Top-left to bottom-right	(close to to bottom right)

Note that to bottom right is not always the same as 135deg: the keyword aims at the corner, so its angle changes with the element's shape, while 135deg is fixed.

Radial gradients

background: radial-gradient(circle, #4facfe 0%, #00f2fe 100%);

The first colour sits at the centre and later colours spread outward. The generator outputs a circle centred in the element. In your own CSS you can change both:

• radial-gradient(ellipse, ...) stretches to the element's shape. Ellipse is the CSS default if you leave the shape out.
• radial-gradient(circle at top left, ...) moves the centre. The at position accepts the same values as background-position.

Radial gradients work well for soft spotlights behind a heading or a subtle vignette on a hero section.

Conic gradients

background: conic-gradient(from 90deg, #f093fb 0%, #f5576c 100%);

Colours rotate around the centre. The gradient starts at the top (12 o'clock) and runs clockwise; from 90deg rotates the starting point to 3 o'clock. In the generator, the Angle slider sets this from value.

Conic gradients are useful for colour wheels, loading spinners and simple pie charts. For a pie chart, use hard stops (below) so each slice has a clean edge.

According to MDN, conic-gradient() has worked across major browsers since November 2020, so it is safe for current browsers. Linear and radial gradients have been supported for much longer.

Colour stops and hard edges

Each colour stop is a colour and an optional position. A few patterns cover most needs:

• Even blend: #f093fb 0%, #f5576c 100%.
• Three colours: add a middle stop, like the Sky preset: #7F7FD5 0%, #86A8E7 50%, #91EAE4 100%.
• Hard edge (stripes): give two stops the same position: #4f6ef7 50%, #7c3aed 50% switches colour instantly at the halfway point.
• Pie chart: conic-gradient(#4f6ef7 0% 40%, #10b981 40% 75%, #f59e0b 75% 100%) makes three slices of 40%, 35% and 25%. Typing two positions per colour like this is valid CSS; edit the copied code by hand to do it.

Stops should be in ascending order. If a later stop has a smaller position than an earlier one, the browser treats it as equal to the earlier position, which creates a hard edge you may not expect. When you add a stop in the generator it starts at 50%, so drag it into place.

Making text readable on a gradient

Gradients often sit behind text, and contrast changes across the gradient. Check the lightest part of the gradient against your text colour and the darkest part against it too. White text on the Fire preset (orange to yellow) fails at the yellow end, for example. Practical fixes:

• Use a darker gradient behind white text, or a lighter one behind dark text.
• Add a semi-transparent overlay: background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), linear-gradient(135deg, #f7971e, #ffd200);. Multiple backgrounds stack, with the first listed on top.
• Keep important text over the most even part of the gradient.

The Color Picker helps you grab exact HEX values, and the Color Palette Generator suggests colours that work together.

Gradient text and borders

Two popular effects use the copied gradient:

• Gradient text: set the gradient as the background, then background-clip: text; and color: transparent;. Always test that the text is still readable.
• Gradient border: a common approach is a gradient background on an outer element with padding, and a solid background on an inner element.

Common mistakes

• Putting a gradient in background-color. It is ignored; use background or background-image.
• Expecting the angle to mean the same thing as in design tools. In CSS, 0deg points up and angles go clockwise.
• Forgetting a fallback colour for very old browsers or email clients: put background-color: #4f6ef7; before the gradient line.
• Too many similar stops, which can cause visible banding on large areas. Two or three well-chosen colours usually look cleaner.