CSS Gradient Generator — free
Generate linear and radial CSS gradients visually.
How to use CSS Gradient Generator
Select Your Gradient Type
Click the 'Gradient Type' dropdown menu at the top left and choose between 'Linear' or 'Radial'. Linear creates directional color transitions, while Radial creates circular or elliptical fades from center outward.
Set the Gradient Direction
For linear gradients, use the angle dial or enter degrees (0-360) in the 'Angle' input field. For radial gradients, select the shape (circle or ellipse) and position using the 'Position' sliders to adjust the focal point.
Add and Customize Color Stops
Click the '+' button below the gradient preview to add color stops. Click on any existing color dot in the gradient bar to select it, then use the color picker that appears or paste a hex code (#FF5733) directly into the color input field.
Adjust Color Stop Positions
Drag the color stop circles left or right along the gradient bar to change their position percentage (0-100%), or type exact values in the 'Position' field. Use the delete button (trash icon) to remove unwanted color stops.
Copy Your CSS Code
Click the 'Copy CSS' button in the output panel on the right side. The complete CSS gradient syntax for both standard and vendor-prefixed formats (-webkit-, -moz-, -o-) will be copied to your clipboard ready to paste into your stylesheet.