How to Use the CSS Gradient Generator
- Choose a gradient type: linear or radial.
- Add and adjust color stops, and set the angle (for linear) or shape (for radial).
- Watch the live preview update as you adjust settings.
- Copy the generated CSS `background` code.
Linear vs. radial gradients
A linear gradient transitions colors along a straight line at a chosen angle, useful for backgrounds, buttons, and overlays. A radial gradient transitions colors outward from a center point in a circular or elliptical shape, often used for spotlight or glow effects.
Understanding color stops
A color stop defines a specific color at a specific position along the gradient (e.g., "blue at 0%, purple at 100%"). Adding more stops lets you create multi-color transitions rather than a simple two-color blend, and adjusting stop positions controls how quickly one color transitions into the next.
Example
Generated CSS
Blue to purple, 90deg
background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
Tips
- Subtle gradients (close color stops) often look more modern than high-contrast ones.
- Test gradients against both light and dark surrounding content for sufficient contrast.
Frequently Asked Questions
Are CSS gradients supported in all browsers?
Yes, linear-gradient() and radial-gradient() are supported in all modern browsers without vendor prefixes.
Can I use more than two colors?
Yes, add as many color stops as you like to create a multi-color gradient.