Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
I had to go for the PNG background version... – Oskar Karlin Aug 13 '12 at 7:29
up vote 1 down vote accepted

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'}));
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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