CSS Gradient Generator
Build linear and radial CSS gradients in your browser with multiple color stops and an adjustable angle. Preview live and copy the CSS straight into your styles.
How it works
- 01Choose a linear or radial gradient.
- 02Add color stops and set their colors and positions.
- 03Adjust the angle for linear gradients.
- 04Copy the generated CSS into your stylesheet.
Frequently asked questions
What kinds of gradient can I make?
You can create linear and radial CSS gradients with two or more color stops. Add, remove and recolor stops, and set the angle for linear gradients to point the blend any direction.
How do color stops work?
Each stop is a color placed at a position along the gradient. Adjusting a stop's color or position changes where and how the colors blend, giving you full control over the transition.
Can I copy the CSS?
Yes. The tool outputs a ready-to-use background property with the full gradient value, so you can copy it and paste it directly into your stylesheet or design tool.
Is anything sent to a server?
No. The gradient is rendered and the CSS generated entirely in your browser. There are no network requests, so it works offline and privately.
Does the preview match the browser?
Yes. The preview uses the exact CSS the tool generates, so what you see is precisely what your visitors will see when you apply the same value in your project.