In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > MozBoxShadow

MozBoxShadow style property | webkitBoxShadow style property

Browser support:

MozBoxShadow

	3.5

webkitBoxShadow

Specifies or retrieves a comma-separated list of shadow effects to be applied to the box of the element.

Note: The MozBoxShadow property is supported in Firefox from version 3.5.

Syntax:

object.MozBoxShadow;
object.webkitBoxShadow;

You can find the related objects in the Supported by objects section below.

MozBoxShadow:	This property is read/write.
webkitBoxShadow:	This property is read/write.

CSS page for this property: -moz-box-shadow

Possible values:

The type of this property is string.

One of the following values:

•

Values in this order (use the space character to separate them):

possible but not necessary; left to personal choice

<color>

•

none

•

inherit

Description of values:

blur radius in non-negative length

The blur radius of the shadow in length units, 0 means sharp, larger values mean the shadow is blurred. For the supported length units, see the length page.

color

Color of the shadow. For the supported color values, see the colors page.

horizontal offset in length

The horizontal offset of the shadow in length units. For the supported length units, see the length page.

inherit

Takes the value of this property from the computed style of the parent element.

none

Default. No shadow is drawn.

vertical offset in length

The vertical offset of the shadow in length units. For the supported length units, see the length page.

Default: none.

Example HTML code 1:

This example illustrates the use of the -moz-box-shadow and -webkit-box-shadow properties:

<head>
    <style>
        .example {
            width: 250px;
            height: 100px;
            background: #e4e4e4;
            border: 1px solid #acacac;
            -moz-box-align: center;
            -moz-box-shadow: 5px 5px 5px gray;
            -webkit-box-shadow: 5px 5px 5px gray;
        }
    </style>
</head>
<body>
    <div class="example">
        Some text content within a division element
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the mozBoxShadow and webkitBoxShadow properties in JavaScript:

<head>
    <style>
        #myDiv {
            width: 250px;
            height: 100px;
            background: #e4e4e4;
            border: 1px solid #acacac;
            -moz-box-align: center;
            -moz-box-shadow: 5px 5px 5px gray;
            -webkit-box-shadow: 5px 5px 5px gray;
        }
    </style>
    <script type="text/javascript">
        function ChangeShadow (input) {
            var inputValue = input.value;
            var newValue = inputValue + "px " + inputValue + "px " + inputValue + "px gray";
            var div = document.getElementById ("myDiv");

            if ('mozBoxShadow' in div.style) {
                div.style.mozBoxShadow = newValue;
            } else if ('webkitBoxShadow' in div.style) {
                div.style.webkitBoxShadow = newValue;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv">
        Some text content within a division element
    </div>
    Set the size of the new shadow:
    <input onkeyup="ChangeShadow (this);" type="text" value="8" />
</body>