Is it possible to create shadow like that in CSS3?

Question

I'm almost sure that it's not possible to create shadows like that in CSS3 but I'm asking just in case anybody tried that and found a way:

enter image description here

I have sidebar to the right (limited height) and longer content the the left. The shadow fades in at the beginning and fades out at the end. Can this shadow be purely procedural (no raster images at all)?

• BiAiB: maybe you can cheat by adding a white shadow on the bottom and top
• SpaceBeers: css3.info/preview/box-shadow
• Atadj: @BiAiB That's the kind of tricks I'm looking for. Some multiple gradients or multiple shadows perhaps.
• Atadj: @SpaceBeers I've seen this before obviously. I searched Google with no matching results.
• SpaceBeers: You "could" try 3 background images. One for each fade and one for the middle section. I'll try and do an example quickly.

Answer 1

You can use radial gradients like so:

#leftshadow
{
 margin-left: 10px;
 height: 200px;
 width: 20px;
 border-left:1px solid #ebebeb;
 border-left:1px solid rgba(0,0,0,0.4);
 background:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.3)),to(rgba(0,0,0,0)));
 -webkit-mask-box-image:-webkit-gradient(linear,left top,right bottom,color-stop(0.0,rgba(0,0,0,0)),color-stop(0.5,rgba(0,0,0,.8)),color-stop(1.0,rgba(0,0,0,0)));
 background-image:-moz-radial-gradient(left,ellipse farthest-side,rgba(0,0,0,.3),rgba(0,0,0,0));
}​

jsFiddle here

Different tweak is here

---

Original Answer

If you require a "simple" inset shadow you can also achieve this like so:

#leftshadow
{
 -webkit-box-shadow: inset 5px 0px 5px -2px rgba(0,0,0,0.4);
 -moz-box-shadow: inset 5px 0px 5px -2px rgba(0,0,0,0.4);
 box-shadow: inset inset 5px 0px 5px -2px rgba(0,0,0,0.4);
}​

jsFiddle here

• Atadj: Yes but I'm mostly concerned about top and bottom of that shadow. Is there a way to start it like it's fading in? Soft start rather than hard edges.
• Atadj: After your edit: YES, I think that's perfect or almost perfect :) I'll make a couple of adjustments and see if it works.
• Atadj: The main limitation is that width: 15px; from what I see but if there's no way to get around width property I can make secondary container. What do you think about width: 15px;? Can this be eliminated and my width used instead?
• Chris: @NikolaK. can you revert the -1 now? :P
• Chris: @Flow What I do is specify the width (can be pixels or %) then absolute position the shadow within a container

Answer 2

here's the trick I talked about, that is, layering a secondary div with a white shadow:

http://jsfiddle.net/dmezK/

it is not perfect but you can tweak it to fit your needs, I think.

here's the HTML:

<div id="main">
<div id="cheat"></div>
</div>​

here's the CSS:

#main
{
 width: 100px;
 height: 300px;
 -webkit-box-shadow: inset 10px 0px 5px -2px #888 ;
 position: relative;
}
#cheat {
 width: 300px;
 height: 300px;
 -webkit-box-shadow: inset 10px 0px 5px -50px white ;
 position: absolute;
 left: -100px;
}

note: maybe you could use multiple box shadows, but it isn't as widely supported.

• Atadj: Thank you for your answer. I was mostly concerned about top and bottom of that shadow. Soft start rather than hard edges.

Answer 3

This is the closest I could make:

div {
 width: 300px;
 height: 600px;
 border: solid 1px;
 box-shadow:
 inset 0px 10px 10px #fff, 
 inset 0px -10px 10px #fff,
 inset 10px 0px 20px rgba(0, 0, 0, .3);
}

Live demo: Tinkerbin

• Atadj: Thank you for your answer! It's very close but still there is top and bottom shadow inside entire container. Thank you anyway :) It's great that the solution has been already found. I didn't expect that this can be done using pure CSS3.

Answer 4

try this http://jsfiddle.net/6QSEc/1/

div{
 height:200px;
 width:100px;
 background-color:white;
 border:1px solid #f1f1f2;
 box-shadow:10px 0px 20px -10px rgba(0,0,0,0.5) inset;
}

• Atadj: Thank you for your answer. I was mostly concerned about top and bottom of that shadow. Soft start rather than hard edges.

Answer 5

.box {
 z-index: 100;
 border: none;
 padding: 0 0 0 10px; 
 background-image: url("images/topShadow"), url('images/bottomShadow'), url('images/shadow');
 background-position: 0 top, left top, 0 bottom;
 background-repeat: no-repeat, repeat-x, no-repeat;
}

Ok this is untested but should work with some tweaking that I don't have time for at the moment. You have 3 images, top, middle, and bottom. You use CSS3 multiple background images to use this as your left border, just add some padding to the left of the box. The order is important as it handles the layering of the images. The 1st one will be on top of all the others. The order acts as z-index for the images.

• Atadj: Thank you for your answer! That's the solution I'm using right now but since there are devices like Macbooks with Retina display or iPad3 and more coming - raster images don't work that nicely. It's better to replace everything with CSS3. Once again thanks! :)