We talked about linear gradients in our previous post and if you would like to know more about them and learn a few tricks and how to control them, please read a complete guide to linear gradients in css. In this tutorial, however, we will learn radial gradients and discover how they are different from linear and apply the knowledge we have absorbed so far. Let’s start.
What is a radial gradient?
(CSS) gradients are smooth transitions between two or more colors – an effect when one color fades into another. As with any other gradient, you must define at least two color stops.
Compared to a linear gradient, a radial gradient radiates from an origin, and its shape may be a circle or an ellipse defined by its center. By default, if you do not declare anything but the colors, the shape the radial gradient will take is an ellipse, the size will be the corner that is the farthest (if not declared differently), and the position of where the gradient will start radiating will be the center. The color stops will be evenly spaced.
The basic syntax goes like this:
background-image: radial-gradient(shape size at position, first color-stop, ..., last color-stop);Below you will find an example of radial gradient that by default takes an ellipse (because we didn’t declare a circle) and takes 3 color-stops – aquamarine at the very center, then goes to whitesmoke and at the farthest end of the available space takes pure gray color. All three color-stops are evenly spaced from the farthest corner.
See the Pen
by Tanja (@tanjatod)
on CodePen.
.my-gradient {
background-image: radial-gradient(aquamarine, whitesmoke, gray);
}What if I want a circle and not an ellipse?
Ah, this is super simple – circle or an ellipse are called
See the Pen
by Tanja (@tanjatod)
on CodePen.
.my-gradient {
background-image: radial-gradient(circle, aquamarine, whitesmoke, gray);}What if I want color stops that are differently spaced?
The following example shows a radial gradient with differently spaced color stops. We will have an ellipse.
See the Pen
by Tanja (@tanjatod)
on CodePen.
my-gradient {
background-image: radial-gradient(aquamarine 10%, whitesmoke 15%, gray 40%);
}The percentages are color stops that declare where colors start.
MDN says…
“Color-stop points are positioned on a virtual gradient ray that extends horizontally from the center towards the right. Percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents 100%. Each shape is a single color determined by the color on the gradient ray it intersects.”
Ah, the poetry in technical documents, just can’t live without it… Let’s try like this:
Values of 0% and 100% are automatically assigned to the first and last colors, this is why the first and last color stops do not require percentage and don’t specify a location unless we want color stops differently spaced. An example above demonstrated a gradient in a circular shape taking the farthest corner (which is the default in the <size> value, but more about that later). We start with aquamarine at the very center (0%), still holding that color to up to 10% width from the center, reaching pure whitesmoke already at 15% from center to the farthest corner point, and from there slightly going to gray, boom, reaching solid gray at 40% width from the center to the farthest corner. Voila.
A position can be expressed either with a percentage (relative to the size of the gradient line), or a CSS length unit (pxs, ems etc.)
What if I want an instant transition – a one without a gradient?
On the other hand, if you want an instant transition – a transition without a gradient – simply declare the same percentages or length units. An example below will create an aquamarine circle with instant transition on a gray background, like so:
See the Pen
by Tanja (@tanjatod)
on CodePen.
my-gradient {
background-image: radial-gradient(aquamarine 10%, whitesmoke 10%);
}And if you want to create a circle in a circle in a circle etc, you have to repeat the percentages between transiting colors, like so:
my-gradient {
background-image: radial-gradient(circle, aquamarine 0%, aquamarine 10%, whitesmoke 10%, whitesmoke 30%, pink 30%, pink 60%, gray 60%);
}
See the Pen
by Tanja (@tanjatod)
on CodePen.
What if I want a pattern to repeat?
Super simple. Use the magic words again. “repeating-radial-gradient”. Multi-simplified – the lower the percentages you use, the more times the pattern will repeat. In the real world, there is slightly more than that.
my-gradient {
background-image: repeating-radial-gradient(aquamarine, whitesmoke 10%, gray 15%);
}
See the Pen
by Tanja (@tanjatod)
on CodePen.
What about the size of the gradient – can I declare it?
Yes, you can, you can declare the size of the gradient’s ending shape, and you can use different size keywords. The following 4 values define the size of the gradient:
- closest-side for circle that would be the side of the box closest to its center and for ellipse both the vertical and horizontal sides closest to the center
- farthest-side similar to the above, except we are talking about the side of the box farthest from its center
- closest-corner for both circle and ellipse the gradient’s ending shape is sized so that it exactly meets the closest corner of the box from its center.
- farthest-corner is the default value – the gradient’s ending shape is sized so that it exactly meets the farthest corner of the box from its center.
The pen below shows how uncentered gradient with different sizes of the gradient’s ending shape looks like:
See the Pen
by Tanja (@tanjatod)
on CodePen.
How to make a circular gradient that is not centered?
First, you can define what size you want your gradient to be and where exactly – declare width and height of the centre – you want your center to be positioned. We also said we want our color stops to be evenly positioned:
.my-not-center-radial-gradient {
background-image: radial-gradient(farthest-corner at 50px 50px, aquamarine 0%, whitesmoke 100%);
}
See the Pen
by Tanja (@tanjatod)
on CodePen.
What about the <color-hint> – what’s that?
Th color-hint declares how the gradient will move from one color to another. The length, which can be expressed either in percentages or length units, defines at which point between two color stops the gradient color should reach the midpoint of the color transition. The default midpoint of the color transition is the midpoint between two color stops (it’s 50%). In our example, the .my-gradient transitions evenly from one color to the next.
See the Pen
by Tanja (@tanjatod)
on CodePen.
.my-gradient {
background: radial-gradient(aquamarine, whitesmoke);
}However, you can change that – in the example showing .my-gradient-with-color-hint we tweaked color hits and changed the gradient transition to 10%:
See the Pen
by Tanja (@tanjatod)
on CodePen.
.my-gradient-with-color-hint {
background: radial-gradient(aquamarine, 10%, whitesmoke);
}