CSS box-shadow: Only apply to part of an element

Question

I've got an element that I want to have a shadow accent just on one end, like this (from Photoshop):

The closest I've gotten is like this (HTML + CSS3):

So, is it possible to make the shadow fade, like in the first picture? Here's my code as is:

box-shadow: 0px 0px  5px 1px rgba(0,0,0,.4);

Answer 1

It is indeed possible to achieve this effect with CSS only, but the CSS is mind-bending:

.container {
  background-color: rgba(168,214,255,1);
  padding: 20px;
}
.tab {
  height: 50px;
  background-color: #4790CE;
  margin-bottom: 10px;
  border-radius: 20px;
  position: relative;
}

.tab.active {
  background-color: #63B6FF;
  border-radius: 20px 0 0 20px;
   box-shadow: 0 0 15px #3680BD;
}

.tab .shadow {
  position: absolute;
  top: -10px;
  left: 50px;
  right: -20px;
  bottom: -10px;
  border-radius: 20px;
  background-color: transparent;
  -webkit-border-image: -webkit-gradient(linear, left top, right top, color-stop(10%,rgba(168,214,255,0)), color-stop(80%,rgba(168,214,255,1))) 50 50 stretch;
  border-width: 10px 20px 10px 0;
}

You basically use border-image to mask the dropshadow. You would be able to achieve this without extra markup through the :after pseudo-selector, but :after doesn't play nice with animation.

View the demo on jsfiddle (Webkit only, but you can adapt it easily to FF. IE9 would be out of luck, unfortunately).

Answer 2

I found some other solution:

Put two divs inside which cut the tab in half horizontally, give them the box-shadows and appropriate border-radii, and rotate them slightly, the one CW the other CCW.

http://jsfiddle.net/Zb5Qn/32/

would be better with 3d transform, but that is only webkit

---

HTML

<div class="container">
    <div class="tab">
        <div class="content">Tab3</div>
    </div>
    <div class="tab active">
        <div class="shadow1"></div>
        <div class="shadow2"></div>
        <div class="content">Tab2</div>
    </div>
    <div class="tab">
        <div class="content">Tab3</div>
    </div>
</div>​

---

CSS

.container {
  background-color: rgba(255,255,255,1);
  padding: 20px;
}
.tab {
    position: relative;
}
.tab .content{
  height: 50px;
  background-color: #4790CE;
  margin-bottom: 10px;
  border-radius: 20px;
  position: relative;
  line-height: 50px;
    padding-left: 50px;
}

.tab.active .content {
  background-color: #63B6FF;
  border-radius: 20px 0 0 20px;
    position:relative;

}
.tab .content {
    position:relative;
    z-index:2;
 background: red;   
}
.tab .shadow1 {
   box-shadow: 0px 0px  5px 1px rgba(0,0,0,.4);
    position:absolute;
    top: 0;
    left: 0;
    right:10px;
    bottom: 50%;
    border-radius: 20px 0 0 3px;
z-index: 1;

    -moz-transform: rotate(0.5deg);
-moz-transform-origin: 0 50%;
    -webkit-transform: rotate(0.5deg);
    -webkit-transform-origin: 0 50%;
    -o-transform: rotate(0.5deg);
    -o-transform-origin: 0 50%;
    -ms-transform: rotate(0.5deg);
    -ms-transform-origin: 0 50%;




}

.shadow2 {
   box-shadow: 0px 0px  5px 1px rgba(0,0,0,.4);
    position:absolute;
    top: 50%;
    left: 0;
    right:10px;
    bottom: 0;
    border-radius: 3px 0 0 20px;
    z-index: 1;
    -webkit-transform: rotate(-0.5deg);
-webkit-transform-origin: 0 50%;
    -moz-transform: rotate(-0.5deg);
-moz-transform-origin: 0 50%;
    -o-transform: rotate(-0.5deg);
    -o-transform-origin: 0 50%;
    -ms-transform: rotate(-0.5deg); 
    -ms-transform-origin: 0 50%;
}​