CSS Gradient Generator

Create linear gradients and copy production-ready CSS. Free, private and instant.

About the CSS Gradient Generator

A CSS gradient blends two or more colors with no image file, so it loads instantly and scales to any screen size.

When to use it

Use it for hero backgrounds, buttons and cards. Pick two colors and an angle, then copy the rule into your stylesheet.

Linear gradient basics

linear-gradient takes an angle and two or more color stops. 0deg points up, 90deg points right and 180deg points down. 135deg runs diagonally from the top left to the bottom right.

Choosing colors

Gradients between similar hues look smooth, while very different hues can leave a muddy middle. Pick colors close on the color wheel, or add a middle stop to control the transition.

Performance and fallbacks

The browser draws gradients itself, so there is no image to download and they stay sharp on any screen. Set a plain background-color as a fallback and keep enough contrast for any text on top.

Going further

Add more stops with percentages for hard edges and stripes, or try radial-gradient and conic-gradient for circular effects.

How to use the CSS Gradient Generator

1. Enter or paste your input in the fields above.
2. The result updates as you type, or press Run.
3. Press Copy to copy the output.

Frequently asked questions

Is the CSS Gradient Generator free?

Yes. It is completely free, with no signup and no usage limits.

Is my data uploaded anywhere?

No. Everything runs locally in your browser, so what you type never leaves your device.

Does the CSS Gradient Generator work on mobile?

Yes. The tool is responsive and works on phones, tablets and desktops.

More free tools