Background colors are great, but gradients add depth, modern flair, and a touch of realism to your web designs.
While linear gradients transition smoothly from one side to another, radial gradients radiate outward from a central point—perfect for creating glows, buttons, spotlights, and 3D spheres.
If you’ve ever found the syntax for radial-gradient() a bit intimidating, you’re in the right place. Let’s break it down step-by-step.
The Anatomy of a Radial Gradient
At its most basic level, a radial gradient requires just two things: a starting color and an ending color. By default, it starts in the center of the element and takes an elliptical shape.
.basic-gradient {
background-image: radial-gradient(#ff7e5f, #feb47b);
}But the real magic happens when you use its full syntax:
background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);Let’s unpack those three key parameters: shape, size, and position.
Shape: Circle vs. Ellipse
By default, CSS assumes you want an ellipse (which stretches to fit the proportions of your container). However, you can explicitly force it to be a perfect circle.
ellipse(Default): Adapts to the element’s width and height.circle: Maintains a 1:1 aspect ratio regardless of the container.
Perfect circular glow:
.circle-gradient {
background-image: radial-gradient(circle, #4facfe, #00f2fe);
}Position: Where Does It Start?
You don’t have to start your gradient dead in the center. By using the at keyword, you can move the center of the gradient anywhere you want using keywords (top, bottom, left, right, center) or specific coordinates (px, %).
A classic “spotlight” or “sun” effect from the top left:
.spotlight {
background-image: radial-gradient(circle at top left, #fff, #333);
}Precise control using percentages:
.custom-position {
background-image: radial-gradient(circle at 30% 40%, #ff007f, #7f00ff);
}Size: Controlling the Spread
How far should the gradient extend before it hits its final color? CSS gives us four incredibly useful keywords to handle this automatically:
| Keyword | Description |
|---|---|
farthest-corner (Default) | The gradient grows until it reaches the corner farthest from the center. |
closest-side | The gradient meets the side closest to the center, keeping it contained. |
closest-corner | The gradient expands to hit the nearest corner. |
farthest-side | The gradient expands to hit the furthest edge. |
The gradient stays small, ending at the closest edge:
.contained-glow {
background-image: radial-gradient(circle closest-side at center, #yellow, #transparent);
}Creative Use Cases
Size: Controlling the Spread
By offsetting a white-to-color circle gradient, you can make a flat 2D element look like a glossy 3D ball.
.sphere {
width: 200px;
height: 200px;
border-radius: 50%;
background-image: radial-gradient(circle at 30% 30%, #ff9a9e, #fecfef, #fbc2eb);
}Smooth Vignette
Give your hero sections a cinematic look by creating a subtle dark vignette that frames your content.
.vignette-hero {
background-image: radial-gradient(circle, transparent 50%, rgba(0,0,0,0.6) 100%);
}Summary Cheat Sheet
Put it all together!
.ultimate-gradient {
background-image: radial-gradient(
circle farthest-corner at 50% 50%,
#ffed4a 0%,
#ff7675 50%,
#2d3436 100%
);
}Pro-Tip: You can add as many color stops as you want, and you can assign percentages (like 0%, 50%, 100%) right after the colors to control exactly where one color begins blending into the next!
Now it’s your turn. Open up your favorite code editor, swap out some hex codes, and see what kind of stunning depths you can add to your next project!
Ready to Build Your Own?
Reading the syntax is one thing — seeing it update live is another. The TrueCSSApp gradient generator lets you position your gradient’s center visually, toggle between circles and ellipses with a single click, and copy the exact CSS or Tailwind code without writing a single line by hand.
Looking for design inspiration instead of starting from scratch? Dive straight into our curated collections and browse ready-made combinations in blue gradients, sunset gradients, or explore the entire gradient library.