*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.sky{
width: 100%;
height: 400px;
background-color: rgb(92, 217, 255);
background-image: radial-gradient(circle at 46.5% 47%, white, white 3%, rgba(255, 0, 0, 0) 4%),
radial-gradient(circle at 49% 45%, white, white 4%, rgba(255, 0, 0, 0) 5%),
radial-gradient(circle at 51% 39%, white, white 3%, rgba(255, 0, 0, 0) 4%),
radial-gradient(circle at 53.2% 46%, white, white 3%, rgba(255, 0, 0, 0) 4%),
radial-gradient(circle at 51% 48%, white, white 3%, rgba(255, 0, 0, 0) 4%) ,
radial-gradient(circle at 59% 51%, white, white 2%, rgba(255, 0, 0, 0)3%),
radial-gradient(circle at 61% 50%, white, white 2%, rgba(255, 0, 0, 0) 3%),
radial-gradient(circle at 60.8% 53%, white, white 2%, rgba(255, 0, 0, 0) 3%),
radial-gradient(circle at 62.7% 47%, white, white 2%, rgba(255, 0, 0, 0) 3%),
radial-gradient(circle at 62.7% 53%, white, white 2%, rgba(255, 0, 0, 0) 3%),
radial-gradient(circle at 64.7% 51%, white, white 2%, rgba(255, 0, 0, 0) 3%),
radial-gradient(circle at 57% 35%, rgb(255, 145, 0), rgba(92, 217, 255, 0) 2%),
radial-gradient(circle at 57% 35%, rgb(255, 150, 0), rgba(92, 217, 255, 0) 4%),
radial-gradient(circle at 57% 35%, rgb(255, 160, 0), rgba(92, 217, 255, 0) 6%),
radial-gradient(circle at 57% 35%, rgb(255, 170, 0), rgba(92, 217, 255, 0) 8%),
radial-gradient(circle at 57% 35%, rgb(255, 170, 0), rgba(92, 217, 255, 0) 10%),
radial-gradient(circle at 57% 35%, rgb(255, 190, 0), rgba(92, 217, 255, 0) 12%),
radial-gradient(circle at 57% 35%, rgb(255, 190, 0), rgba(92, 217, 255, 0) 13%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sky"></div>
</body>
</html>
hi there
I have a problem in implementing CSS gradients!
I want the original shape of the clouds to be preserved after resizing the page.
I am eager to see your solution:)
[enter image description here](https://i.sstatic.net/pCt35.jpg)
You need the aspect ratio to remain constant.
I looked at the image you gave and the clouds seem to look OK when you had height 400px and width (gleaned from the browser's info in the image) of 1884px.
So that's the aspect-ratio that this snippet uses:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.sky {
width: 100%;
/*height: 400px;*/
aspect-ratio: 1884 / 400;
background-color: rgb(92, 217, 255);
background-image: radial-gradient(circle at 46.5% 47%, white, white 3%, rgba(255, 0, 0, 0) 4%), radial-gradient(circle at 49% 45%, white, white 4%, rgba(255, 0, 0, 0) 5%), radial-gradient(circle at 51% 39%, white, white 3%, rgba(255, 0, 0, 0) 4%), radial-gradient(circle at 53.2% 46%, white, white 3%, rgba(255, 0, 0, 0) 4%), radial-gradient(circle at 51% 48%, white, white 3%, rgba(255, 0, 0, 0) 4%), radial-gradient(circle at 59% 51%, white, white 2%, rgba(255, 0, 0, 0)3%), radial-gradient(circle at 61% 50%, white, white 2%, rgba(255, 0, 0, 0) 3%), radial-gradient(circle at 60.8% 53%, white, white 2%, rgba(255, 0, 0, 0) 3%), radial-gradient(circle at 62.7% 47%, white, white 2%, rgba(255, 0, 0, 0) 3%), radial-gradient(circle at 62.7% 53%, white, white 2%, rgba(255, 0, 0, 0) 3%), radial-gradient(circle at 64.7% 51%, white, white 2%, rgba(255, 0, 0, 0) 3%), radial-gradient(circle at 57% 35%, rgb(255, 145, 0), rgba(92, 217, 255, 0) 2%), radial-gradient(circle at 57% 35%, rgb(255, 150, 0), rgba(92, 217, 255, 0) 4%), radial-gradient(circle at 57% 35%, rgb(255, 160, 0), rgba(92, 217, 255, 0) 6%), radial-gradient(circle at 57% 35%, rgb(255, 170, 0), rgba(92, 217, 255, 0) 8%), radial-gradient(circle at 57% 35%, rgb(255, 170, 0), rgba(92, 217, 255, 0) 10%), radial-gradient(circle at 57% 35%, rgb(255, 190, 0), rgba(92, 217, 255, 0) 12%), radial-gradient(circle at 57% 35%, rgb(255, 190, 0), rgba(92, 217, 255, 0) 13%);
}<div class="sky"></div>