tigtools

CSS Gradient Generator

Pick colours and positions, choose a gradient type and copy ready-to-use CSS.

Runs in your browser No sign-up

Type
135°
Colour stops
  1. Stop 1
    #0b5d1e
    0%
    100%
  2. Stop 2
    #f2c14e
    100%
    100%
A gradient here has between 2 and 6 stops.

How to use it

  1. Choose linear, radial or conic, then set the angle or the centre position.
  2. Set each stop's colour, opacity and position. Add up to six stops or remove ones you do not need.
  3. Check the preview, then copy the CSS line into your stylesheet.

How it works

The output is a standard CSS background declaration. Linear gradients run along an angle: 0deg goes from bottom to top, 90deg from left to right, 180deg from top to bottom. Radial gradients spread from a centre point as a circle or an ellipse that fits the box. Conic gradients sweep around a centre point, starting at the chosen angle, which is useful for pie-like effects and colour wheels.

Stops are written in order of their position, so you can drag positions freely. A stop with reduced opacity is written as rgba(), which lets the background show through. Two stops at the same position create a hard edge instead of a blend, which is how stripes are made.

All three gradient functions work in every current browser. Gradients blend in the sRGB colour space by default, which can look slightly grey between complementary colours (for example blue and yellow); adding a middle stop with a brighter colour avoids that.

Examples

Subtle header background

linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) gives a soft top-to-bottom fade that keeps dark text readable.

Hard-edged stripes

Use four stops: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. The two stops at 50% meet without a blend, giving two solid halves.

Spotlight effect

A radial gradient (circle at top left) from rgba(255, 255, 255, 0.6) to rgba(255, 255, 255, 0) layered over a colour gives a soft light in the corner.

Frequently asked questions

Which direction does 0deg go?

In CSS, 0deg points up, so the gradient starts at the bottom and ends at the top. 90deg goes left to right. This differs from some design apps, where 0° often means left to right.

Can I use the gradient on text?

Yes: apply the background, then add background-clip: text and color: transparent. Check that the text stays readable against the page at every point of the gradient.

Do I need vendor prefixes such as -webkit-linear-gradient?

No. Current browsers support the unprefixed syntax. Prefixes are only needed for browsers that are many years old.

Privacy

Everything is generated in your browser. Your colours and settings are not sent or stored.