MasterTool

CSS Gradient Generator

Build a CSS linear or radial gradient from two colours and an angle, and copy the ready-to-paste background declaration.

Loading calculator…

What this tool does

Build a CSS linear or radial gradient from two colours and an angle, and copy the ready-to-paste background declaration. Two-stop gradients with hex colours and percentage stops. Angles follow CSS convention: 0deg points up, 90deg points right. The output is a single background declaration you paste into your stylesheet.

How to use the CSS Gradient Generator

  1. Enter or select gradient type.
  2. Enter or select angle (degrees, linear only).
  3. Enter or select start colour (hex).
  4. Enter or select start position (%).
  5. Enter or select end colour (hex).
  6. Enter or select end position (%).
  7. Read the calculated result; change any measurement to compare alternatives.

Formula

CSS: background: linear-gradient(<angle>deg, <color1> <pos1>%, <color2> <pos2>%); radial uses radial-gradient(circle, ...) with the same stops.
type
Gradient type
angle
Angle (degrees, linear only)
color1
Start colour (hex)
pos1
Start position (%)
color2
End colour (hex)
pos2
End position (%)

Two-stop gradients with hex colours and percentage stops. Angles follow CSS convention: 0deg points up, 90deg points right. The output is a single background declaration you paste into your stylesheet.

Worked example

For css gradient generator, the following measurements illustrate the exact method: Gradient type: linear; Angle (degrees, linear only): 135; Start colour (hex): #2563eb; Start position (%): 0; End colour (hex): #7c3aed; End position (%): 100.

Inputs

  • Gradient typeLinear
  • Angle (degrees, linear only)135
  • Start colour (hex)#2563eb
  • Start position (%)0
  • End colour (hex)#7c3aed
  • End position (%)100

Result

  • CSSbackground: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  • Gradient functionlinear-gradient(135deg, #2563eb 0%, #7c3aed 100%)

Results explained

CSS
CSS from the formula above. Two-stop gradients with hex colours and percentage stops. Angles follow CSS convention: 0deg points up, 90deg points right. The output is a single background declaration you paste into your stylesheet.
Gradient function
Gradient function from the formula above. Two-stop gradients with hex colours and percentage stops. Angles follow CSS convention: 0deg points up, 90deg points right. The output is a single background declaration you paste into your stylesheet.

Frequently asked questions

In linear-gradient, 0deg points toward the top, 90deg to the right, 180deg to the bottom and 135deg to the bottom-right. Keywords like 'to right' equal 90deg.

Linear gradients blend along a straight line at the chosen angle; radial gradients blend outward from a centre point in a circle (or ellipse). This generator emits 'circle' for radial mode.

This generator covers the common two-stop case. Add extra stops by inserting more 'colour position%' pairs into the generated declaration — the syntax repeats.

Positions control where each colour is fully reached: 0% and 100% spread the blend across the whole element, while closer stops (e.g. 20% / 80%) create solid bands at the edges with a shorter blend.

Yes — linear-gradient and radial-gradient are supported in every modern browser without prefixes. Very old browsers need the legacy -webkit- syntax, which is no longer generated.