CSS Radial Gradients
Tags: css
Published: 2020-07-01 05:58:01

Yesterday we had a look at [CSS Linear Radiants](https://daily-dev-tips.com/posts/css-linear-gradients/), 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](https://daily-dev-tips.com/posts/css-linear-gradients/)

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

```css
.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.

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

We can also define certain positions for the colors:

```css
.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.

```css
.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

```css
.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?

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

You can view all these fantastic options in this Codepen.

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="rebelchris" data-slug-hash="dyGZGzZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Radial Gradients">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/dyGZGzZ">
  CSS Radial Gradients</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## Browser Support

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](https://caniuse.bitsofco.de/static/v1/css-gradients-1593449325882.png)

### 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](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)