> ## Content Index
> Fetch the complete content index at: https://www.chrismessina.me/llms.txt
> Use this file to discover other available public pages before exploring further.

# Supah Cheap CSS Dropshadow Hack
- URL: https://www.chrismessina.me/blog/supah-cheap-css-dropshadow-hack/
- Published: 2005-10-02T17:14:09.000Z
- Updated: 2026-03-25T03:45:01.000Z
- Author: Chris Messina
- Tags: Flock, Web building, css, dropshadow, css3

[](http://flickr.com/photos/25419820@N00/48944635?ref=chrismessina.me)So I came up with my very own [stupid CSS hack](http://factorycity.net/demos/css/dropshadows/?ref=chrismessina.me) to do [dropshadows](http://flickr.com/photos/25419820@N00/48944635?ref=chrismessina.me) in Flock (and by reverse extension, Firefox). It's very much a hack and not one that I would generally recommend unless in very small quantities, but I like it because a) I invented it and b) it works for meª. So how does it work? Well, it's fairly simple, actually (and would work even better with a little Javascript-foo). So take any block level element, something like an `h1` or `h2`, give it a class of "dropshadow" and (ready for the hack?) add a span tag inside the block with a title that is identical to the text of the object. Something like this:

```

<h1>And another for good measure</h1>

```

Now here's the CSS you need (add it to the head of your document:

```

    .dropshadow {
      color: #fff; 
      margin:0; 
      padding:0; 
      position: relative;
      z-index: 1
      }
    .dropshadow span { 
      position: absolute; 
      top: 1px; 
      left: 1px; 
      color: #000; 
      z-index: -1; 
      -moz-opacity: 0.50;
      }
    .dropshadow span:after {content: attr(title);}
    
```

It works by taking your original text, positioning it relatively and then elevating it to the Z-index of 1\. Then we generate the same text from the title attribute of the span, sets the Z-index to -`1` and absolutely positions it snugly beneath the the original text. Give it a -`moz-opacity` of something between 0.00 and 1.00 and you've got a crisp dropshadow! You can of course also change the `top` and `left` values to move the dropshadow around.

Technorati Tags: [css](http://technorati.com/tag/css?ref=chrismessina.me), [dropshadow](http://technorati.com/tag/dropshadow?ref=chrismessina.me), [css3](http://technorati.com/tag/css3?ref=chrismessina.me)