All Collections
Getting Started
The Box Shadow Panel
The Box Shadow Panel

And drop shadows, inset shadows, and glows to your page elements.

Alex Piepenbrink avatar
Written by Alex Piepenbrink
Updated over a week ago

To open the Box Shadow Panel, select it from the "Window" dropdown in the main menu, or click this icon in the right toolbar:

The Box Shadow Panel lets you apply a shadow to any element on the page, and to specify its size and orientation.

Outset vs. Inset Shadows

An "outset" shadow will appear behind the selected element. You can use this to make it appear as though the element is floating above the page, or to give an element an outer "glow".

An "inset" shadow will appear within the element. Use this to darken the edges of an element, or to make it appear inset within the canvas.

Shadow Settings

The appearance of a shadow is determined by a few different settings within the Box Shadow Panel.
โ€‹
The horizontal offset and vertical offset allow you to define the direction of the shadow, and the distance between the shadow and the element. Manipulating this is much like moving a virtual "light source" around the page.

The easiest way to quickly change these settings is to drag the blue dot around within the panel:

The blur radius determines how far the shadow will gradually blur before it disappears. A high value for the blur radius will create a very diffuse shadow, and a value of 0 would create sharp edges.

The spread radius specifies how far the shadow will extend before it begins to blur out. A high value here will allow you to grow or shrink the overall size of the shadow.
โ€‹

Adjusting Shadow Color

By default, box shadows are grey, but you can customize the color using the Color Panel.

Select the option at the top right to specify the shadow color, then choose a swatch or select a color using the picker.

Did this answer your question?