Use All Five Squiggle Graphic

CSS Trick: Overlay with Box-Shadow

I am happy to share that I discovered a simple technique to create a lightbox with a few lines of CSS and one DOM element.

I discovered a simple technique to create a lightbox with a few lines of CSS and one DOM element. The key is to use box-shadow and set a super large spread so that it covers even the largest viewports. I added on a CSS transition as well in case you wanted to animate the opacity of the overlay (a neat little effect).

The HTML

The CSS

Check out the demo

Browser support: IE9+, Safari, Chrome, Firefox


Bret Morris is a Developer at Use All Five.
Follow Bret on Twitter

Get new perspectives and the latest information delivered to your inbox: