Gradient Generator
Build a CSS gradient visually, copy the code, or download it as an image.
Design a gradient
Everything stays on your device.
Colors
How to use it
- Pick the type: linear, radial or conic.
- Set colors and positions. Add up to six colors, reverse them or try Randomize.
- Copy the CSS into your stylesheet, or download a PNG.
Examples
background: linear-gradient(90deg, #087e8b 0%, #e2f3f4 100%);
Linear angles: 0° goes bottom to top, 90° goes left to right. For conic gradients the angle sets where the sweep starts. Positions are percentages along the gradient.