Search code examples
htmlcssbox-shadow

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


Solution

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