Shadows
Shadows are added outside or inside the element’s border. You can use shadows to create focus or depth on sections, div-blocks, buttons, images, or any other element.
To add the shadow to an element:
- Select an element on the Canvas or on the Layers tab in the left panel
- Find the Effects section on the Styles tab in the right panel and click on “+” to the right of the Shadows property:
Drop Shadow will be added by default with pre-set options.
You can also change the shadow type to inner shadow. To do this, click on its name and select Inner Shadow from the list.
To edit the shadow settings, click on the button to the left of its name.
In the settings window, you can find the following options:
- Shadow direction. The shadow value along the x and y axis. Values are specified in pixels and can be either positive or negative.
- Blur. This option affects how focused the shadow blur is. The value is specified in pixels.
- Spread. Visually reduces or enlarges the shadow. The value is specified in pixels and can be either positive or negative.
- Color. The color and opacity of the shadow.
You can apply multiple shadows to an element by adding multiple layers (use the "+" icon). You can also enable/disable visibility for each layer by selecting the "eye" icon, and delete a layer with "-". To reorder the shadow layers, drag the layer using the icon to the left of its name.
Creating borders with shadows
You can create unique visual effects with layered shadows.
1st shadow layer - frame border:
- Add the drop shadow and set x and y and Blur to 0px, set Shadow Spread to 1px.
- Set Shadow Color to black with opacity 20%.
2nd shadow layer – shadow of the frame:
- Add the drop shadow and set Blur to 3px, set Shadow Spread to 3px.
- Set Shadow Color to black with opacity 20%.
The border created with the shadow do not affect the size of an element and content next to it.
When creating shadows for different element states, it is recommended to add Transitions to make the interaction smooth. For example, by adding a hover-state shadow to an element, you get a sharp toggle effect on hover. Add a Transition effect so that the shadow fades in and out smoothly. This can be done in the Effects section by clicking “+” next to the Transitions option.
