CSS Gradient Generator

Blend two colours into a linear, radial or conic gradient, check it on a live box, and copy a background-image rule that works in every current browser.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Live preview

Preview

CSS

.element {
  background-image: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
  border-radius: 16px;
}

Colours

Start

Midpoint

End

Quick answers

What is the CSS for a simple two colour gradient?: background-image: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); The first value is the direction, then each colour with the position where it is fully that colour. Swap in your own hex codes and angle.
Which angle makes a gradient go top to bottom?: 180deg. In linear-gradient, 0deg points up, and the angle increases clockwise, so 90deg runs left to right, 180deg runs top to bottom and 270deg runs right to left. If you leave the angle out, the browser uses 180deg.
How do I make a hard line between two colours instead of a blend?: Give both colours the same position. With Angle at 90 and both Start position and End position at 50, the tool writes linear-gradient(90deg, #6366f1 50%, #ec4899 50%), a clean split down the middle with no fade.
What is the difference between linear, radial and conic gradients?: A linear gradient changes colour along a straight line. A radial gradient changes colour outwards from a centre point, like a glow. A conic gradient changes colour as it rotates around a centre point, like the hand of a clock sweeping a full turn.
Should I use background or background-image for a gradient?: Either works. A gradient is an image, so background-image is the exact property and leaves background-color, position and size alone. The background shorthand resets those other values, which can remove a fallback colour you set earlier.
Why does my gradient look grey in the middle?: Browsers blend the red, green and blue channels separately by default. Opposite colours average out to grey: pure blue (#0000ff) to pure yellow (#ffff00) passes through #808080. Choose colours closer together on the colour wheel, or add a hand-picked middle stop to the copied code.

What CSS Gradient Generator does

This tool writes a two-colour CSS gradient for you. Choose Linear, Radial or Conic, pick a start and end colour, and the output is a ready rule such as background-image: linear-gradient(135deg, #6366f1 0%, #ec4899 100%). The Angle slider turns a linear gradient or sets where a conic sweep begins, and the two position sliders decide where each colour stops being solid and the blend starts. Below the code, three swatches show the start, the end and the computed midpoint, which for the default pair is #a857c5. That midpoint is the quickest way to spot a blend that will look grey or muddy in the middle before you ship it.

Linear-gradient angle chart: degrees and directions

The angle names the direction the gradient travels towards. The start colour sits at the opposite side.

Angle	Direction	Start colour sits at	Keyword equivalent
0deg	Bottom to top	Bottom edge	to top
45deg	Towards the top right	Bottom left	None (fixed 45 degree angle)
90deg	Left to right	Left edge	to right
135deg	Towards the bottom right	Top left	None (fixed 135 degree angle)
180deg	Top to bottom	Top edge	to bottom
225deg	Towards the bottom left	Top right	None (fixed 225 degree angle)
270deg	Right to left	Right edge	to left
315deg	Towards the top left	Bottom right	None (fixed 315 degree angle)
360deg	Bottom to top	Bottom edge	to top (same as 0deg)

Corner keywords such as to bottom right are not the same as 135deg. A keyword adjusts the angle to the shape of the box so that the halfway colour runs in a straight line between the other two corners. A numeric angle stays fixed, and only matches the keyword on a perfect square.

Gradient CSS examples from the generator

Each result shows the two declarations the tool writes inside its .element rule for the inputs shown. Fields that are not mentioned stay at their defaults.

Diagonal hero background

Gradient type Linear, Angle 135, Start colour #6366f1, End colour #ec4899, positions 0 and 100

background-image: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); border-radius: 16px;

Midpoint swatch: #a857c5, a clean purple, so the blend stays colourful all the way across.

Warm left-to-right button fill

Gradient type Linear, Angle 90, Start colour #ff7e5f, End colour #feb47b

background-image: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%); border-radius: 16px;

Midpoint swatch: #ff996d.

Soft spotlight behind a heading

Gradient type Radial, Start colour #ffffff, End colour #3b82f6

background-image: radial-gradient(circle at 50% 50%, #ffffff 0%, #3b82f6 100%); border-radius: 16px;

White sits in the centre and the blue is reached at the corners of the box.

Two-tone split with no fade

Gradient type Linear, Angle 90, Start position 50, End position 50

background-image: linear-gradient(90deg, #6366f1 50%, #ec4899 50%); border-radius: 16px;

Solid edges with a blended middle band

Gradient type Linear, Angle 90, Start position 25, End position 75, Preview radius 0

background-image: linear-gradient(90deg, #6366f1 25%, #ec4899 75%); border-radius: 0px;

The first quarter is flat start colour, the last quarter is flat end colour, and the fade happens in between.

Half-and-half disc

Gradient type Conic, Angle 90, Start position 50, End position 50, Preview radius 80

background-image: conic-gradient(from 90deg at 50% 50%, #6366f1 50%, #ec4899 50%); border-radius: 80px;

Hard conic stops are how pure CSS pie charts are drawn.

Midpoint colour of common two-colour gradients

The Midpoint swatch is the colour halfway between your two stops. A grey or olive midpoint warns of a dull band in the centre of the blend.

Start colour	End colour	Midpoint	How the blend reads
#0000ff (blue)	#ffff00 (yellow)	#808080	Neutral grey band in the middle
#ff0000 (red)	#00ff00 (green)	#808000	Dark olive in the middle
#ff0000 (red)	#ffff00 (yellow)	#ff8000	Clean orange
#000000 (black)	#ffffff (white)	#808080	Even greyscale ramp
#00c6ff	#0072ff	#009cff	Clean blue
#11998e	#38ef7d	#25c486	Clean green
#8e2de2	#4a00e0	#6c17e1	Clean violet
#f7971e	#ffd200	#fbb50f	Clean amber
#ee0979	#ff6a00	#f73a3d	Clean red
#fc466b	#3f5efb	#9e52b3	Slightly dusty purple

The midpoint is the plain average of the two colours' red, green and blue values, which matches how browsers blend a gradient unless you ask for another colour space.

How the angle and position sliders behave for each gradient type

Linear: Angle is the direction of travel and the two positions are measured along that line. Start position 0 and End position 100 fades across the whole box. Raising the start or lowering the end leaves a solid band of colour at that side.

Radial: the output is always a circle centred in the box, written as circle at 50% 50%. Angle has no effect. Positions are measured from the centre outwards, and 100% lands on the farthest corner of the box, so the end colour is only fully reached in the corners. Lower End position to bring the end colour inside the box.

Conic: Angle becomes the from value, the point on the clock face where the sweep begins, with 0deg at twelve o'clock. The sweep always runs clockwise, and positions are percentages of a full turn. Because the end colour meets the start colour again where the turn completes, a two-colour conic gradient always has one sharp seam at the starting angle. That is expected, not a rendering fault.

Using the copied rule for gradient text and gradient borders

The tool outputs a background for a box. The same gradient value works in other places with a few extra lines that you add yourself.

Gradient text: put the background-image on the text element, then add background-clip: text, the -webkit-background-clip: text prefix for older Safari and Chrome, and color: transparent. The gradient then shows only through the letter shapes.

Gradient border: border-color cannot be a gradient, and border-image accepts one but ignores border-radius. For a rounded gradient border, put the gradient on a wrapper with a few pixels of padding and a border-radius, and give the inner element a solid background and a slightly smaller radius. The strip of wrapper that shows around the edge is the border.

Fallback: add a plain background-color in one of the two colours on the line before the gradient. It shows in any email client or old browser that drops the gradient.

What this generator does not do

It builds gradients with exactly two colour stops. For three or more colours, copy the rule and add the extra stops by hand between the two it gives you.
Radial gradients are always a centred circle. Ellipses and off-centre positions need editing in the copied code.
There is no transparency slider, so fades to transparent have to be written by hand.
It does not output repeating-linear-gradient, or the newer in oklch and in oklab interpolation options.
Preview radius is included in the copied rule as border-radius. Delete that line if you only want the background.

How to use it

1
Choose a Gradient type: Linear for a straight blend, Radial for a circle spreading from the centre, or Conic for a sweep around the centre.
2
Drag Angle between 0 and 360 degrees. It sets the direction of a linear gradient and the starting point of a conic one. Radial ignores it.
3
Pick the Start colour and End colour.
4
Move Start position and End position to set where each colour holds solid. The start must not be greater than the end.
5
Set Preview radius if you want to see the gradient on a rounded box, then copy or download the CSS.

Answers to common questions

Can I add a third colour to the gradient?

Not inside the tool, which works with two stops. Copy the rule and insert another colour and position between them, for example linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%). Stops must be listed in order of position.

Can CSS gradients be animated?

A transition between two different gradients does not fade smoothly in most browsers; it snaps. The usual workarounds are to make the gradient larger than the box with background-size and animate background-position, or to stack two layers and fade the opacity of the top one.

Do I still need vendor prefixes like -webkit-linear-gradient?

No. Unprefixed linear-gradient and radial-gradient have worked in every major browser for over a decade, and conic-gradient is supported in all current versions of Chrome, Edge, Firefox and Safari. The tool outputs the standard syntax only.

Why does the tool say the start position must come before the end position?

The start colour's position cannot be greater than the end colour's. If Start position is 80 and End position is 20, the tool stops and asks you to fix it. Equal values are allowed and give a hard edge.

Why does my radial gradient not reach the end colour at the edges?

A radial gradient written as a circle with no size reaches its 100% point at the farthest corner of the box, so the middle of each edge is still part-way through the blend. Lower End position, for example to 70, to bring the full end colour closer to the centre.

Does a gradient background slow a page down?

A gradient is drawn by the browser, so there is no image file to download and it stays sharp at any size or screen density. For a simple two-colour background it is lighter than an equivalent image.

How do I make the gradient cover the whole page?

Apply the rule to body and add min-height: 100vh so the body is at least as tall as the window. Without a height, the gradient only covers the content and repeats or stops short on short pages.