Skip to content

Linear Gradient Maker

DesignGradients, Patterns and Effects

0 points up, 90 points right, 180 points down.

Hex code, 3 or 6 digits.

Colour stops
CSS declaration —
Colour at 50%
—
Keyword equivalent
—
Colour stops
—

Set a direction in degrees, enter a start and end hex colour, and optionally a middle stop, and the maker writes the CSS background declaration. For example, 90deg from #ff0000 to #0000ff gives linear-gradient(90deg, #ff0000 0%, #0000ff 100%), and the colour halfway along is #800080.

About this tool

Front-end developers and designers who hand-write CSS often need a gradient line they can paste straight into a stylesheet, plus the actual colours the browser will paint along the way. This maker takes an angle, two hex colours and an optional middle stop with its position, and returns a ready declaration with every stop written as a percentage. It also samples the gradient at five points and lists each one in hex and RGB, which helps when you need a matching flat fallback colour or want to check where a band of colour lands. Short codes like #f00 are expanded to six digits. One limit: the samples assume the default sRGB interpolation; if you add an 'in oklch' hint to the CSS yourself, the browser will blend through different in-between colours.

How to use it

  1. Set the direction

    Drag the Direction slider or type an angle; 90 runs left to right, 180 top to bottom.

  2. Enter the colours

    Type hex codes for the start and end colours, with or without the leading #.

  3. Add a middle stop if needed

    Choose Add a middle colour, then set its hex code and its position along the line.

  4. Copy the declaration

    Copy the CSS line and check the sampled colours in the table for a fallback background.

Examples

Red to blue, left to right

Direction
90
Start colour
#ff0000
End colour
#0000ff
Colour stops
Two colours

Result CSS declaration: background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
Colour at 50%: #800080
Keyword equivalent: to right
Colour stops: 2

  1. Angle 90deg: 0deg points up, 90deg points right, angles turn clockwise.
  2. Stops: #ff0000 0%, #0000ff 100%.
  3. Colour at 50% = component-wise sRGB mix of the neighbouring stops = #800080.

At 90deg the gradient runs left to right; the halfway colour is a plain purple, #800080, because each channel is averaged.

Black, white, black from top to bottom

Direction
180
Start colour
#000
End colour
#000
Colour stops
Add a middle colour
Middle colour
#fff
Middle stop position
50

Result CSS declaration: background: linear-gradient(180deg, #000000 0%, #ffffff 50%, #000000 100%);
Colour at 50%: #ffffff
Keyword equivalent: to bottom
Colour stops: 3

  1. Angle 180deg: 0deg points up, 90deg points right, angles turn clockwise.
  2. Stops: #000000 0%, #ffffff 50%, #000000 100%.
  3. Colour at 50% = component-wise sRGB mix of the neighbouring stops = #ffffff.

Short hex codes expand to six digits, and a middle stop at 50% gives a bright band across the centre.

Diagonal sunset at 135deg

Direction
135
Start colour
#ff7e5f
End colour
#feb47b
Colour stops
Two colours

Result CSS declaration: background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
Colour at 50%: #ff996d
Keyword equivalent: none (angle only)
Colour stops: 2

  1. Angle 135deg: 0deg points up, 90deg points right, angles turn clockwise.
  2. Stops: #ff7e5f 0%, #feb47b 100%.
  3. Colour at 50% = component-wise sRGB mix of the neighbouring stops = #ff996d.

A corner-to-corner blend from coral to peach; 135deg has no single keyword, so the angle is written out.

How it is calculated

colour(p) = A + (B − A) × (p − pA) ÷ (pB − pA), per red, green and blue channel

p
position along the gradient line, 0 to 100%
A, B
the RGB values of the stops either side of p
pA, pB
the positions of those two stops

CSS measures gradient angles clockwise from straight up, so 0deg is 'to top' and 90deg is 'to right'. Between two stops the browser blends each sRGB channel in a straight line, which is what the table reproduces. Values are rounded to whole channel numbers before being written as hex.

When not to use it

  • For radial or conic gradients, which need a centre point and a different CSS function.
  • When you plan to interpolate in OKLCH or another colour space, since the sampled colours here assume sRGB.

Common mistakes

  • Expecting 0deg to run left to right; in CSS it points up, and 90deg runs left to right.
  • Pairing two complementary colours and getting a muddy grey middle; a middle stop fixes that.

Frequently asked questions

Which way does 0deg point in a CSS gradient?

Up. CSS gradient angles start at the top and turn clockwise, so 90deg ends on the right, 180deg at the bottom and 270deg on the left. This differs from the maths convention where 0 degrees points right.

Why does red to blue pass through purple?

Browsers blend each red, green and blue channel separately in sRGB by default. Halfway between rgb(255,0,0) and rgb(0,0,255) is rgb(128,0,128), a mid purple, which is the 50% value shown in the table.

Can I use colour names or rgb() values?

This maker reads hex codes only, three or six digits, with or without the leading hash. Convert a named colour or an rgb() value to hex first, for example red becomes #ff0000.

What does the middle stop position change?

It moves where the middle colour is at full strength. At 30% the first blend is short and sharp and the second is long and gentle; at 50% both halves are the same length.

Do I need vendor prefixes for linear-gradient?

No. Unprefixed linear-gradient() with an angle in degrees has worked in every major browser for many years, so the plain declaration is enough for current Chrome, Firefox, Safari and Edge.

What is the Keyword equivalent?

For 0, 90, 180, 270 and 360 degrees CSS also accepts the keywords to top, to right, to bottom and to left. Other angles, such as 135deg, have no exact keyword because corner keywords depend on the box shape.

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). Linear Gradient Maker. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/design/gradients-patterns-and-effects/linear-gradient-maker/

MLA

Tools Directory Editorial Team. “Linear Gradient Maker.” Tools Directory, 26 Oct. 2026, https://tools.milunir.com/design/gradients-patterns-and-effects/linear-gradient-maker/. Accessed 26 Oct. 2026.

Chicago

Tools Directory Editorial Team. “Linear Gradient Maker.” Tools Directory. Last modified October 26, 2026. Accessed October 26, 2026. https://tools.milunir.com/design/gradients-patterns-and-effects/linear-gradient-maker/.

Link<a href="https://tools.milunir.com/design/gradients-patterns-and-effects/linear-gradient-maker/">Linear Gradient Maker – Tools Directory</a>