Application Launcher

Docs

Site Studio

Box shadow properties

Site Studio

Box shadow properties

You're viewing version 7.3 of this page. .

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

You're viewing version 7.3 of this page. .

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

You're viewing version 7.3 of this page. .

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

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

Enter a number
Negative values are not accepted

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

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

Enter a number
Negative values are accepted

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

Set the color of the box shadow.

Select a color from the color palette
Translucent colors are accepted

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.

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

px - The value will be applied in pixels

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

Enter a number
Negative values are not accepted

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

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

Enter a number
Negative values are accepted

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

Set the color of the box shadow.

Select a color from the color palette
Translucent colors are accepted

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.

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

Box shadow type

Options and behavior:

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

Expected value:

Accepted units:

Box shadow type

Options and behavior:

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

Expected value:

Accepted units:

Box shadow type

Options and behavior:

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

Expected value:

Accepted units:

Blur radius

Expected value:

Accepted units:

Box shadow spread

Expected value:

Accepted units:

Box shadow color

Expected value:

Applying multiple box shadows

Did not find what you were looking for?

Blur radius

Expected value:

Accepted units:

Box shadow spread

Expected value:

Accepted units:

Box shadow color

Expected value:

Applying multiple box shadows

Did not find what you were looking for?