CSS Gradient Generator

Updated November 2026 · free, works in your browser

A CSS gradient generator turns a few choices into code you can paste straight into a stylesheet. Pick a start and end color, choose linear or radial, set the angle, and the tool writes the matching background declaration while showing a live preview.

How to use

1. Choose the start and end colors with the color pickers.
2. Select the gradient type: linear for a straight blend, radial for a blend that spreads outward from the centre.
3. For a linear gradient, set the angle in degrees. For a radial gradient, choose a circle or an ellipse.
4. Optionally switch on a middle color and adjust the stop positions between 0% and 100%.
5. Check the preview, then press "Copy CSS" and paste the line into your stylesheet. Use the link button to save the exact settings and share them.

How it is calculated

Nothing is calculated numerically; the tool assembles standard CSS syntax defined in the CSS Images specification published by the W3C. The two functions it writes are:

• linear-gradient(angle, color position, color position)
• radial-gradient(shape, color position, color position)

The angle sets the direction of the gradient line. The color is the hex value from the picker. The position is where along the line that color is fully reached, written as a percentage. The browser blends the colors smoothly between the stops.

Common linear angles

Frequently asked questions

What is the difference between a linear and a radial gradient?

A linear gradient changes color along a straight line at the angle you choose. A radial gradient starts at a center point and changes color as it moves outward in a circle or an ellipse.

Can I use more than two colors?

Yes. CSS allows any number of color stops. This tool offers a start, an end and an optional middle color, which covers most backgrounds. You can add further stops by hand in the copied code.

Do CSS gradients work in all browsers?

Unprefixed linear-gradient and radial-gradient are supported by all current major browsers. For very old browsers you can add a plain background-color line before the gradient as a fallback.

Where do I paste the code?

Paste the line inside any CSS rule, for example the body, a header, a button or a card. It uses the background shorthand, so it replaces other background settings in the same rule.

Why does the angle have to be between 0 and 360?

One full turn is 360 degrees, so values outside that range only repeat existing directions. The tool keeps the input in that range to avoid confusion.

From design to destination

Gradients are a favorite for hero banners and booking pages, such as a soft sunset blend behind a hotel search box or a travel landing page. Once your design is ready, the same eye for color helps when you compare places to stay: look at photos, location and guest information side by side before choosing accommodation for your next trip.