Is the preview the same as the code I copy?

Yes. The preview element is styled with the same gradient string that appears in the CSS box, so what you see is what you paste.

Which color formats can I type?

Hex (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb()/rgba(), hsl()/hsla() and a short list of common color names. Anything else is rejected so the output stays valid CSS.

Why is there a plain color line above the gradient?

It is a fallback for very old browsers that do not understand gradients. Use Copy background property if you only want the gradient line.

Where are my favorites stored?

Only in your own browser's local storage. They are never sent to our servers, and you can remove them with the Clear favorites button.

Does it work offline?

After the page has loaded the tool needs no network access, because the gradient is generated in your browser.

CSS Gradient Generator

Create linear, radial and conic gradients with a live preview, then copy clean CSS for your website or app.

Free
No signup
Private

Gradient type

Linear Radial Conic

Angle: 90°

Repeating gradient

Colors

Presets

CSS code

Favorites (saved in this browser only)

No favorites yet.

Overview

Create linear, radial and conic gradients with a live preview, then copy clean CSS for your website or app.

Features

•Linear, radial and conic gradients, including repeating gradients
•Up to 20 color stops with picker, hex, rgb() and hsl() input
•Ready-made presets and a random gradient button
•Favorites saved only in your browser
•The preview uses exactly the CSS shown in the code box

Benefits

See the result instantly while you adjust colors
Copy the full CSS or only the background property
Validated output that matches the preview exactly
No signup, nothing uploaded

Use Cases

Hero section and landing page backgrounds
Gradient buttons and badges
Card and banner backgrounds
Quickly trying color combinations before a design handoff

Users Also Use

How to Use

Pick a gradient type: linear, radial or conic.
Set the angle or position, then add, remove or edit the colors and their positions.
Check the live preview, then copy the CSS or just the background property.

FAQ

Is the preview the same as the code I copy?: Yes. The preview element is styled with the same gradient string that appears in the CSS box, so what you see is what you paste.
Which color formats can I type?: Hex (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb()/rgba(), hsl()/hsla() and a short list of common color names. Anything else is rejected so the output stays valid CSS.
Why is there a plain color line above the gradient?: It is a fallback for very old browsers that do not understand gradients. Use Copy background property if you only want the gradient line.
Where are my favorites stored?: Only in your own browser's local storage. They are never sent to our servers, and you can remove them with the Clear favorites button.
Does it work offline?: After the page has loaded the tool needs no network access, because the gradient is generated in your browser.

About CSS Gradient Generator

Build CSS gradients for buttons, hero sections, cards and backgrounds. Choose the gradient type, tune the angle or position, edit the color stops, and copy valid CSS in one click.