CODEWITHSUNDEEP
htmlcss
Adrian Sărmaș
Adrian Sărmaș

Reputation: 127

Add box-shadow only for opposite corners of div

I need to add box-shadow for a div to make it look like the image below. The box shadow should be visible on vertical edges with fading to white and on horizontal edges with fading to white at 50% of edge length. I need to make this working with just html & css (no javascript or external libraries).

layout example

My take on it so far (I does not look very nice while I resize the browser):

div {
    position: relative;
    padding: 15px;
    margin: 20px 0;
    height: 100px;
}

div::before {
    content: "";
    display: block;
    position: absolute;
    width: 500px;
    height: 100%;
    -webkit-box-shadow: 300px -14px 20px -4px white, -9px 84px 20px -4px #fff, -9px -7px 10px -10px #abaaaa;
    box-shadow: 300px -14px 20px -4px white, -9px 84px 20px -4px #fff, -9px -7px 10px -10px #abaaaa;
    top: -3px;
    left: -3px;
    border-radius: 5px;
    z-index: -1;
}

div::after {
    content: "";
    display: block;
    position: absolute;
    width: 30vw;
    height: 100%;
    -webkit-box-shadow: -300px 15px 38px -4px #fff, 4px -13px 3px -4px #fff, 9px 9px 10px -10px #abaaaa;
    box-shadow: -300px 15px 38px -4px #fff, 4px -13px 3px -4px #fff, 9px 9px 10px -10px #abaaaa;
    border-radius: 5px;
    top: -3px;
    right: -3px;
    z-index: -1;
}
<div>
  Text content
</div>

Any ideas on how to improve this?

Upvotes: 0

Views: 143

Answers (2)

Jon Buder
Jon Buder

Reputation: 68

I don't have enough reputation to comment on Abel's answer, but anyways I was playing with it to learn more about the linear-gradient technique and I think I got it slightly closer to the example image with some tweaks:

background: linear-gradient(160deg, rgba(0,0,0,0.3) 0%, rgba(255,255,255,0.5) 20%, rgba(255,255,255,0.5) 80%, rgba(0,0,0,0.3) 100%);

I found the 160 degree angle to be closer as well as having a four-stop gradient with black at 0%, white at 20% and 80% and black again at 100% with 0.3 alpha (opacity) on the black portions.

Upvotes: 0

Abel de Bruijn
Abel de Bruijn

Reputation: 180

div {
  position:relative;
  background: gold;
  width: 90vw;
  height: 100px;
  margin: 25px auto;
  border-radius:5px;
}

div::before {
    content: "";
    display: block;
    position: absolute;
    height:calc(100px + 1vw);
    width: 91vw;
    left: -0.5vw;
    top: -5%;
    z-index: -1;
    border-radius: 5px;
    background: linear-gradient(10deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.5) 100%);
    filter:blur(3px);
}

this might be able to help you

Upvotes: 1

Related Questions