I have two blocks. Let’s imagine it’s not possible to set one box-shadow for parents of these two blocks. I need to set box-shadow for each blocks, and it must look as if I set it to parent.
body {
padding: 50px;
}
.block1 {
padding: 20px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-radius: 4px 4px 0 0;
border-color: #d5dce3;
box-shadow: 0 0 2px #00000017,0 5px 25px #0000000a,0 1px 5px #040b170a;
}
.block2 {
padding: 20px;
border-width: 0 1px 1px 1px;
border-style: solid;
border-radius: 0 0 4px 4px;
border-color: #d5dce3;
box-shadow: 0 0 2px #00000017,0 5px 25px #0000000a,0 1px 5px #040b170a;
}<div class="block1">
Block 1
</div>
<div class="block2">
Block 2
</div>Desired look:
3
Use clip-path to remove the bottom/top shadow from .block1/.block2 like this:
body {
padding: 50px;
}
.block1 {
padding: 20px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-radius: 4px 4px 0 0;
border-color: #d5dce3;
box-shadow: 0 0 2px #00000017,0 5px 25px #0000000a,0 1px 5px #040b170a;
clip-path: inset(-25px -25px 0 -25px);
}
.block2 {
padding: 20px;
border-width: 0 1px 1px 1px;
border-style: solid;
border-radius: 0 0 4px 4px;
border-color: #d5dce3;
box-shadow: 0 0 2px #00000017,0 5px 25px #0000000a,0 1px 5px #040b170a;
clip-path: inset(0 -25px -25px -25px);
}<div class="block1">
Block 1
</div>
<div class="block2">
Block 2
</div>To get rid of the line between blocks that is caused by a rounding-type error (as mentioned by @AHaworth) we can use a slightly more complex clip-path using polygon (adjust the value 25px if needed, or use a CSS variable):
body {
padding: 50px;
}
.block1 {
padding: 20px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-radius: 4px 4px 0 0;
border-color: #d5dce3;
box-shadow: 0 0 2px #00000017, 0 5px 25px #0000000a, 0 1px 5px #040b170a;
clip-path: polygon(-25px -25px,
calc(100% + 25px) -25px,
calc(100% + 25px) 100%,
calc(100% - 1px) 100%,
calc(100% - 1px) calc(100% - 1px),
1px calc(100% - 1px),
1px 100%,
-25px 100%);
}
.block2 {
padding: 20px;
border-width: 0 1px 1px 1px;
border-style: solid;
border-radius: 0 0 4px 4px;
border-color: #d5dce3;
box-shadow: 0 0 2px #00000017, 0 5px 25px #0000000a, 0 1px 5px #040b170a;
clip-path: polygon(-25px 0,
1px 0,
1px 1px,
calc(100% - 1px) 1px,
calc(100% - 1px) 0,
calc(100% + 25px) 0,
calc(100% + 25px) calc(100% + 25px),
-25px calc(100% + 25px));
}<div class="block1">
Block 1
</div>
<div class="block2">
Block 2
</div>5
It’s a special situation, so try this.
As the number of blocks increases, the height can be adjusted.
body {
padding: 50px;
}
.block1 {
position: relative;
padding: 20px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-radius: 4px 4px 0 0;
border-color: #d5dce3;
}
.block1:after {
content: '';
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 200%; /* for 2 blocks */
box-shadow: 0 0 2px #00000017,0 5px 25px #000,0 1px 5px #040b170a; /* origin: #0000000a */
}
.block2 {
padding: 20px;
border-width: 0 1px 1px 1px;
border-style: solid;
border-radius: 0 0 4px 4px;
border-color: #d5dce3;
}<div class="block1">
Block 1
</div>
<div class="block2">
Block 2
</div>
I just modified your snippet here so you can just give it a try.
It’s indeed better using an outer div to wrap the blocks…
body {
padding: 50px;
}
.shadowed
{
border-radius: 10px;
box-shadow: 2px 2px 5px #0001,
-2px -2px 5px #0001,
0 0 10px #00F1;
}
.block
{
padding: 20px;
background-color: white;
}<div class="shadowed">
<div class="block">
Block 1
</div>
<div class="block">
Block 2
</div>
<div class="block">
Block 3
</div>
</div>1
if you play around with the y value of the shadow – the second number – you can set the top to negative and the bottom to positive. maybe even simplify the shadow to one or two values instead of three. also, you can adjust the size of the shadow – the forth value – to offset the y change like the red example.
body {
padding: 50px;
}
.block1 {
padding: 20px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-radius: 4px 4px 0 0;
border-color: #d5dce3;
box-shadow: 0 -2px 0 2px red;
}
.block2 {
padding: 20px;
border-width: 0 1px 1px 1px;
border-style: solid;
border-radius: 0 0 4px 4px;
border-color: #d5dce3;
box-shadow: 0 2px 2px #00000017,0 5px 5px #0000000a;
}<div class="block1">
Block 1
</div>
<div class="block2">
Block 2
</div>