Set a box shadow on an element and set its Type, Horizontal and Vertical offset, Blur radius, Spread and Color.

Box shadow type

Set if the box shadow should be outside (drop shadow) or inside (inner shadow) the element.

Options and behavior:

• Outer - Set the box shadow to the outside of the element as a drop shadow
• Inner (Inset) - Set the box shadow to the inside of the element as an inner shadow

Box shadow horizontal (x-offset) and vertical (y-offset)

Set the horizontal and vertical position of the box shadow.

Expected value:

• Enter a number
• Negative values are accepted

Accepted units:

You can leave blank or specify a unit to be used.

• blank - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
• px - The value will be applied in pixels

Blur radius

Set the size of the box shadow blur radius. The larger this value, the bigger the blur and the lighter the edges become.

Expected value:

• Enter a number
• Negative values are not accepted

Accepted units:

You can leave blank or specify a unit to be used.

• blank - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
• px - The value will be applied in pixels

Box shadow spread

Set the size of the box shadow. Positive values cause the shadow to grow. Negative values cause the shadow to shrink.

Expected value:

• Enter a number
• Negative values are accepted

Accepted units:

You can leave blank or specify a unit to be used.

• blank - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
• px - The value will be applied in pixels

Box shadow color

Set the color of the box shadow.

Expected value:

• Select a color from the color palette
• Translucent colors are accepted

Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=a

Applying multiple box shadows

You can apply multiple box shadows to the same element. Each shadow can have its own settings.

To apply multiple box shadows:

• Click on Add box shadow link at the bottom of the Box shadow group
• Add values to the Box shadow fields
• Drag each row up and down to change the order of the shadows.

Box shadow properties

Blur radius

Set the size of the box shadow blur radius. The larger this value, the bigger the blur and the lighter the edges become.

Expected value:

• Enter a number
• Negative values are not accepted

Accepted units:

You can leave blank or specify a unit to be used.

• blank - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
• px - The value will be applied in pixels

Box shadow spread

Set the size of the box shadow. Positive values cause the shadow to grow. Negative values cause the shadow to shrink.

Expected value:

• Enter a number
• Negative values are accepted

Accepted units:

You can leave blank or specify a unit to be used.

• blank - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
• px - The value will be applied in pixels

Box shadow color

Set the color of the box shadow.

Expected value:

• Select a color from the color palette
• Translucent colors are accepted

Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=a

Applying multiple box shadows

You can apply multiple box shadows to the same element. Each shadow can have its own settings.

To apply multiple box shadows:

• Click on Add box shadow link at the bottom of the Box shadow group
• Add values to the Box shadow fields
• Drag each row up and down to change the order of the shadows.