How to create a website background with double radial gradients blended together-CodePudding

example background

I've been trying to replicate the background pattern on the photo above. It seems to me like there is a linear gradient with 2 radial gradients nested within it. But I'm not sure... Can someone please confirm? Can someone explained how to position the 2 radial gradients within the actual background? Thanks for helping.

I've searched google multiple times but my queries can't seem to find what I am looking for. I've tried nesting a radial-gradient within my linear-gradient but it doesn't work.

background: linear-gradient(45deg, radial-gradient(#b1f2ff, #63e5ff, #3cdfff), radial-gradient(#dd2288, #ff0057, #cc08c7));

CodePudding user response：

I hope this simple example helps you to make your one:

div{
width:100%;
height:400px;
background-image:radial-gradient(circle at 20% 70%,yellow 0%, transparent 30%),linear-gradient(45deg, #6634ff, #00e5ff);
}

<div></div>

In order to learn more, read these articles: https://www.w3schools.com/css/css3_gradients.asp https://www.w3schools.com/cssref/func_radial-gradient.php

CodePudding user response：

This is the best I could get using only radial-gradients:

* {
  margin: 0;
}

body {
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 25% 60%, #3BBFFE 0, transparent 25%), radial-gradient(circle at 70% top, #D21372 0, #7120FD 60%);
}