---
title: "Box shadow properties"
date: "2017-11-11T12:36:51+00:00"
summary: "Customize element box shadows with precision. Control type, offset, blur, spread, and color. Apply multiple shadows for advanced effects. Perfect for designers and developers."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/box-shadow-properties"
id: "3b3e20d6-68e0-4618-a115-3f18c3fb5510"
---

Table of contents will be added

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](https://sitestudiodocs.acquia.com/6.0/user-guide/configuring-your-base-unit-settings "Configuring your 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](/drupal-starter-kits/add-ons/site-studio/configuring-your-base-unit-settings "Configuring your 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](/drupal-starter-kits/add-ons/site-studio/configuring-your-base-unit-settings "Configuring your 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](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.