CSS Gradient Generator
Gradient type
Color Stop
Generated CSS
background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);Presets
Frequently Asked Questions
Everything you need to know about CSS gradients
What are CSS gradients?
CSS gradients are smooth transitions between two or more colors, created without images. They come in linear (from one point to another), radial (from center outward), and conic (rotation around a central point) types. Supported by all modern browsers.
How do color stops work?
Color stops define the color and position (0-100%) where that color appears in the gradient. Between two stops the browser automatically creates the transition. You can add up to 4 stops to create complex gradients.
Can I use gradients on text and borders?
Yes! For text use: `background: gradient; -webkit-background-clip: text; color: transparent;`. For borders use the `border-image` property. The generator creates CSS for the background, but the same color rules apply anywhere.
What is the difference between a linear, radial and conic gradient?
The linear one runs from one point to another along an angle, the radial opens from the centre towards the edge, and the conic rotates around the centre. All current browsers support them.
What are color stops for?
Each color stop gives a color and its position from zero to one hundred along the gradient, and between two stops the browser works out the blend. Up to four stops can be used.
Can a gradient be used on text?
Yes. It is applied as a background and then clipped to the text with background-clip set to text and the color made transparent. For borders you use the border-image property instead.