Based on the codes below, anyone know how I can remove the tiny black outline? I just want to see the circle glow.
body {
background:#1f1f1f;
width:100px;
margin:60px auto;
}
.inner {
background-color:transparent;
width:200px;
height:200px;
border-radius:100px;
box-shadow: 0 0 50px 50px rgba(255, 242, 87, 0.5), inset 0 0 30px 30px rgba(255, 242, 87, 0.5);
}
<div class="inner"></div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
body {
background:#1f1f1f;
width:100px;
margin:60px auto;
}
.inner {
background-color:transparent;
width:250px;
height:250px;
border-radius: 100%;
background-image: radial-gradient(#1f1f1f 30%, rgba(255, 242, 87, 0.5) 55%, #1f1f1f 70.71%);
}
<div class="inner"></div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
I am not much of a gradient expert myself, you can check https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients to see how u can use gradients in all kinds of ways. But I think this does what you need.
CodePudding user response:
body {
background:#1f1f1f;
width:100px;
margin:60px auto;
}
.inner {
background-color:transparent;
width:350px;
height:400px;
border-radius:100%;
background-image: radial-gradient(circle at center,
transparent 20%,
rgba(255, 242, 87, 0.15) 24%,
rgba(255, 242, 87, 0.29) 28%,
rgba(255, 242, 87, 0.40) 32%,
rgba(255, 242, 87, 0.475) 36%,
rgba(255, 242, 87, 0.5) 40%,
rgba(255, 242, 87, 0.475) 45%,
rgba(255, 242, 87, 0.40) 50%,
rgba(255, 242, 87, 0.29) 55%,
rgba(255, 242, 87, 0.15) 60%,
transparent 65%);
}
<div class="inner"></div>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>