Fandom

HTML & CSS Wiki

Box-shadow

648pages on
this wiki
Add New Page
Comments0 Share

The CSS box-shadow property allows users to cast a drop shadow from the frame of almost any arbitrary element. If a border-radius is specified on the element with a box shadow, the box shadow will take on the same rounded corners. The z-ordering of multiple box shadows is the same as multiple text-shadows (the first specified shadow is on top). HTML & CSS Example Codes

ExampleEdit

Here is one example of using box-shadow:

<div style="box-shadow: 0 0 10px white; padding: 10px; background-color: #111; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;">Hello World!</div>

The result is:

Hello World!

ValuesEdit

Multiple values may be used by separating each one with a white space.

Value Description
inset Default. If not specified, the shadow is assumed to be a drop shadow (as if the box were raised above the content). The presence of inset changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn above background, but below border and content.
<offset-x> <offset-y> This is required. This are two <length> values to set the shadow offset. <offset-x> specifies the horizontal distance. Negative values place the shadow to the left of the element. <offset-y> specifies the vertical distance. Negative values place the shadow above the element. Examples of lengths are px, em, etc. If both values are 0, the shadow is placed behind the element (and may generate a blur effect if <blur-radius> and/or <spread-radius> is set).
<blur-radius> This is a third <length> value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow's edge is sharp).
<spread-radius> This is a fourth <length> value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
<color> Uses a valid color name or color code as the value. If not specified, the color depends on the browser. In Gecko (Firefox), the value of the color property is used. WebKit's shadow is transparent and therefore useless if <color> is omitted.


HTML example:

<div style="-moz-box-shadow:0 0 100px white; box-shadow:0 0 100px white; 
-webkit-box-shadow:0 0 100px white; background:black; padding:10px;">
TEXT</div>


CSS example:

div {
     -moz-box-shadow:0 0 100px white;
     box-shadow:0 0 100px white;
     -webkit-box-shadow:0 0 100px white; 
     background:black;
     padding:10px;
}

See AlsoEdit

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.