Shadows

Reusable box-shadow presets for consistent elevation across your site.

The Shadow panel in Global Settings manages a library of box-shadow presets. Each preset becomes a CSS variable (for example --styble-shadow-light-2dp) that blocks — including Buttons — can apply, so elevation stays consistent everywhere.

Built-in presets

Styble ships with 6 shadow presets, named on a Material-style dp (elevation) scale:

Preset	Slug	Offset (x / y)	Blur	Spread	Color
Subtle (1dp)	subtle-1dp	0 / 1	2	0	rgba(0,0,0,0.12)
Light (2dp)	light-2dp	0 / 2	4	0	rgba(0,0,0,0.14)
Medium (4dp)	medium-4dp	0 / 4	6	0	rgba(0,0,0,0.16)
Strong (8dp)	strong-8dp	0 / 8	18	0	rgba(0,0,0,0.18)
Deep (12dp)	deep-12dp	0 / 12	17	0	rgba(0,0,0,0.20)
Sharp (4dp)	sharp-4dp	4 / 4	0	0	rgba(0,0,0,0.25)

All built-in presets use the Outset shadow type by default.

Editing a preset

Click a preset to open its editor. The available controls are:

Control	Options
Type	Outset or Inset.
X-offset	Horizontal offset (px).
Y-offset	Vertical offset (px).
Blur	Blur radius (px).
Spread	Spread radius (px).
Shadow Color	The shadow color (defaults to #333333 for new pickers).

A live preview box shows the current shadow as you edit.

Custom shadows

Use the Custom add control at the bottom of the panel to create your own shadows. A new shadow starts as a copy of the first preset, gets an editable Name and a unique slug, and exposes the same controls. Custom shadows can be deleted; built-in presets cannot.

Apply shadows in blocks

Because each preset is a CSS variable, you can select it from box-shadow controls in blocks and in the Buttons panel instead of re-entering shadow values by hand.

Tips

• Use a small, consistent set of elevations (for example Subtle for cards, Light for buttons, Strong for popovers) rather than many one-off shadows.
• Editing a preset updates everywhere it's referenced, so adjust the global preset rather than overriding shadows per block.
• See the Global Settings overview for how all panels fit together.