CSS gradients are one of those features where the syntax and the possibilities are both richer than most developers realise. This is a complete reference — not just the basics.
Linear gradients
The most common gradient type:
``css
/ Basic two-color /
background: linear-gradient(to right, #2f855a, #63b3ed);
/ Angle instead of direction /
background: linear-gradient(135deg, #2f855a, #63b3ed);
/ Multiple color stops /
background: linear-gradient(to right, #2f855a, #63b3ed, #9f7aea);
/ Color stops with explicit positions /
background: linear-gradient(to right,
#2f855a 0%,
#63b3ed 50%,
#9f7aea 100%
);
/ Hard stop (no transition) /
background: linear-gradient(to right,
#2f855a 50%,
#63b3ed 50%
);
`
Direction syntax:
- to right
(= 90deg) - to left
(= 270deg) - to bottom
(= 180deg) — this is the default if omitted - to top
(= 0deg) - to bottom right
(= ~135deg) - 45deg
, 135deg, etc. for precise angles
Radial gradients
`css
/ Default: ellipse centered /
background: radial-gradient(#2f855a, #63b3ed);
/ Circle instead of ellipse /
background: radial-gradient(circle, #2f855a, #63b3ed);
/ Size keywords /
background: radial-gradient(circle closest-side, #2f855a, #63b3ed);
background: radial-gradient(circle farthest-corner, #2f855a, #63b3ed);
/ Size with exact dimensions /
background: radial-gradient(circle 100px, #2f855a, #63b3ed);
background: radial-gradient(ellipse 200px 100px, #2f855a, #63b3ed);
/ Position /
background: radial-gradient(circle at top right, #2f855a, #63b3ed);
background: radial-gradient(circle at 30% 60%, #2f855a, #63b3ed);
`
Size keywords:
- closest-side
: gradient ends at the nearest edge - farthest-corner
: gradient reaches the farthest corner — default for ellipse - closest-corner
/ farthest-side
Conic gradients
A conic gradient sweeps around a point (like a pie chart):
`css
/ Basic conic /
background: conic-gradient(#2f855a, #63b3ed, #9f7aea);
/ Explicit angle stops /
background: conic-gradient(
#2f855a 0deg,
#63b3ed 120deg,
#9f7aea 240deg
);
/ Pie chart slices /
background: conic-gradient(
#2f855a 0% 40%,
#63b3ed 40% 70%,
#9f7aea 70% 100%
);
/ With position /
background: conic-gradient(from 45deg at 30% 60%, #2f855a, #63b3ed);
`
Conic gradients are ideal for:
- Pie charts
- Donut charts
- Progress rings
- Starburst effects
- Checkerboard patterns (with repeating-conic-gradient)
Repeating gradients
`css
/ Repeating stripes /
background: repeating-linear-gradient(
45deg,
#2f855a,
#2f855a 10px,
transparent 10px,
transparent 20px
);
/ Repeating rings /
background: repeating-radial-gradient(
circle,
#2f855a,
#2f855a 10px,
transparent 10px,
transparent 20px
);
`
Gradient as text fill
To apply a gradient to text:
<code>css
<p>.gradient-text {</p>
<p>background: linear-gradient(135deg, #2f855a, #63b3ed);</p>
<p>-webkit-background-clip: text;</p>
<p>-webkit-text-fill-color: transparent;</p>
<p>background-clip: text;</p>
<p>color: transparent; /<em> Fallback </em>/</p>
<p>}</p>
</code>
Works in all modern browsers. The color: transparent fallback ensures the text isn't invisible if background-clip isn't supported.
Gradient as border
CSS doesn't have a native gradient border property, but there are two approaches:
Using border-image:
<code>css
<p>.gradient-border {</p>
<p>border: 3px solid transparent;</p>
<p>border-image: linear-gradient(135deg, #2f855a, #63b3ed) 1;</p>
<p>/<em> Note: border-radius doesn't work with border-image </em>/</p>
<p>}</p>
</code>
Using pseudo-element (supports border-radius):
`css
.gradient-border {
position: relative;
border-radius: 12px;
padding: 3px;
background: linear-gradient(135deg, #2f855a, #63b3ed);
}
.gradient-border > * {
border-radius: 9px;
background: white;
}
`
Layering multiple backgrounds
CSS allows multiple background layers — useful for combining gradients with images:
<code>css
<p>background:</p>
<p>linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), /<em> Overlay </em>/</p>
<p>url('hero.jpg') center/cover no-repeat;</p>
</code>
Or stacking multiple gradients:
<code>css
<p>background:</p>
<p>radial-gradient(circle at top right, rgba(99,179,237,0.3), transparent 50%),</p>
<p>radial-gradient(circle at bottom left, rgba(47,133,90,0.3), transparent 50%),</p>
<p>#1a202c;</p>
</code>
Generating CSS gradient code
Writing complex multi-stop gradients by hand is tedious. A CSS gradient generator with a live visual editor lets you:
- Add and position color stops visually
- Choose from linear, radial, and conic
- See the exact CSS output in real time
- Export as standard CSS, or Tailwind utility class
- Preview on a card component with dark mode
The output is standard CSS you can paste directly into a stylesheet.
CSS gradient performance
Gradients are rendered by the GPU and are generally performant. A few cases where they can affect performance:
- Animating gradients: Browsers re-render the gradient every frame. Instead of animating background
, animate background-position with a long gradient (creates the illusion of movement without re-rendering):
`css
.animated-gradient {
background: linear-gradient(90deg, #2f855a, #63b3ed, #9f7aea, #2f855a);
background-size: 300% 100%;
animation: gradient 4s linear infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
`
- Very complex gradients with many stops on large elements can cause paint overhead on some devices. Keep gradients simple for large backgrounds.
Browser support
All gradient types (linear-gradient, radial-gradient, conic-gradient, repeating-*) are supported in all modern browsers: Chrome 26+, Firefox 16+, Safari 7+, Edge 12+.
The oklch and color()` functions in gradients (for color-space interpolation) are newer — Chrome 111+, Firefox 113+, Safari 16.2+.
Originally published at https://snappytools.app/gradient-generator/