Gradient Generator

CSS —

Colour at 50%: —
End-colour contrast ratio: —
Colour stops: —

Pick a start and end hex colour, an optional middle stop and an angle, and the generator writes the CSS background rule. For example, #000000 to #ffffff at 90deg gives linear-gradient(90deg, #000000 0%, #ffffff 100%), whose halfway colour is #808080.

About this tool

Front-end developers and designers hand-write gradient rules often enough to forget the syntax: whether the angle comes first, whether stops need percentages, and what colour the ramp actually passes through. This generator takes two or three hex colours and either an angle or a circular radial shape, and returns a ready background declaration. Below the code it lists the interpolated colour at every 10% position as hex and RGB, the colour at the midpoint, and the WCAG contrast ratio between the two ends, which hints at how visible the blend will be. It does not render a preview swatch, and it uses plain sRGB interpolation, the browser default, rather than newer spaces such as OKLCH that some browsers accept.

How to use it

Choose linear or radial
Linear shows an angle slider; radial makes a circle spreading from the centre.
Enter the colours
Type hex values such as #ff7a00 or the short form #f70 for the start and end.
Add a middle stop
Switch Colour stops to three to place another colour at 50%.
Copy the CSS
Copy the background rule and check the 10% table for the exact in-between colours.

Examples

Black to white, left to right

Gradient type: Linear
Angle: 90
Start colour: #000000
Colour stops: Two colours
End colour: #ffffff

Result CSS: background: linear-gradient(90deg, #000000 0%, #ffffff 100%);
Colour at 50%: #808080
End-colour contrast ratio: 21
Colour stops: 2

Stops: #000000 0%, #ffffff 100%.
Each colour channel is interpolated linearly in sRGB between neighbouring stops.
Midpoint (50%) = #808080.
End-colour contrast = (1 + 0.05) ÷ (0 + 0.05) = 21:1.

The halfway colour is mid grey #808080, and the two ends have the maximum WCAG contrast of 21:1.

Orange, white and violet at 135deg

Gradient type: Linear
Angle: 135
Start colour: #ff7a00
Colour stops: Three colours
Middle colour: #fff
End colour: #6a00ff

Result CSS: background: linear-gradient(135deg, #ff7a00 0%, #ffffff 50%, #6a00ff 100%);
Colour at 50%: #ffffff
End-colour contrast ratio: 2.63
Colour stops: 3

Stops: #ff7a00 0%, #ffffff 50%, #6a00ff 100%.
Each colour channel is interpolated linearly in sRGB between neighbouring stops.
Midpoint (50%) = #ffffff.
End-colour contrast = (0.3518 + 0.05) ÷ (0.1028 + 0.05) = 2.63:1.

A three-letter #fff is expanded to #ffffff, and the middle stop sits at 50% so the ramp passes through pure white.

Red to blue circle

Gradient type: Radial (circle)
Start colour: #ff0000
Colour stops: Two colours
End colour: #0000ff

Result CSS: background: radial-gradient(circle, #ff0000 0%, #0000ff 100%);
Colour at 50%: #800080
End-colour contrast ratio: 2.15
Colour stops: 2

Stops: #ff0000 0%, #0000ff 100%.
Each colour channel is interpolated linearly in sRGB between neighbouring stops.
Midpoint (50%) = #800080.
End-colour contrast = (0.2126 + 0.05) ÷ (0.0722 + 0.05) = 2.15:1.

A radial gradient spreads from the centre outward; the 50% ring is #800080, a purple.

How it is calculated

C(p) = C1 + (C2 − C1) × (p − p1) ÷ (p2 − p1), per R, G and B channel

C1, C2: the colours of the stops either side of position p
p1, p2: the positions of those stops, in percent
p: the position being sampled, 0 to 100%

Browsers blend gradient stops channel by channel in sRGB unless told otherwise, so the table repeats that sum and rounds each channel to a whole 0–255 value. Contrast uses the WCAG relative luminance of each end colour: (lighter + 0.05) ÷ (darker + 0.05).

When not to use it

For gradients interpolated in OKLCH or another colour space, the in-between colours here will not match.
Text sitting on a gradient needs a contrast check against each area it covers, not only the two ends.

Common mistakes

Writing 0deg expecting left to right; in CSS 0deg points up and 90deg points right.
Typing colour names such as orange, which this generator does not accept; use hex values.

Frequently asked questions

Which direction does each angle point?

CSS angles start at the top: 0deg runs from bottom to top, 90deg from left to right, 180deg from top to bottom and 270deg from right to left. Values between them tilt the line diagonally, so 135deg runs from top left to bottom right.

Why does a blend between two bright colours look muddy in the middle?

sRGB interpolation averages the channel numbers, so complementary colours such as red and green pass through a dull brownish tone. Adding a brighter middle stop, or choosing closer hues, keeps the middle lively.

Can I use three-digit hex codes?

Yes. A short code such as #f70 is expanded to #ff7700 by doubling each digit, and the output always shows the full six-digit form.

What does the contrast ratio tell me?

It is the WCAG ratio between the start and end colours, from 1:1 for identical colours to 21:1 for black and white. A ratio near 1 means the gradient will barely show; it does not certify text legibility.

Do I need vendor prefixes like -webkit-?

Not for current browsers. The unprefixed linear-gradient and radial-gradient syntax has been supported by every major browser for years, so the single declaration is enough.

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

MLA

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

Chicago

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

Link

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