Perceived shadow distance relative to the background along the Z axis in
Perceived shadow darkness on a scale of
For example, an element with class
.shadow-8-20 shall feel like being
8px distant from the background along the Z axis. Darkness
20 means it is a very subtle shadow.
Distance from the background.
Increase contrast using a subtle inner shadow, typically used with light images and user-provided images that may or may not have a high contrast relative to the background.
It can be used on elements directly when the images are applied as background images. It can not be applied to
<img> elements directly as they can not have inner-shadows applied. In that case, the image has to be wrapped in another element (typically a
<div>) and the shadow added to yet another element that overlays the image.
Notice how this shadow only affects light areas of images: