CSS Radial Gradients

— 3 minute read

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:

.basic-radial {
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.

.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 permalink

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 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:

  • circle
  • ellipse
.shape-gradient {
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?

.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 permalink

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

CSS Gradients support

Thank you for reading, and let's connect! permalink

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