SoftShadow feature guide
How SoftShadow builds a shadow, and what each control changes.
The light pad
The square on the left of the Shadow tab is a top view of your layer with a sun above it. Drag the sun, or focus the pad and use the arrow keys: left and right rotate the light by 5 degrees (15 with Shift), up and down move it further from or closer to the center. The line under the pad shows the light direction in degrees, where 0 is light from the top, and its distance as a percentage.
The shadow always falls away from the light. Distance sets how far the shadow is offset: at 0 percent the light is overhead and the shadow spreads evenly around the layer; at 100 percent the offset reaches the full elevation.
Shadow controls
- Name
Elevation- Type
- 0 to 64 px
- Description
How high the layer floats. The largest layer's offset reaches the elevation (scaled by the light distance) and its blur reaches twice the elevation times the softness.
- Name
Softness- Type
- 0.2x to 2x
- Description
Multiplies every blur. Lower is crisper, higher is hazier. Offsets do not change.
- Name
Layers- Type
- 2 to 8
- Description
How many shadows are stacked. More layers give a smoother falloff.
- Name
Opacity- Type
- 2 to 100 percent
- Description
The darkness of the whole stack. It is split across the layers, darkest on the smallest layer, and the layer opacities never add up to more than this value.
- Name
Layer curve- Type
- linear, ease-out quad, ease-out cubic
- Description
How the layers grow from the smallest to the largest. Linear spaces them evenly; the ease-out curves make the early layers grow faster, which reads as a softer, more diffuse shadow.
- Name
Color- Type
- black, tint, custom
- Description
Black, a custom color, or Tint from selection: the selected layer's solid fill with its hue kept, saturation capped and lightness pulled down to 18 percent, so a blue card gets a deep blue shadow. Without a solid fill in the selection, the tint falls back to black.
Applying to layers
Apply to selection writes the stack to every selected layer that supports effects. Existing drop shadows on those layers are replaced; layer blurs, background blurs and inner shadows are kept. If a layer was linked to an effect style, it is detached first so the new shadow sticks. Locked or read-only layers are skipped and the status bar counts them.
Copy CSS
The text box under the buttons always holds the current shadow as a box-shadow declaration, one layer per line. Copy CSS puts it on the clipboard. The preview card renders this exact CSS, so what you see is what you paste.
Elevation scale (Pro)
The Scale tab builds a family of shadows from the settings on the Shadow tab. Set the style group (default "Elevation"), the number of levels (2 to 12, 6 by default), and the elevation of level 1 and of the top level. Levels in between grow geometrically, so each step is the same ratio larger than the one before. The preview shows every level.
- Create effect styles writes one local effect style per level, named like
Elevation/1. Styles that already have those names, ignoring case and spaces around the slash, are updated instead of duplicated, so every layer using them follows. - Re-apply does the same rewrite, then re-links layers on the current page that SoftShadow linked to a level, including layers that were detached since. The status bar reports how many layers use the styles.
- Apply level to selection links the selected layers to the chosen level's style. A style replaces all effects on a layer, which is how Figma effect styles work.
Inner shadows (Pro)
Tick Inner shadow to build the same layered stack as inner shadows. Applying then replaces the layer's inner shadows and keeps its drop shadows. The CSS gets the inset keyword on every layer, and the elevation scale writes inner shadow styles.
Scale export (Pro)
Under Export the scale, pick CSS custom properties (--elevation-1 and so on in :root), Tailwind v3 (boxShadow keys for tailwind.config.js) or Tailwind v4 (--shadow-elevation-1 variables in @theme, used as shadow-elevation-1). Copy puts the snippet on the clipboard.
Presets (Pro)
Save the current settings under a name, pick a saved preset to load it, or delete one. Presets are stored on your device with Figma's client storage.