Box-Shadow CSS Generator
Playground
Preview
box-shadow: {{shadow.horizontal}}px {{shadow.vertical}}px {{shadow.blur}}px {{shadow.spread}}px {{shadow.inset}} {{shadow.color}};
-webkit-box-shadow: {{shadow.horizontal}}px {{shadow.vertical}}px {{shadow.blur}}px {{shadow.spread}}px {{shadow.inset}} {{shadow.color}};
-moz-box-shadow: {{shadow.horizontal}}px {{shadow.vertical}}px {{shadow.blur}}px {{shadow.spread}}px {{shadow.inset}} {{shadow.color}};
{{copyMessage}}
test
Examples Gallery
{{ preset.name }}
Definition and Usage
The box-shadow property adds one or more shadows to an element.
CSS Syntax
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
To attach more than one shadow to an element, just add a comma-separated list of shadows
Property Values
| Value | Description |
|---|---|
| none | Default value. No shadow is displayed |
| h-offset | Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box |
| v-offset | Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box |
| blur | Optional. The blur radius. The higher the number, the more blurred the shadow will be |
| spread | Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow |
| color | Optional. The color of the shadow. The default value is the text color.
Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all. |
| inset | Optional. Changes the shadow from an outer shadow (outset) to an inner shadow |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
See also our text shadow generator.