CSS Gradient Generator
Create beautiful CSS gradients visually. Pick colors, adjust stops, and copy the generated CSS code. Everything runs in your browser.
Preset Gradients
How to Use CSS Gradients
CSS gradients let you create smooth transitions between two or more colors. They are rendered as images by the browser, so they are resolution-independent and look sharp on any display. Gradients are set using the background or background-image CSS properties.
Linear Gradients
A linear gradient transitions colors along a straight line defined by an angle. The default direction is top to bottom (180deg). You can specify any angle from 0 to 360 degrees, or use keywords like to right, to bottom left, etc.
Radial Gradients
A radial gradient radiates colors outward from a center point. You can control the shape (circle or ellipse) and the position of the center. Radial gradients are perfect for spotlight effects, glowing elements, and soft backgrounds.
Color Stops
Color stops define the colors in your gradient and where each color appears along the gradient line. Each stop has a color value and an optional position (in percentage). Adding more stops lets you create more complex, multi-color gradients.
Features
- Switch between linear and radial gradient types
- Adjust angle for linear gradients with a slider or direct input
- Set shape and position for radial gradients
- Add, remove, and reorder color stops with visual pickers
- Edit color values by hex code or position percentage
- Live preview updates in real time as you make changes
- One-click copy of the generated CSS code
- 12 beautiful preset gradients to use as starting points
- 100% client-side — nothing is sent to any server
Browser Support
CSS gradients are supported in all modern browsers. The generated code uses the standard syntax without vendor prefixes, which works in Chrome, Firefox, Safari, Edge, and Opera. For very old browsers, consider adding a solid fallback color before the gradient declaration.