ToolBirch

CSS Gradient Generator

Compose a two-stop CSS linear or radial gradient visually.Design & Color

Gradient Generator

Build a two-stop CSS gradient and copy the ready-to-paste CSS.

CSS
linear-gradient(135deg, #4f5bd5, #8b95ff)

About this tool

Two colours, one preview, one line of CSS. Set the stops, flip between linear and radial, drag the angle until it looks right, and copy the declaration straight into your stylesheet.

How to use the Gradient Generator tool

  1. Pick the two colours. Start and end stops, either with the pickers or by typing HEX values.
  2. Choose type and angle. Linear with a 0–360° angle, or radial centred in the box.
  3. Copy the CSS. The generated background declaration is shown below the preview.

Supported formats

Input

  • Two HEX colours
  • An angle in degrees

Output

  • A linear-gradient or radial-gradient CSS declaration

Inputs are validated before anything is processed. Invalid values and unsupported files are rejected with a clear error instead of failing silently.

Frequently asked questions

Can I add more than two stops?

Not in this release. Two-stop gradients cover most buttons and hero backgrounds.

Why does the angle look flipped?

CSS angles run clockwise from 'to top' (0° points up), which differs from maths conventions.

Is the output compatible everywhere?

The syntax is plain CSS and works in every browser that supports gradients (all current versions).

Does the preview use the same code?

Yes — the preview box is styled with the exact declaration you copy.

Privacy

Everything you enter stays in this browser tab. There is no upload endpoint for tool inputs, no account, and no server-side copy of your text or files. Results are produced locally and disappear when you close the page.

No account is required and no file is ever uploaded. See the privacy policy for details about analytics and the limited data this site stores.

Known limitations

  • Two colour stops; intermediate stops are not supported.
  • Radial gradients are always centred; other positions are not offered.
  • Conic gradients are not available.

Related tools

Other free tools from the same collection.

CSS Shadow GeneratorDesign a box-shadow with sliders and copy the exact CSS.Color Palette GeneratorBuild a five-colour palette from one base colour using harmony rules.Color ConverterConvert colours between HEX, RGB and HSL with a live preview.Favicon GeneratorRender a text favicon at every size browsers need, with the HTML snippet.