Skip to content

CSS Gradient Generator

Create CSS linear or radial gradients with a live preview.

Generated locally in your browser.

Type
90°

Understanding your result

Linear gradients run along an angle; radial gradients spread out from the centre.

Formula and method

The output uses the CSS linear-gradient() or radial-gradient() function with your colours and angle.

Worked example

A 90° blue-to-violet gradient outputs “background: linear-gradient(90deg, #2563eb, #7c3aed);”.

How to use this tool

  1. Choose linear or radial.
  2. Pick the two colours and (for linear) the angle.
  3. Copy the CSS.

Common mistakes to avoid

  • Using two very similar colours, which makes the gradient look flat.

About the CSS Gradient Generator

Design a CSS gradient and copy the ready-to-use background code, with a live preview as you adjust it.

Related tools

Color Converter Convert colours between HEX, RGB and HSL with a live swatch. Developer Tools CSS Minifier Minify CSS by removing comments and unnecessary whitespace. Developer Tools Number Base Converter Convert numbers between binary, octal, decimal and hexadecimal. Developer Tools JSON Formatter Format, validate and minify JSON with clear error reporting. Developer Tools

Explore all Developer Tools tools

Frequently asked questions

Can I use it as a background?

Yes. Paste the generated rule onto any element’s background property.