Box shadows add styling outside or inside the rectangular boundary of an element. They can be used to add focus or depth to buttons, sections, div blocks, or any other element in your project. Here we’ll cover three aspects of box shadows:

  • Box shadow presets
  • Box shadow styles
  • Transitioning shadows
  • Stacking shadows
 

Box shadow presets

First, it’s important to note that although box shadow presets give different effects, they all use the same concept: a shadow that affects the box.

 

There are 4 box shadow presets in the Webflow Designer:

Drop shadow - a basic shadow that appears on the bottom right of the element.

Outer glow - a shadow that expands to all sides of the element equally.

Inner shadow - a basic shadow on the inside of the element.

Highlight - a subtle 1px line at the top of the element.

 

Shadow styles

Each preset can be styled however you’d like. For example, you can start by adding a drop shadow, which by default has a solid black color and other preset settings.

Color - change the color and the opacity right in the drop shadow settings. You can also select between

Outside/Inside - allows you to choose where the shadow is applied.

Angle - adjust the direction of the box shadow by using the direction arrows, clicking and dragging the dial, or simply typing in the desired angle.

 

Distance - moves the shadow closer or farther in the direction specified by the angle.

Blur - affects how focused or solid the blur of the box shadow is–0px being completely solid.

Size - affects the spread of the shadow relative to the boundaries of the element it’s on. 0px means there is a shadow the same size as the element.

 

Transitioning shadows

You can add transitions to box shadows so that interactions with them will be smooth. For example, you can add a hover effect to an element that will make the box shadow’s color grow darker. Here are the steps:

  1. Add a box shadow to an element and style with black color and 20% opacity
  2. From the States menu, select Hover
  3. Style the box shadow to have 55% opacity
  4. Go back to the States menu and select None (normal)
  5. At the bottom of the Style Panel, under Transitions & Transforms add a transition and select Box Shadow from the list
  6. Set the transition time, or leave it at the default 200ms
 

Notice that after you add the transition, the hover effect is a smooth fade between the None state and the Hover state. Without the 200ms transition, the hover effect would cut abruptly back and forth between the opacity levels. You can style the hover or pressed states with the box shadow anyway you’d like.

Stacking box shadows

You can add multiple box shadows on a single element. To create unique visual effects, style each box shadow layer differently by setting various distances or colors.

Here’s an example of how to create a subtle border and shadow using multiple box shadows:

  1. Add an outside drop shadow and set the Blur and Distance to 0px and Size to 1px
  2. Set the color of the shadow rgba(0,0,0,0.1) - black with 10% opacity
  3. Add a second outside drop shadow. Set the Blur to 8px and Distance to 2px.
  4. Set the color also to rgba(0,0,0,0.1)

You can toggle visibility of shadow layers at any time or even rearrange the order by clicking and dragging the layers into place.