How to Create A Radial Gradient Background With CSS

Welcome! If you'd like to quickly add a radial gradient background to your project, then you've arrived at the right place!

We'll be taking a look at how to create a cool background that utilises the magic of radial gradients.

Here's an example of what we'll be creating:

Let's get started!

Step 1. Create Background Element

Firstly, create the background element, which will display the background:

<div class="radial_gradient_background"></div>

To make the element take up the height and width of the screen, just set the height and width values to 100vh and 100vw, respectively. However, if you're applying this to the background of a container, for instance, this CSS wouldn't be required.

.radial_gradient_background {
  height: 100vh;
  width: 100vw;
}

Step 2. Creating Radial Gradients with CSS

Next, let's create the background! It will consist of a series of radial gradients stacked together, as shown below. Just edit the CSS above, so that it now includes the following:

.radial_gradient_background {
  background: radial-gradient(at 98% 69%, #9B5DE5 0px, transparent 50%), radial-gradient(at 89% 12%, #F15BB5 0px, transparent 50%), radial-gradient(at 27% 51%, #FF99C8 0px, transparent 50%), radial-gradient(at 82% 85%, #70D6FF 0px, transparent 50%), radial-gradient(at 3% 34%, #FF70A6 0px, transparent 50%), radial-gradient(at 0% 18%, #FF9770 0px, transparent 50%), radial-gradient(at 2% 70%, #FFD670 0px, #EDF7BB 50%);
  height: 100vh;
  width: 100vw;
}

This will create a bright and fun background effect, utilizing pink, amber and purple colors. Here's what it looks like:

Here's the full example:

<div class="radial_gradient_background"></div>
<style>
.radial_gradient_background {
  background: radial-gradient(at 98% 69%, #9B5DE5 0px, transparent 50%), radial-gradient(at 89% 12%, #F15BB5 0px, transparent 50%), radial-gradient(at 27% 51%, #FF99C8 0px, transparent 50%), radial-gradient(at 82% 85%, #70D6FF 0px, transparent 50%), radial-gradient(at 3% 34%, #FF70A6 0px, transparent 50%), radial-gradient(at 0% 18%, #FF9770 0px, transparent 50%), radial-gradient(at 2% 70%, #FFD670 0px, #EDF7BB 50%);
  height: 100vh;
  width: 100vw;
}
</style>

This could be useful for so many contexts when building websites, including as a background for a hero banner or a call-to-action section, to name but a couple of examples. Or you could add it as the backdrop to a login page or signup screen too.

I'd also recommend adjusting the values for the colors and positions of the gradients to create even more cool effects! There are so many possibilities as to the types of cool radial gradient backgrounds you can create.

Conclusion

Thanks very much for reading this guide, I hope that you've found it useful for helping you to create a radial gradient background for your project.

If you want even more radial gradient background, then I would recommend taking a look at Isotope's background pack library, which contains over 100 pre-built backgrounds you can quickly add to your projects, including cool mesh gradients and much more.

CSS is just amazing, isn't it? I always love creating these cool effects, and hopefully you'll find this tutorial useful!

I also publish a newsletter, which includes useful links to great frontend resources too. If you'd like to discover more cool CSS tips as well as web development resources, then I'd recommend taking a look.

Thanks again for reading, and wishing you the very best!