CSS Gradient Generator

Create linear and radial CSS gradients with a live preview and copy the code — free online.

Type Angle

Colour stops

CSS

This tool needs JavaScript enabled in your browser to calculate results.

About

About the CSS Gradient Generator

Builds a linear or radial CSS gradient from up to six colour stops, previews it live, and gives you the ready-to-use background CSS to copy.

Designers and developers use it to try out gradient combinations visually before writing any CSS by hand, while anyone building a landing page uses it for a quick background effect. It's one of many free designer tools on Toolapt, and like every tool here, it's free to use with no sign-up and no limit on how many times you run it.

Guide

Using the CSS Gradient Generator

How to use 4 Features 8 Who uses this 4

1

Step 1

Choose Linear or Radial as the gradient type.
2

Step 2

For a linear gradient, set the angle in degrees.
3

Step 3

Add, adjust or remove colour stops — each has its own colour picker and position percentage.
4

Step 4

Watch the live preview update, then click "Copy" to copy the finished CSS.

Supports both linear gradients (with an adjustable angle) and radial gradients
Add up to six colour stops, each with its own colour and position along the gradient
Live preview updates instantly as you change any stop, angle or gradient type
Outputs ready-to-paste CSS in the standard background: linear-gradient(...) / radial-gradient(...) format
Colour stops are automatically sorted by position when the CSS is built, however you add them
Works entirely in your browser — no installs and no sign-up
Free to use, with no limit on how many times you run it
Fully responsive, so it works just as well on a phone as on a desktop

Designers

Designers use the CSS Gradient Generator for trying out gradient combinations visually before writing any CSS by hand.

Developers

Developers use the CSS Gradient Generator for quickly grabbing ready-to-paste background CSS for a component.

Landing page builders

Landing page builders use the CSS Gradient Generator for a quick, eye-catching background effect.

Students learning CSS

Students learning CSS use the CSS Gradient Generator for seeing exactly how colour stops and angle affect the resulting gradient.

Examples

CSS Gradient Generator examples

3 worked examples

A simple two-stop linear gradient

Green to blue at 90° copies as background: linear-gradient(90deg, #10b981 0%, #0ea5e9 100%);

A radial spotlight

A radial gradient from white to dark grey copies as background: radial-gradient(circle, #ffffff 0%, #1f2937 100%);

A three-colour diagonal

Adding a third stop — orange #f97316, pink #ec4899 and violet #8b5cf6 at 0%, 50% and 100% — at 135° copies as background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);

Random Colour Generator

Generate a random colour and copy it as HEX, RGB or HSL.

Use it

Colour Shades and Tints Generator

Generate a range of tints and shades from a base colour, with HEX codes ready to copy.

Use it

Box Shadow Generator

Design a CSS box-shadow with sliders for offset, blur, spread, colour and opacity, and copy the code.

Use it

Border Radius Generator

Set each corner's CSS border-radius with sliders, preview the shape and copy the shortest CSS.

Use it

Colour Palette Generator

Build a palette from a base colour using classic colour-wheel relationships.

Use it

Colour Converter

Convert between HEX, RGB, HSL, HSV and CMYK. Named CSS colours work too.

Use it

FAQ

Frequently asked questions

Quick answers to common questions about the CSS Gradient Generator.

Still have a question?

Send us a message and we'll help you out.

What does the CSS Gradient Generator do?

It builds a linear or radial CSS gradient from colour stops you set, and gives you the finished CSS to copy.

Is the CSS Gradient Generator free to use?

Yes. It's free, with no sign-up, no watermark and no limit on how many times you use it.

Is my input safe when I use this tool?

Yes. The gradient is built and previewed entirely on your own device — nothing is sent to a server.

What's the difference between linear and radial?

A linear gradient transitions in a straight line at the angle you set; a radial gradient spreads outward from the centre in a circle, and doesn't use an angle.

How many colour stops can I use?

Up to six. Each stop has its own colour and a position from 0 to 100%.

How do I use the generated CSS?

Paste the copied line (for example background: linear-gradient(90deg, #10b981 0%, #0ea5e9 100%);) directly into your stylesheet or inline style.

Can I use the CSS Gradient Generator on my phone?

Yes. The page is fully responsive and works on mobile, tablet and desktop browsers alike.

Does the CSS Gradient Generator have any limitations?

It supports standard two-colour-stop-and-up linear and radial gradients — it doesn't build conic gradients or multiple layered gradients.

Still have a question? Contact us

CSS Gradient Generator

About the CSS Gradient Generator

Using the CSS Gradient Generator