box shadows not appearing at the edges-CodePudding

I'm working on some css shapes. The problem is when I try to include box-shadow, it is going well on the rounded sides but it's not looking good on the other sides.

Here's the output.

Is there any way to make the shadows follow the border on those 2 other sides?

I used the following code -

<style>
.box {
border-radius: 10px 100px / 120px;
            padding: 40px;
            border: none;
            width: 40px; 
            height: 40px;
            box-shadow:  5px -5px 10px #a200a2,
             -5px 5px 10px #a200a2;
background:black;
}
</style>

<div class='box'></div>

CodePudding user response：

I tried to make an example and noticed that filter does not help here much because of the way how a shadow is formed for such shapes. An alternative I've found for it is the fourth parameter in box-shadow (spread-radius).

spread-radius This is a fourth value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

.shape-container {
  width: 100%;
  height: 200px;  
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
}

.shape {
  font-family: sans-serif;
  border-radius: 30px 3px 30px 3px;
  
  display: inline-block;
  height: 100px;
  width: 100px;
  background-color: white;
  text-align: center;
  line-height: 100px;
  font-size: 13px;
}

.shape.box-shadow {
  box-shadow: 0 0 6px black;
}


.shape.box-shadow-2 {
  box-shadow: 0 0 6px 3px rgba(0,0,0,0.45);
}

.shape.drop-shadow {
  filter: drop-shadow(0 0 3px black);
}

<div class="shape-container">
  <span class="shape box-shadow">box-shadow</span>
  <span class="shape box-shadow-2">box-shadow-2</span>
  <span class="shape drop-shadow">drop-shadow</span>
</div>

CodePudding user response：

box-shadow has its limits, but you can achieve it with drop-shadow():

filter:
  drop-shadow(0 5px 5px rgba(160, 0, 210, 0.9))
  drop-shadow(0 10px 10px rgba(160, 0, 210, 0.9));

Note: This function is somewhat similar to the box-shadow property. The box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()

In theory you can also add ::after positioned bellow with filter: blur(20px); and create and tweak your own shadow shape and color.