Skip to main content
Shadows communicate elevation and depth, helping users understand which elements sit on top of others. Coreframe generates a shadow scale as Figma effect styles and semantic aliases, giving each component in your system a named elevation token rather than a one-off box-shadow value.

​
How to configure shadow tokens

Open Coreframe and click the Shadows tab. The generator has two sections: Primitive and Semantic. On the Primitive tab you’ll find eight default shadow levels based on the Tailwind shadow scale: Each shadow can have multiple layers. Click Edit on any row to open the layer editor. For each layer you can set:
  • X and Y offset (px) — control the direction of the shadow
  • Blur (px) — the feathering radius
  • Spread (px) — how far the shadow expands before blurring
  • Color — a hex color picker
  • Opacity — a 0–1 value applied via rgb(r g b / opacity) syntax
  • Inset — toggle to create an inset (inner) shadow
Click Add Layer to stack additional shadow layers on a single token, or click the trash icon to remove one. The CSS Output panel at the bottom of the editor shows the full box-shadow CSS value in real time. Click Add Custom Shadow to create a new shadow token from scratch. Click Map Semantic Shadows to advance to the Semantic tab. On the Semantic tab you’ll see pre-built mappings from component roles to primitive shadows: Pro users can change any mapping or add new semantic shadow tokens. Click Generate Shadows to push all styles into Figma.

​
What gets created

Coreframe generates the following in your Figma document:
  • Figma effect styles — each primitive shadow becomes an effect style stored under shadow/{name}. These appear in the Figma effects panel and can be applied to any layer directly from the UI.
  • Semantic shadow references — both primitive and semantic shadow definitions are captured in the token payload so that developer export maps component names to shadow values rather than raw CSS.