How to add a shadow to

Question

I am trying to add a shadow effect to a <rect> element in the most simple way possible. I have tried a range of different filters and CSS properties, but it does not work.

http://codepen.io/anon/pen/rhKxd

<svg width="960" height="500">
  <rect width="170" height="100" stroke-width="0" transform="translate(250,100)"></rect>
</svg>

CSS:

rect {
  fill: orange;
  box-shadow: 2px 2px 2px #666;
  -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

The only thing that works is SVG filter with offset and blur, but is this the only way to do it?

I doubt you written wrong css Ref: http://www.w3schools.com/svg/svg_feoffset.asp — Nizam Kazi, Dec 07 '13 at 23:29

score 4 · Accepted Answer · answered Dec 07 '13 at 23:21

Well, another easy way to create a shadow would be to make a copy of the object that sits behind it, slightly offset and in a different color:

<rect width="170" height="100" stroke-width="0"
      transform="translate(255,105)" class="shadow"></rect>

rect.shadow {
    fill: black;
}

Note that the .shadow rect will have to be defined before the normal one, so that it ends up layered below.

How to add a shadow to

1 Answers1