CSS gradients let you create smooth colour transitions entirely in code — no images, no extra HTTP requests, and they scale perfectly at any resolution. There are three gradient functions: linear-gradient, radial-gradient, and conic-gradient. Each has its own syntax and use cases.
Linear gradients
linear-gradient blends colours along a straight line. The direction defaults to top-to-bottom.
background: linear-gradient(#e66465, #9198e5);
Direction
/* Top to bottom (default) */
background: linear-gradient(to bottom, #e66465, #9198e5);
/* Left to right */
background: linear-gradient(to right, #e66465, #9198e5);
/* Diagonal */
background: linear-gradient(to bottom right, #e66465, #9198e5);
/* Angle in degrees */
background: linear-gradient(135deg, #e66465, #9198e5);
A value of 0deg is bottom-to-top. 90deg is left-to-right. 180deg is top-to-bottom (same as default).
Multiple colour stops
Add as many stops as you need:
background: linear-gradient(to right, #f12711, #f5af19, #1a1a2e);
You can also set explicit positions for each stop:
background: linear-gradient(
to right,
#e66465 0%,
#e66465 30%, /* hold red until 30% */
#9198e5 70%, /* transition between 30-70% */
#9198e5 100% /* hold purple from 70% */
);
Hard stops (no blur)
Place two stops at the same position to create a sharp edge:
background: linear-gradient(
to right,
#e66465 50%,
#9198e5 50%
);
This produces a split background — half red, half purple. Useful for split-screen designs and striped patterns.
Repeating linear gradient
background: repeating-linear-gradient(
45deg,
#e66465,
#e66465 10px,
#9198e5 10px,
#9198e5 20px
);
Creates a diagonal stripe pattern that tiles across the element.
Radial gradients
radial-gradient radiates outward from a centre point, forming circular or elliptical shapes.
background: radial-gradient(circle, #e66465, #9198e5);
Shape and size
/* Circle */
background: radial-gradient(circle, #e66465, #9198e5);
/* Ellipse (default) */
background: radial-gradient(ellipse, #e66465, #9198e5);
/* Size keyword: closest-side, closest-corner, farthest-side, farthest-corner */
background: radial-gradient(circle closest-side, #e66465, #9198e5);
Centre position
background: radial-gradient(circle at top left, #e66465, #9198e5);
background: radial-gradient(circle at 75% 25%, #e66465, #9198e5);
Spotlight effect
background: radial-gradient(
circle at 30% 40%,
rgba(255, 255, 255, 0.15) 0%,
transparent 60%
);
Layer this on top of a solid background colour to create a lighting effect on cards or hero sections.
Repeating radial gradient
background: repeating-radial-gradient(
circle,
#e66465,
#e66465 10px,
#9198e5 10px,
#9198e5 20px
);
Produces concentric rings, similar to a target or ripple effect.
Conic gradients
conic-gradient rotates colour stops around a centre point, like a pie chart or colour wheel.
background: conic-gradient(red, yellow, green, blue, red);
Rotation and position
/* Start at top (0deg default is top) */
background: conic-gradient(from 0deg, red, yellow, green);
/* Rotate starting angle */
background: conic-gradient(from 45deg, red, yellow, green);
/* Custom centre */
background: conic-gradient(from 0deg at 25% 75%, red, yellow, green);
Pie chart
Use explicit degree stops to create pie chart segments:
background: conic-gradient(
#e66465 0deg 90deg, /* 25% — first quarter */
#9198e5 90deg 180deg, /* 25% — second quarter */
#f5af19 180deg 270deg, /* 25% — third quarter */
#1a1a2e 270deg 360deg /* 25% — fourth quarter */
);
Combine with border-radius: 50% to turn the element into a circle.
Colour wheel
background: conic-gradient(
hsl(0, 100%, 50%),
hsl(60, 100%, 50%),
hsl(120, 100%, 50%),
hsl(180, 100%, 50%),
hsl(240, 100%, 50%),
hsl(300, 100%, 50%),
hsl(360, 100%, 50%)
);
border-radius: 50%;
Layering gradients
The background property accepts multiple values separated by commas. Later values render behind earlier ones:
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), /* dark overlay */
linear-gradient(135deg, #e66465, #9198e5); /* base gradient */
This is how you overlay gradients on images:
background:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('/hero.jpg') center/cover no-repeat;
Animating gradients
Gradients cannot be directly transitioned because the browser treats them as images, not colour values. The common workaround:
.button {
background: linear-gradient(135deg, #e66465, #9198e5);
background-size: 200% 200%;
background-position: 0% 0%;
transition: background-position 0.4s ease;
}
.button:hover {
background-position: 100% 100%;
}
Setting background-size larger than the element and then shifting background-position creates a smooth colour-shift animation that performs well.
Common gradient recipes
Sunset
background: linear-gradient(to bottom, #1a1a2e, #e96c4c, #f5af19);
Pastel card
background: linear-gradient(135deg, #ffecd2, #fcb69f);
Ocean
background: linear-gradient(to bottom right, #2980b9, #6dd5fa, #ffffff);
Dark hero
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
Generate gradients visually
Instead of tweaking angle values and hex codes by hand, use Toolmingo's Gradient Generator. Pick your colours, drag the stops, adjust the angle, and copy the ready-to-use CSS. You can build linear, radial, and conic gradients and preview them on different element shapes.
FAQ
Q: Do CSS gradients work on all browsers?
linear-gradient and radial-gradient have had full browser support since IE 10. conic-gradient is supported in all modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+) but not in IE.
Q: Can I use CSS gradients as a border?
Not directly. The workaround is border-image:
border: 2px solid transparent;
background: linear-gradient(white, white) padding-box,
linear-gradient(135deg, #e66465, #9198e5) border-box;
This clips the outer gradient to the border area and fills the padding area with white.
Q: Why does my gradient look grey in the middle?
When you blend two complementary colours (e.g. red and green), the middle point passes through grey in the RGB colour space. Use the CSS Color Level 4 in hsl or in oklch hint if supported, or add an intermediate stop with a more vivid colour to guide the blend.
Q: How do I make a transparent gradient?
Use rgba() or transparent as a stop:
background: linear-gradient(to right, rgba(230, 100, 101, 0.8), transparent);
Q: Can gradients replace images for performance? Yes — a CSS gradient is rendered by the GPU, is responsive by definition, and adds zero bytes to your network requests. For decorative backgrounds and overlays, always prefer gradients over raster images.