CSS Gradient Generator
Create beautiful linear and radial gradients with live preview.
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);Presets
About This CSS Gradient Generator
This free gradient generator lets you create beautiful CSS gradients visually. Supports both linear and radial gradient types with unlimited color stops. Adjust angles, shapes, positions, and colors in real-time, then copy the generated CSS code directly into your stylesheet.
How to Use
- Choose between Linear or Radial gradient type.
- For linear gradients, adjust the angle slider. For radial, select the shape and position.
- Configure color stops — each with its own color and position percentage. Add or remove stops as needed.
- See your gradient update in the live preview area in real time.
- Copy the generated CSS code with the "Copy CSS" button, or pick a preset to start from.
Frequently Asked Questions
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a given angle. A radial gradient transitions colors outward from a central point in a circular or elliptical shape.
How many color stops can I use?
CSS gradients support any number of color stops. This tool requires a minimum of two and lets you add as many as you need. More stops give you finer control over the transition.
Are CSS gradients supported in all browsers?
Yes. CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. No vendor prefixes are needed for current browser versions.
Can I use gradients as background images?
Absolutely. CSS gradients are treated as background images, so you can layer them with other backgrounds, use them in background-image, or combine them with background-size for repeating patterns.