CSS Outer shadow + Inner shadow create an unwanted black outline

user_8754221 0
Viewed 58

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>

css
2 Answers

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>
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.

user_148040660 

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>

user_1091220
Related