CODEWITHSUNDEEP
htmlcssbox-shadow
user3003810
user3003810

Reputation: 961

inset box-shadow showing a border around and need to hide it

I created a div with css to make it circle, and I added inner box shadow 

.circle {
  width: 690px;
  height: 690px;
  background: #000;
  border-radius: 50%;
  box-shadow: inset 0 0 80px 50px rgba(255, 255, 255, 1);
  position: absolute;
  left: -100px;
  top: -100px;
}
<div class="circle"></div>

enter image description here

Upvotes: 2

Views: 912

Answers (1)

Temani Afif
Temani Afif

Reputation: 274096

Add a small padding and adjust the background-clip:

.circle {
  width: 690px;
  height: 690px;
  background: #000;
  border-radius: 50%;
  box-shadow: inset 0 0 80px 50px rgba(255, 255, 255, 1);
  padding: 1px;
  background-clip: content-box;
  position: absolute;
  left: -100px;
  top: -100px;
}
<div class="circle"></div>

You can also recreate the same using radial-gradient:

.circle {
  width: 690px;
  height: 690px;
  background: radial-gradient(#000 57%,transparent 70%);
  border-radius: 50%;
  position: absolute;
  left: -100px;
  top: -100px;
}
<div class="circle"></div>

Upvotes: 5

Related Questions