CODEWITHSUNDEEP
htmlcssshadow
travisjayday
travisjayday

Reputation: 814

Special CSS shadow box &| other work-around suggestion

I'm writing some HTML/CSS and I need to create a special shadow that has a custom width & height around a div.
enter image description here

What's the best way to do it? Right now, I've been trying to use two overlapping box-shadow's but I can't find a way to make it look like the image.

I know I could just create two divs and slap them on each other by specifying custom heights and whatnot, but I'm wondering if there's a cleaner, css only approach.

Upvotes: 2

Views: 122

Answers (1)

Joe B.
Joe B.

Reputation: 1174

You can use this for box-shadow. I wasn't sure if you wanted the green bar displayed as well. So I left it off.

There is a spread radius option in box-shadow that is often never used:

/* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 60px 0 0 -30px #ccc;

In this case you would set this to a negative radius in order to achieve your desired effect. Do the same for the opposite side and it should work. 

div{
  background: cyan;
  position: relative;
  height: 600px;
  width: 400px;
  margin: 50px auto;
  box-shadow: 
    60px 0 0 -30px #ccc,
    -60px 0 0 -30px #ccc;
}
<div></div>

The other option is to use the :before or :after pseudos

Upvotes: 2

Related Questions