How to use CSS Gradient Generator
- Choose linear, radial or conic.
- Pick the colors and their stop positions.
- Adjust the angle and copy the CSS.
About this tool
Gradients are generated by the browser, so they cost no extra download and scale to any size. A linear gradient follows an angle, a radial gradient spreads from the center and a conic gradient sweeps around a point like a color wheel.
Use a fallback background-color for browsers that do not support gradients.
Frequently Asked Questions
- How do I make a smooth gradient?
- Choose colors close in hue and brightness, or add a middle color to avoid a muddy gray transition.
- What angle points to the right?
- 90 degrees. 0 degrees points up and 180 degrees points down.
Related tools
- CSS Gradient GalleryPick a ready-made gradient and copy its CSS.
- Glassmorphism CSS GeneratorBuild a frosted glass card and copy the CSS.
- Color Palette GeneratorBuild a harmonious palette starting from a single color.
- CSS Button GeneratorCreate a styled button and copy its CSS, including the hover state.
- Custom Scrollbar GeneratorDesign a scrollbar that matches your site and copy the CSS.
- SVG Blob GeneratorGenerate organic blob shapes and copy the SVG.