The Gradient Generator is a free online tool that helps designers and developers quickly create beautiful CSS gradients. It supports both linear and radial gradients, with customizable color stops, live preview, and one-click export.
A linear gradient transitions colors along a straight line. Adjust the angle (0°–360°) to control the direction. 0° is left-to-right, 90° is bottom-to-top, 180° is right-to-left, and 270° is top-to-bottom.
A radial gradient radiates outward from a center point. Choose between circle and ellipse shapes, and adjust the center position and spread size.
Each gradient supports 2–5 color stops. Click the color swatch to pick a color and drag the slider to set its position (0%–100%). Stops are automatically sorted by position; a minimum of 2 stops is required.
Copy the generated CSS code directly into your stylesheet, or export the gradient as a PNG image for use in design software.
Yes, completely free. It is a pure frontend tool — all calculations happen locally in your browser.
All modern browsers including Chrome, Firefox, Safari, and Edge. Internet Explorer is not supported.
The exported PNG is 1080×320 pixels, suitable for web banner backgrounds or design assets.
Each gradient supports up to 5 color stops and a minimum of 2.
No. All processing happens locally in your browser. No data is uploaded to any server, and the tool works offline.