Distance must be one of
[1, 2, 4, 8, 16, 32].
Darkness is OPTIONAL, when provided, must be one of
[20, 40, 60, 80]. Defaults to
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.
Increase contrast using a subtle inner/outer shadow, typically used with user-provided images that may or may not have a high contrast relative to the background.
It's best to use
.shadow-contrast-inset on images. Notice how it affects light areas only.
.shadow-contrast may feel like adding a subtle blur around areas where the image is only slightly darker than the background. It's best when the background is darker than the image (or whatever foreground element is used).