Perceived shadow distance relative to the background along the Z axis in px
unit.
Perceived shadow darkness on a scale of 0-100
. Default 20
.
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.
Darkness.
Inner shadows.
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: