Question: I would like to know if (and maybe how) some text-shadow like shown in following image is possible:

![enter image description here](https://i.stack.imgur.com/z9ibm.png)

The shadow is decreasing over several list-elements. I was thinking to give each element different hover-classes depending on what element is being hovered on, but I am not even sure how to get such decreasing shadows with CSS. Would be really cool if someone would be able to teach me how to do that. If you want you can use my [jsfiddle](http://jsfiddle.net/0xsven/rbz72/) code.

Answer: 
You could try something like this

[demo](http://dabblet.com/gist/3780722)
=======================================

(click a tab to select it and see the shadows)

and get the effect using `box-shadow` on pseudo-elements of the selected tab.

Should look like this

![chrome 21 on win 7](https://i.stack.imgur.com/1kFeO.png)

**HTML**:

```
<ul class='tabs'>
    <li><a href='#' tabindex='1'>1st tab</a></li>
    <!-- as many tabs as you would like -->
    <li><a href='#' tabindex='1'>aaand another tab</a></li>
</ul>

```

Relevant **CSS**:

```
.tabs { overflow: hidden; margin-top: 7em; list-style: none; }
.tabs li { float: left; border-right: 1px dotted #222; }
.tabs a {
    display: block;
    position: relative;
    padding: 1em .66em;
    font: .66em/1.1 sans-serif;
    text-transform: uppercase;
    text-decoration: none;
}
.tabs a:focus {
    z-index: 3;
    outline: none;
    box-shadow: 0 -.5em 1.5em black;
    background: lemonchiffon;
}
.tabs a:focus:before, .tabs a:focus:after {
    position: absolute;
    bottom: -1px;
    width: 30em; height: 1px;
    box-shadow: 0 0 20px 1px black;
    content: '';
}
.tabs a:before {
    left: -30.5em;
    transform: rotate(-3deg);
    transform-origin: 100% 100%;
}
.tabs a:after {
    right: -30.5em;
    transform: rotate(3deg);
    transform-origin: 0 100%;
}

```
You could augment an `<li>` to sit within the whole width of the `<ul>`, rotate it and give it a shadow.. 

HTML:

```
    ...
    </li>
        <li class="shadow">1</li>
    </ul>

```

CSS:

```
ul
{
    overflow: hidden;
    height: 50px;
}

li.shadow
{
    width: 100%;
    height: 100%;
    position: relative;
    top: 15px;
    box-shadow: 0px 0px 45px #000;
    -webkit-transform:rotate(-1deg);
}

```

​

<http://jsfiddle.net/Kyle_Sevenoaks/4Luet/1/>