Toolstia

Toolstia / CSS gradient generator

CSS gradient generator

Pick colours, move them along the gradient, set the angle and copy the finished CSS. Start from a preset or press Random for ideas.

  • 0%
  • 100%

CSS

background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);

How it works

  1. Choose linear or radial and pick your colours.
  2. Drag each colour to the position you want and set the angle.
  3. Press Copy CSS and paste it into your stylesheet.

Linear and radial

A linear gradient blends colours along a straight line at an angle you choose: 0 degrees goes upward, 90 degrees goes to the right. A radial gradient spreads outward from the centre in a circle.

Colour stops

Each colour has a position from 0% to 100%. Put two colours at nearby positions for a sharp edge, or far apart for a soft blend. You can use two to five colours.

Using the code

The output is a standard background declaration that works in every modern browser. Put it on any element, for example a section, a button or the body.

Readable text

Check that text on top of your gradient is still easy to read at its lightest and darkest points. The colour converter can check the contrast ratio.

Questions

Does the CSS need a vendor prefix?

No. Current browsers support the plain linear-gradient and radial-gradient syntax.

Can I add transparency?

Not in this tool yet. You can edit the copied CSS and change a colour to rgba() or an 8-digit hex value.

Is anything saved?

No. Your gradient exists only in the page.

What is the maximum number of colours?

Five, which is enough for almost every design.

More tools