How to use the css gradient generator
- Choose a gradient type. Linear runs in a straight line, radial spreads out from a point, and conic sweeps around a centre like a colour wheel.
- Set the angle. For linear gradients the angle sets the direction. For radial gradients it moves the centre point, and for conic gradients it sets the starting position.
- Pick your colours. Use two stops for a simple blend or three for a richer transition, and move the middle stop to shift where the colours meet.
- Copy the CSS. Copy the background rule. Gradients count as images in CSS, so they also work in background-image and border-image.
CSS gradient types
linear-gradient() blends colours along a line at a given angle. radial-gradient() blends outward from a centre point in a circle or ellipse. conic-gradient() rotates colours around a point and is useful for pie charts, colour wheels and spotlight effects.
Avoiding muddy gradients
Blending two very different hues can produce a dull grey band in the middle. Adding a third colour stop in between, or choosing colours that sit next to each other on the colour wheel, keeps the transition bright.
Performance
CSS gradients are drawn by the browser, so they cost no download time and stay sharp at any size, unlike gradient images.
Frequently asked questions
Can I animate a CSS gradient?
You cannot transition between gradients directly, but you can animate background-position on an oversized gradient, or animate custom properties registered with @property.
How do I add a gradient to text?
Set the gradient as the background, then add background-clip: text and color: transparent to the text element.
Are conic gradients supported?
Yes, in all current browsers including Safari.