Shadows
LiftKit is more than just a collection of buttons and cards—it's a design system that empowers you to create your own unique components. Instead of pre-made UI elements, LiftKit provides the building blocks: variables and guidelines that shape the look and feel of your designs. Whether you're going for sleek minimalism or bold brutalism, LiftKit adapts to your creative vision, giving you the freedom to craft any aesthetic, from scratch, with ease.
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.
Figure 1. Animation demonstrating state layer implementation.
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.
.shadow-sm {
align-items: flex-start;
box-shadow: 0 0 1px 0 var(--light__shadow_lkv);
flex: 0 auto;
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: flex-start;
position: relative;
z-index: 1;
}
.shadow-md {
align-items: flex-start;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.11),
0 0 1px #727272;
flex: 0 auto;
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: flex-start;
position: relative;
z-index: 2;
}
.shadow-lg {
align-items: flex-start;
box-shadow: 0 11px 15px -3px rgba(0, 0, 0, 0.11),
0 2px 6px rgba(0, 0, 0, 0.07), 0 0 1px #727272;
flex: 0 auto;
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: flex-start;
position: relative;
z-index: 3;
}
.shadow-xl {
align-items: flex-start;
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.09), 0 5px 11px rgba(0, 0, 0, 0.12),
0 0 1px #727272;
flex: 0 auto;
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: flex-start;
position: relative;
z-index: 4;
}
.shadow-2xl {
align-items: flex-start;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.23), 0 9px 18px rgba(0, 0, 0, 0.1),
0 0 1px #727272;
flex: 0 auto;
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: flex-start;
position: relative;
z-index: 5;
}