Html Question posted in
Some basic documentation can be found here.

Html – How to make combined box-shadow of two blocks?

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:
enter image description here

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search