UI
Consistency across UI and motion
Radius
Consistent edge radiuses throughout an interface.
Property group
Applies to
--radius-*border-radius
1
.button {
2
border-radius: var(--radius-md);
3
}
Copied!
Property
Value
--radius-xs3px--radius-sm6px--radius-md8px--radius-lg12px--radius-xl16px--radius-100100%--radius-full9999pxElevation
Box shadows for creating realistic elevation in 3d space.
Property group
Applies to
--elevation-*box-shadow
1
.card {
2
box-shadow: var(--elevation-1);
3
}
Copied!
Property
Value
--elevation-10 1px 2px 0 rgba(0, 0, 0, 0.05)--elevation-20 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)--elevation-30 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)--elevation-40 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)--elevation-50 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)--elevation-60 25px 50px -12px rgba(0, 0, 0, 0.25)Blur
Backdrop blur effects for giving a sense of depth to an interface
Text
Applies to
--blur-*backdrop-filter
1
.overlay {
2
backdrop-filter: var(--blur-md);
3
}
Copied!
Property
Value
--blur-xsblur(4px)--blur-smblur(8px)--blur-mdblur(16px)--blur-lgblur(24px)--blur-xlblur(40px)Easing
Easing functions for realistic movement in transitions and animations. Inspired by the Material Design guidelines on motion.
Property group
Applies to
--easing-*transition and animation1
.animated {
2
transition: all 300ms var(--easing-standard);
3
}
Copied!
Property
Value
--easing-standardcubic-bezier(0.4, 0, 0.2, 1)--easing-acceleratecubic-bezier(0.4, 0, 1, 1)--easing-deceleratecubic-bezier(0, 0, 0.2, 1)Layers
Consistent layering throughout an interface
Property group
Applies to
--layer-*z-index1
.elevated {
2
position: relative;
3
z-index: var(--layer-1);
4
}
Copied!
Property
Value
--layer-below-1--layer-110--layer-220--layer-330--layer-440--layer-550--layer-top2147483647Last modified 5mo ago