CSS Gradient Generator

Frequently asked questions

What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors rendered entirely by the browser — no image file needed. Linear gradients flow along a straight line at any angle; radial gradients radiate outward from a center point in a circle.

How do I copy the CSS?

Click the "Copy" button next to the CSS output to copy the complete background property declaration to your clipboard. Paste it into any CSS rule — it works on any element.

Can I add more than two color stops?

Yes — click "+ Add stop" to add up to five color stops. Adjust each stop's position with the slider to control exactly where the color transition happens along the gradient.

What is the angle slider for?

0° flows bottom to top, 90° goes left to right, 135° is diagonal from top-left to bottom-right, 180° goes top to bottom. The angle only applies to linear gradients — radial gradients radiate from the center regardless of angle.

What is the difference between linear and radial?

Linear gradients transition along a straight line at the angle you specify. Radial gradients radiate from a central point outward in a circle, creating a spotlight or vignette effect.

Is my data private?

Yes. All gradient generation runs entirely in your browser — no data is sent to any server.