webflow svelte components logoWFS

Shadows

A set of tokens that communicate component elevation on the z-axis in the interface.

Shadow lg
--wfs-shadow-lg

Shadows help create visual hierarchy by simulating elevation in the interface. They are commonly used to highlight important containers that float above the main content.

Examples

Shadow xs
--wfs-shadow-xs
Shadow sm
--wfs-shadow-sm
Shadow md
--wfs-shadow-md
Shadow lg
--wfs-shadow-lg
Shadow action
--wfs-shadow-action
Shadow menu
--wfs-shadow-menu
Shadow input
--wfs-shadow-input

On this page