Original image Live example SVG Equivalent Static example
A rectangular image of a pencil marking a multiple choice Optical Mark Recognition, or OMR, form. The OMR photo with a black drop shadow visible below the image and to the right. The offset and blur-radius values produce a soft, rounded shadow.
Rectangular OMR photo The same image as the previous two examples, but embedded within an SVG element. A filter element with a gaussian blur and offset is applied. The offset and blur values (set with the stdDeviation attribute on the feGaussianBlur element) produce a shadow that has less spread and is more rectangular than the CSS example. The shadow is visible below and to the right of the image, but with a smaller spread. The result is a shadow that is closer to the rectangular shape of the original image.
A screenshot of the OMR image with drop shadow applied to show the effect for browsers that do not support the CSS or SVG filters.
An edited version of the original image that uses transparency to achieve an irregular shape at the bottom and add a small hole. The image also has a gradient transparency that starts on the right edge and fades towards the other side. Image with black drop shadow applied which is visible below and to the right of the image. The shadow follows the curves of the irregularly shaped bottom and is also visible through the holes The shadow color is not fully opaque, so it displays as a dark gray over the white background of the page and is visible below most of the image, which makes it appear more gray than the original example.
OMR photo with irregular bottom edge The same image as the previous two examples, but embedded within an SVG element. A drop shadow has been added with a filter element using a feGaussianBlur and an feOffset element. The shadow follows the irregular shape of the image and is visible under the transparent gradient of the image.
A screenshot of the previous example image with drop shadow applied to show the effect in browsers that do not support the CSS or SVG filters.