Yesterday we had a look at CSS Linear Radiants, and as promised today, we'll look into radial gradients. These gradients show from a round perspective.
Types of CSS Gradients permalink
As a reminder, there are two types of gradients we can leverage in
CSS these two are:
Linear: From one side to the other side
Radial: Round gradient
Best to view them in action and see what they can do.
View how to use a Linear Gradient in CSS
CSS Radial Gradient permalink
As mentioned, the Radial Gradient is defined by its center and moves from there.
In the most basic example we can use it like such:
background-image: radial-gradient(red, yellow);
This will make a gradient from red (inside) to yellow (outside).
Radial Gradient Multiple Colors permalink
Much like the Linear Gradient, we can also define multiple colors for the Radial Gradient.
background-image: radial-gradient(red, yellow, green, blue);
We can also define certain positions for the colors:
background-image: radial-gradient(red 10%, yellow 50%, green 90%);
Radial Gradient Transparency permalink
And even make it transparent, which can give some realy cool overlay effects.
background-image: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
Radial Gradient Shape permalink
By default, the Radial Gradient will use an Ellipse shape, but we can change it to a circle. There are only these two options.
Radial Gradient Shapes:
background-image: radial-gradient(circle, red 10%, yellow 20%);
Repeating Radial Gradient permalink
And, for who knows what reason, we can repeat a Radial Gradient as well?
background-image: repeating-radial-gradient(red 10%, yellow 20%);
You can view all these fantastic options in this Codepen.
Browser Support permalink
CSS Gradients are very well supported. Just Opera Mini is not working, and not all browsers support the full set of options.