Tengo un scroll cuando posiciono mis dos circulos ESTOY TRABAJANDO EN MOBILE FIRST POR LO QUE EN ESCRITORIO NO FUNCIONA AUN, el primero funciona bien y no hay scroll, pero al posicionar el segundo circulo me sale un scroll lateral e inferior, adjunto mi codigo. He intentado cambiando las posiciones de absolute y relative pero simplemente no consigo hacerlo, intente con z-index pero igual no me funciona, ayuda por favor. El circulo azul debe estar en la esquina superior derecha y el circulo rosado en la esquina inferior derecha.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
.background {
background-color: #101010;
height: 100vh;
width: 100vw;
position: relative;
z-index: 10000;
}
.circle--blue {
background: radial-gradient(81.25% 81.25% at 67.32% 18.75%, #17B3A9 0%, #0945DF 100%);
border-radius: 100%;
height: 30rem;
transform: rotate(245deg);
width: 30rem;
position: absolute;
left: -15%;
top: -10%;
z-index: 1;
}
.circle--red {
background: radial-gradient(76.75% 76.75% at 70% 23.25%, #7717B3 0%, #DF09CA 100%);
height: 20rem;
width: 20rem;
border-radius: 100%;
position: absolute;
bottom: -10%;
right: -10%;
z-index: 2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="background">
<div class="circle--blue"></div>
<div class="circle--red"></div>
</div>
</body>
</html>
selector { overflow: hidden; }
el default es auto muestra los scrollers.