CSS Gradient Generator
Create beautiful CSS gradients visually and copy the code.
About the Gradient Generator
Create CSS linear and radial gradients visually. Pick colors, adjust angles, and copy the CSS code.
Private by design
Everything you type here is processed inside your browser. Nothing is sent to a server, logged or stored, so it is safe to use with real numbers, drafts and anything you would not paste into a hosted tool.
Try these next
- Color Converter Convert between HEX, RGB, RGBA, HSL, and HSLA color formats instantly. Built for designers and frontend developers building CSS variables, dark-mode palettes, and design tokens.
- Aspect Ratio Calculator Calculate aspect ratios and resize dimensions proportionally. Perfect for images, videos, and responsive design.
- Color Palette Generator Generate harmonious color palettes from a base color. Create complementary, analogous, and triadic color schemes.
- Box Shadow Generator Create CSS box-shadow values with a live visual preview. Adjust offset, blur, spread, and color.
Browse every tool or read the creator guides.
Questions people ask
How do I create a CSS gradient?
Pick two or more colors, choose a gradient type (linear or radial), adjust the angle or position, and copy the generated CSS code.
What types of CSS gradients are supported?
The tool supports linear gradients (with angle control) and radial gradients (with position control).
Can I use more than two colors?
Yes. You can add multiple color stops to create complex multi-color gradients.