Skip to content

CSS Gradient Generator

DesignGradients, Patterns and Effects
Gradient type

0deg points up, 90deg points right.

Adds a third stop; stops are spaced evenly.

CSS gradient —
CSS declaration
—
Solid fallback
—
Midpoint colour
—
Colour stops
—

Pick a gradient type, set the angle and enter two or three hex colours; the generator writes the CSS value and a ready background-image declaration. Red #ff0000 to blue #0000ff at 90deg gives linear-gradient(90deg, #ff0000 0%, #0000ff 100%), with #800080 as the solid fallback colour.

About this tool

Hand-writing gradient syntax means remembering where the angle goes, how conic gradients take a from keyword and how stop percentages are spaced. This generator assembles the value for you from hex colours and an angle, then gives the full background-image line to paste into a stylesheet. It also averages the first and last colours channel by channel to suggest a solid background-color, which keeps text readable while an image layer loads or in old email clients. Three-digit codes like #f60 are expanded to six digits. The tool covers evenly spaced stops with up to three colours; uneven positions, transparency and repeating gradients need a small manual edit to the output.

How to use it

  1. Choose the type

    Select Linear, Radial or Conic with the segmented buttons.

  2. Set the angle

    For linear and conic gradients, drag the slider or type an exact number of degrees.

  3. Enter colours

    Type two hex colours, and a third one if you want a middle stop.

  4. Copy the CSS

    Copy the gradient value or the full declaration, plus the fallback line, into your stylesheet.

Examples

Red to blue, left to right

Gradient type
Linear
Angle
90
First colour
#ff0000
Second colour
#0000ff

Result CSS gradient: linear-gradient(90deg, #ff0000 0%, #0000ff 100%)
CSS declaration: background-image: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
Solid fallback: background-color: #800080;
Midpoint colour: #800080
Colour stops: 2

  1. Stops are spaced evenly: 0%, 100%.
  2. Midpoint of first and last colour = average of each sRGB channel = #800080, used as a solid fallback.

A 90-degree linear gradient runs from the left edge to the right; the purple midpoint doubles as a solid fallback colour.

Three-stop radial glow

Gradient type
Radial
First colour
fff
Second colour
#f60
Third colour (optional)
#000

Result CSS gradient: radial-gradient(circle, #ffffff 0%, #ff6600 50%, #000000 100%)
CSS declaration: background-image: radial-gradient(circle, #ffffff 0%, #ff6600 50%, #000000 100%);
Solid fallback: background-color: #808080;
Midpoint colour: #808080
Colour stops: 3

  1. Stops are spaced evenly: 0%, 50%, 100%.
  2. Midpoint of first and last colour = average of each sRGB channel = #808080, used as a solid fallback.

Three-digit hex codes are expanded, and the middle orange stop lands at 50%.

Conic sweep from 45 degrees

Gradient type
Conic
Angle
45
First colour
#00cc66
Second colour
#3366ff

Result CSS gradient: conic-gradient(from 45deg, #00cc66 0%, #3366ff 100%)
CSS declaration: background-image: conic-gradient(from 45deg, #00cc66 0%, #3366ff 100%);
Solid fallback: background-color: #1a99b3;
Midpoint colour: #1a99b3
Colour stops: 2

  1. Stops are spaced evenly: 0%, 100%.
  2. Midpoint of first and last colour = average of each sRGB channel = #1a99b3, used as a solid fallback.

The colours sweep around the centre starting at 45 degrees, like a colour wheel segment.

How it is calculated

linear-gradient(θdeg, c1 0%, …, cn 100%); stop k position = (k − 1) ÷ (n − 1) × 100%; fallback = per-channel mean of c1 and cn

θ
direction in degrees; 0deg points up and angles turn clockwise
c1 … cn
the colour stops, written as six-digit hex
n
number of colour stops, two or three

Stops are spread evenly from 0% to 100%. Radial gradients use a circle shape from the centre, and conic gradients start at the chosen angle with the from keyword. The fallback colour averages the red, green and blue channels of the first and last colours, which is the halfway point browsers draw by default in sRGB.

When not to use it

  • Designs that need transparent stops or rgba colours, which this generator does not accept.
  • Mesh-like effects with many layered gradients, which are easier to build in a design app.

Common mistakes

  • Assuming 0deg runs left to right; in CSS it points upward, and 90deg runs left to right.
  • Setting the gradient on background-color, which only takes solid colours, instead of background-image.
  • Leaving out a solid fallback, so text sits on an empty background if the gradient fails.

Frequently asked questions

What is the difference between linear, radial and conic gradients?

A linear gradient blends along a straight line at the chosen angle. A radial gradient spreads outward from the centre in rings. A conic gradient sweeps around the centre like the hands of a clock, which suits pie-style shapes and colour wheels.

Why is 90deg left to right?

In CSS gradient angles, 0deg points to the top of the box and angles increase clockwise. So 90deg points right, 180deg points down and 270deg points left. The keyword form to right is equivalent to 90deg.

Which browsers support conic-gradient?

Conic gradients are supported in current Chrome, Edge, Firefox and Safari releases. Very old browsers ignore the declaration, which is why a solid background-color line before it is useful.

How is the fallback colour chosen?

It averages the red, green and blue values of the first and last colours. For red and blue that gives #800080, the purple a browser draws at the centre of the default sRGB blend.

Can I use colour names like red or tomato?

Not in the inputs; enter hex codes. Three-digit shorthand such as #f60 works and is expanded to #ff6600 in the output. You can replace a hex code for a named colour in the copied CSS afterwards.

How do I make a hard edge instead of a smooth blend?

Give two neighbouring stops the same position in the copied CSS, for example #f60 50%, #000 50%. The browser then switches colour abruptly at that point.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 26). CSS Gradient Generator. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/design/gradients-patterns-and-effects/css-gradient-generator/

MLA

Tools Directory Editorial Team. “CSS Gradient Generator.” Tools Directory, 26 Oct. 2026, https://tools.milunir.com/design/gradients-patterns-and-effects/css-gradient-generator/. Accessed 26 Oct. 2026.

Chicago

Tools Directory Editorial Team. “CSS Gradient Generator.” Tools Directory. Last modified October 26, 2026. Accessed October 26, 2026. https://tools.milunir.com/design/gradients-patterns-and-effects/css-gradient-generator/.

Link<a href="https://tools.milunir.com/design/gradients-patterns-and-effects/css-gradient-generator/">CSS Gradient Generator – Tools Directory</a>