Box-Shadow Being Cut Off

box-shadow being cut off

If box-shadow is being cut-off, make sure overflow:visible is set on any div(s) your element is contained in.

Box Shadow Cut off

here is the solution on your query.

.grid-wrapper {
  overflow-y: scroll;
  height: 450px;
  overflow-x: hidden;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 350px);
  grid-template-rows: min-content;
  gap: 1.75rem 3rem;
  margin-top: 1.5rem;
  width: 100%;
  padding: 16px;
  padding-bottom: 16px;
  margin: -10px;
  margin-top: 1rem;
  margin-bottom: -16px;
  overflow: hidden;
  outline: 1px solid red;
}

.card {
  padding: 1rem 1.25rem;
  outline: 1px solid blue;
  width: 350px;
  height: 245px;
  box-shadow: -5px -5px 10px 0px white, 10px 10px 15px 0px black;
}

<div class="grid-wrapper">
  <div class="grid">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

Box-shadow being cut off for floating boxes next to each other

z-index is still the answer, but you can only apply z-index on an element with position:relative, or position:absolute.

So apply position:relative to all of your elements, and then apply the z-index to the active one.

box-shadow cut off when using column-count

Add display: inline-flex and width: 100% properties. break-inside: avoid-column property is invalid.

.container {  column-count: 2;  column-gap: 16px;  width: 500px;  margin-top: -2px;  margin-bottom: -14px;}
.item {  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);  border-radius: 3px;  margin-top: 2px;  margin-bottom: 14px;  height: 64px;  display: inline-flex;  align-items: center;  justify-content: center;  width: 100%;}

<div class="container">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div>  <div class="item">5</div></div>

Box-shadow is being cut off of the image

Because of overflow, bow-shadow gets cut-off (already said) , You could also use transform to easily keep the shadows within the visible area.

increase first the hidden overflow area then decrease what stands inside. smaller it won't get clipped anymore.

example of the idea with a short fixed involving : transform:scale(1.1)VS transform:scale(0.9) to keep a close ratio of the initial layout size.

.curtain {
  width: 550px;
  height: 250px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background: #000000;
  box-sizing: border-box;
}
.split-wrap{
transform:scale(1.1);
}
.jacketa {
  position: absolute;
  width: 180px;
  height: 180px;
  cursor: pointer;
  border-radius: 50%;
  background: #130e85;
  border: 3px solid #f91f6e;
  box-sizing: border-box;
  box-shadow: 0 0 20px 2px #f9066bf7;
  transform:scale(0.9);
   
}
.jacketa .coversvg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
}
.jacketa .coversvg {
  width: 70px;
  height: 75.4px;
  fill: none;
  stroke-width: 4px;
  stroke-miterlimit: 10;
}

.jacketa .coversvg .back {
  stroke: #000;
  opacity: 0.15;
}

.jacketa .coversvg .front {
  stroke: #08f9ff;
  stroke-dasharray: 150;
  stroke-dashoffset: 1500;
  animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flicker-1 {
  0%,
  100% {
    opacity: 1;
  }

  41.99% {
    opacity: 1;
  }

  42% {
    opacity: 0;
  }

  43% {
    opacity: 0;
  }

  43.01% {
    opacity: 1;
  }

  47.99% {
    opacity: 1;
  }

  48% {
    opacity: 0;
  }

  49% {
    opacity: 0;
  }

  49.01% {
    opacity: 1;
  }
}

.split-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 180px;
  height: 180px;
  margin: auto;
  border-radius: 50%;
  transition: 0.5s ease;
}

.j1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 5s ease;
}
.j2 {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 5s ease;
}
.j2 .jacketa {
  right: 0;
  left: auto;
}
.curtain:hover .j1 {
  transform: translateX(-500%);
}
.curtain:hover .j2 {
  transform: translateX(500%);
}

<div class="curtain">

  <div class="split-wrap">
    <div class="j1">
      <div class="jacketa" title="[ Enjoy The Music ]">
        <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
          <title>[ Enjoy The Music ]</title>
          <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
          <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
        </svg>
      </div>
    </div>
    <div class="j2">
      <div class="jacketa" title="[ Enjoy The Music ]">
        <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
          <title>[ Enjoy The Music ]</title>
          <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
          <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
        </svg>
      </div>
    </div>
  </div>
</div>

Safari cuts off box-shadow of element inside button

I did some more searching (for non-box-shadow-related clipping on buttons in Safari) and found a simple solution.

Adding position: relative to .shadow lets the element extend beyond the bounds of the <button> tag in Safari. It sounds like this would also work for text overflowing and such.

---

Related Topics