Not sure if this question should be here in the GIS section or if I should move over to a more common html/css place, but here we go:

I'd like to have an inner shadow of my OpenLayers map canvas so that it looks like that the map is underneath the rest of the web page. Example:


The square pattern is where the map will be later. Ideal would be to just use

box-shadow: inset 0 0 5px 5px black;

but the map tiles will be displayed on top of the frame which makes the shadow disappear.

Any ideas how to achieve this only with CSS? I really don't want to use lots of divs with PNG files as backgrounds, but I guess I have to?

  • I had to go for the PNG background version...
    – oskarlin
    Aug 13, 2012 at 7:29

1 Answer 1


I had the same question and found example code uploaded to github by Frédéric Junod:


The key parts of it are the following CSS and JS.

.boxShadow {
  box-shadow: inset 3px 3px 5px #888;
  width: 100%;
  height: 100%;
  pointer-events: none;
map.addControl(new OpenLayers.Control({displayClass: 'boxShadow'}));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.