Notice: Undefined index: HTTP_REFERER in /var/www/vhosts/ua5.land/api.ua5.land/wp-content/plugins/wp-cors/wp-cors.php on line 28

Notice: Undefined index: HTTP_ORIGIN in /var/www/vhosts/ua5.land/api.ua5.land/wp-content/plugins/wp-cors/wp-cors.php on line 29
CSS Trick: Overlay with Box-Shadow

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).

Check out the demo

Browser support: IE9+, Safari, Chrome, Firefox