Browse categories

CSS Gradient Generator

Create browser-safe CSS gradients entirely in your browser.

Live gradient preview
Customization

Color stops

Ready to use

CSS

90° linear
background: linear-gradient(90deg, #2A7B9B 0%, #57C785 50%, #EDDD53 100%);

Change a color to update the gradient.

How to use this generator

  1. Choose linear or radial mode, apply a preset or edit each color stop, then adjust positions and angle where applicable.
  2. Review the live result and use Copy result when you need to share it.

How the generator works

The live preview and stop controls produce a standard unprefixed CSS background declaration that can be copied or downloaded.

Step-by-step generation

  1. Choose linear or radial mode, apply a preset or edit each color stop, then adjust positions and angle where applicable.
  2. The live preview and stop controls produce a standard unprefixed CSS background declaration that can be copied or downloaded.
  3. Check the displayed result, then copy it if needed.

Worked example

A 135-degree linear gradient can blend several positioned colour stops, such as blue at 0%, green at 50% and yellow at 100%.

Risk guidance

Frequently asked questions

Does this tool send my inputs anywhere?

No. The interactive calculation runs in your browser and this site does not submit tool inputs to a backend.

How should I use the result?

Check that the entered units and values match your situation, especially around dates, breaks, and rounding.

Related tools