Gradients are everywhere — hero sections, buttons, social media graphics, loading indicators. They add depth and visual interest with just a few lines of CSS. But writing gradient code from scratch? That's where most people get stuck. The syntax is oddly specific, the color stops feel unintuitive, and one wrong value can turn your design into a muddy mess.
Let's fix that. This guide covers the three types of CSS gradients, shows you practical code you can copy right now, and points you to visual tools that make the whole process faster.
Linear gradients: the workhorse
Linear gradients transition between colors along a straight line. They're the most common type and the one you'll reach for 90% of the time.
The basic syntax looks like this:
background: linear-gradient(to right, #ff6b6b, #feca57);
That creates a red-to-yellow gradient moving left to right. The first argument sets the direction. You can use keywords like to right, to bottom left, or an angle in degrees:
background: linear-gradient(135deg, #667eea, #764ba2);
Adding color stops
You're not limited to two colors. Add as many stops as you want, and control exactly where each color starts:
background: linear-gradient(
to right,
#ee5a24 0%,
#f0932b 33%,
#6ab04c 66%,
#22a6b3 100%
);
The percentages tell the browser where each color should be fully visible. Skip the percentages and the browser distributes colors evenly — which is fine for simple gradients but limits your control.
Quick trick: hard color stops
Want a sharp line instead of a smooth blend? Set two color stops at the same position:
background: linear-gradient(to right, #3498db 50%, #e74c3c 50%);
That gives you a clean split — half blue, half red. No blending at all. This technique is great for decorative stripes and progress bars.
Rather than writing these by hand, open the Gradient Generator and drag color stops visually. You'll see the CSS update in real time, and you can copy the code when it looks right.
Radial gradients: circles and ellipses
Radial gradients radiate outward from a center point. They're perfect for spotlight effects, glowing buttons, and circular backgrounds.
background: radial-gradient(circle, #ff9a9e, #fecfef);
By default, a radial gradient fills the element as an ellipse matching its aspect ratio. Use circle to force a perfect circle, or specify exact dimensions:
background: radial-gradient(ellipse 200px 100px at 30% 40%, #a18cd1, #fbc2eb);
The at 30% 40% part moves the center point. This is where radial gradients get interesting — off-center gradients create natural-looking light effects that flat designs can't match.
Sizing keywords
CSS gives you four sizing options for radial gradients:
- closest-side — gradient reaches the nearest edge
- farthest-side — gradient reaches the farthest edge
- closest-corner — gradient reaches the nearest corner
- farthest-corner — the default, fills until the farthest corner
These matter when your gradient center isn't in the middle of the element. Experiment with them — the differences are subtle but noticeable.
If hand-coding radial gradients sounds tedious, the Radial Gradient Generator lets you adjust shape, position, and colors with sliders. It's much faster than guessing pixel values.
Conic gradients: the underrated option
Conic gradients rotate colors around a center point, like a color wheel. They're newer than linear and radial gradients but have solid browser support now.
background: conic-gradient(#ff6b6b, #feca57, #48dbfb, #ff6b6b);
Notice that the last color matches the first — this creates a smooth loop. Without it, you'd get a hard seam where the gradient ends meet.
Practical uses for conic gradients
Conic gradients aren't just for decoration. You can build:
- Pie charts — use hard color stops at specific angles
- Color wheels — cycle through hue values
- Loading spinners — combine with CSS animation
- Donut charts — pair with a circular mask
/* Simple pie chart: 40% blue, 60% orange */
background: conic-gradient(#3498db 0deg 144deg, #e67e22 144deg 360deg);
border-radius: 50%;
Animated gradients that move
Static gradients are nice. Moving gradients? Even better. CSS can animate gradient backgrounds to create eye-catching hero sections and loading states.
The trick is to use a background larger than the element and animate the background-position:
.animated-gradient {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: shift 15s ease infinite;
}
@keyframes shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
That gives you a smoothly shifting gradient that loops forever. Adjust the duration and easing to match your design's energy — faster for landing pages, slower for ambient backgrounds.
Want to skip the manual coding? The CSS Gradient Animator generates animated gradient code with a visual preview. Pick your colors, set the speed, and grab the CSS.
Common mistakes (and how to avoid them)
Too many colors. Three to four stops usually look best. More than that and gradients turn muddy unless you're very intentional about your palette.
Ignoring dark mode. A gradient that looks stunning on white can wash out on dark backgrounds. Test both. Slightly more saturated colors tend to hold up better in dark themes.
Forgetting fallbacks. Older browsers might not support conic gradients. Always set a solid background-color before your gradient declaration:
background-color: #667eea;
background: linear-gradient(135deg, #667eea, #764ba2);
If the gradient fails to render, the solid color shows up instead.
Using hex for transparency. When you need semi-transparent stops, use rgba() or hsla() instead of eight-digit hex codes. They're easier to read and more widely understood by other developers:
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 1)
);
Gradients as borders
CSS doesn't natively support gradient borders through the border property, but there's a clean workaround using border-image:
.gradient-border {
border: 3px solid;
border-image: linear-gradient(to right, #f093fb, #f5576c) 1;
}
The 1 at the end is the border-image-slice value — it tells the browser to use the entire gradient image. One limitation: border-image doesn't work with border-radius. For rounded gradient borders, you'll need a pseudo-element or a wrapper div approach.
Picking gradient colors that work
Not every color combination makes a good gradient. Here are some guidelines:
- Stay within 2-3 hue steps on the color wheel for smooth blends
- Match saturation levels — mixing a vivid red with a muted blue creates an unpleasant gray zone in the middle
- Use analogous colors (neighbors on the color wheel) for safe, natural-looking gradients
- Go complementary (opposite on the color wheel) only with a midpoint color to avoid the muddy middle
When in doubt, start with the Gradient Generator and tweak colors until the transition feels clean. Your eyes are a better judge than any formula.
Wrapping up
CSS gradients give you a lot of visual power with very little code. Linear for directional transitions, radial for circular effects, conic for rotational patterns — and all three can be animated. Start with the visual generators to get the look right, then copy the CSS into your project. The syntax gets familiar fast once you've built a few.