Shadows
Choose a Starter Kit
Get started with LiftKit using one of the official starter kits for Webflow, Figma, or CSS.
Quickstart
Get a feel for LiftKit by following along with this short tutorial.
Overview
Shadows are used to show elevation, and their numbers should correspond roughly to their z-index. But this is just a guideline. General rules tell us shadows get larger and softer the higher up an element is raised. That means .shadow-xs basically looks like an outline, while .shadow-xl looks like a very dramatic drop shadow.
You can't use color variables with box shadows because you have to use rgba in order to control their opacity, and color variables are defined as hex codes.
Give Us Feedback
Click or tap to reveal form.