Box Shadow

A soft shadow behind the column that makes it look raised off the page.

Where to find it
Labelled Box Shadow in the "Selected Column" section of the Modify drawer.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
Underlying CSS
boxShadow

In plain English

A box shadow is a shadow cast by the column, and it is what makes a card look like it is floating slightly above the page rather than painted onto it.

It is built from a few numbers. The horizontal and vertical offsets say which way the light is coming from — a small positive vertical offset with no horizontal offset reads as light from directly above, which is what most designs use. Blur controls how soft the edge is: zero is a hard-edged block of colour, larger numbers fade it out. Spread makes the whole shadow bigger or smaller before the blur is applied. And then there is the colour.

The "inset" switch flips the shadow inside the box, which reads as a dent or a recessed panel rather than something raised.

The editor shows a live preview, so the fastest way to learn this setting is to nudge the numbers and watch.

When you would use it

  • Cards should lift off the background and feel clickable.
  • A dropdown or overlay needs to read as sitting above the content behind it.
  • You want a subtle sense of depth without adding borders everywhere.

How to change it

  1. Select the column, open "Selected Column", then "Box Shadow".
  2. Start with a vertical offset of about 2px, a blur of about 8px, and a translucent black colour. That is a good neutral card shadow.
  3. Increase the offset and blur together for a stronger lift; keep them small for a subtle one.
  4. Tick "inset" if you want the shadow inside the box instead.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • Fully opaque black looks heavy and dated. Use a translucent colour, or a very dark version of your background colour, for a shadow that reads as real light.
  • Blur without offset produces a glow radiating in all directions rather than a shadow. That can be the effect you want, but it is rarely a shadow.
  • Shadows on many elements at once flatten the effect. Reserve them for things that genuinely sit above the page.

Related settings

For developers

The technical reference for what this setting produces: MDN: box-shadow. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.

Where to go next