CSS Radial Gradients

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

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

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:

.basic-radial {
  background-image: radial-gradient(red, yellow);
}

This will make a gradient from red (inside) to yellow (outside).

Radial Gradient Multiple Colors

Much like the Linear Gradient, we can also define multiple colors for the Radial Gradient.

.multi-radial {
  background-image: radial-gradient(red, yellow, green, blue);
}

We can also define certain positions for the colors:

.position-radial {
  background-image: radial-gradient(red 10%, yellow 50%, green 90%);
}

Radial Gradient Transparency

And even make it transparent, which can give some realy cool overlay effects.

.transparent-radial {
  background-image: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

Radial Gradient Shape

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:

• circle
• ellipse

.shape-gradient {
  background-image: radial-gradient(circle, red 10%, yellow 20%);
}

Repeating Radial Gradient

And, for who knows what reason, we can repeat a Radial Gradient as well?

.repeat-radial {
  background-image: repeating-radial-gradient(red 10%, yellow 20%);
}

You can view all these fantastic options in this Codepen.

See the Pen CSS Radial Gradients by Chris Bongers (@rebelchris) on CodePen.

Browser Support

CSS Gradients are very well supported. Just Opera Mini is not working, and not all browsers support the full set of options.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter