GRD
CSS Gradient Generator
Create beautiful CSS gradients with a visual editor and live preview
Color Stops
0%
100%
CSS Code
background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
Presets
About CSS Gradient Generator
Design stunning CSS gradients visually with support for linear, radial, and conic gradient types. Add and position color stops, adjust the gradient angle or center point, and see a live preview update in real time. Copy the generated CSS code including cross-browser prefixes. Browse preset gradients for quick inspiration or build your own from scratch.
How to Use CSS Gradient Generator
- 1Choose a gradient type: linear, radial, or conic
- 2Add color stops and adjust their positions using the color pickers and sliders
- 3For linear gradients, set the angle using the angle slider
- 4Copy the generated CSS code and use it in your project
Frequently Asked Questions
CSS supports three gradient types: linear-gradient (colors transition along a straight line), radial-gradient (colors radiate outward from a center point in an ellipse or circle), and conic-gradient (colors rotate around a center point like a color wheel).
Click 'Add Color Stop' to add more colors to your gradient. Each stop has a color picker and a position slider (0% to 100%). You can add as many stops as you want to create complex, multi-color gradients.
Yes. The generated CSS code uses the background property, which works on any HTML element. You can use gradients as page backgrounds, card backgrounds, button backgrounds, text effects (with background-clip), and more.
Related Tools
IMG
Placeholder Image Generator
Generate customizable placeholder images for your designs and prototypes
SHD
CSS Box Shadow Generator
Create beautiful CSS box shadows with a visual builder and live preview
SHD
Color Shade Generator
Generate light and dark shades of any color for design systems
{ }
JSON Formatter
Format, validate, and beautify JSON data with syntax highlighting