Box Shadow

Box Shadow Options
px
px
px
px
px
Inset
box-shadow: {{settings.horizontal}}px {{settings.vertical}}px {{settings.blur}}px {{settings.spread}}px rgba({{colors.rgba.r}},{{colors.rgba.b}},{{colors.rgba.g}},{{settings.opacity}}) {{settings.insetValue}};
-webkit-box-shadow: {{settings.horizontal}}px {{settings.vertical}}px {{settings.blur}}px {{settings.spread}}px rgba({{colors.rgba.r}},{{colors.rgba.b}},{{colors.rgba.g}},{{settings.opacity}}) {{settings.insetValue}};
-moz-box-shadow: {{settings.horizontal}}px {{settings.vertical}}px {{settings.blur}}px {{settings.spread}}px rgba({{colors.rgba.r}},{{colors.rgba.b}},{{colors.rgba.g}},{{settings.opacity}}) {{settings.insetValue}};
<div class="box a2z_box_shadow"></div>
<style>
.box{
    height:150px;
    width:250px;
    background-color:#283e8a;
}
.a2z_box_shadow{
    box-shadow: {{settings.horizontal}}px {{settings.vertical}}px {{settings.blur}}px {{settings.spread}}px rgba({{colors.rgba.r}},{{colors.rgba.b}},{{colors.rgba.g}},{{settings.opacity}}) {{settings.insetValue}};
    -webkit-box-shadow: {{settings.horizontal}}px {{settings.vertical}}px {{settings.blur}}px {{settings.spread}}px rgba({{colors.rgba.r}},{{colors.rgba.b}},{{colors.rgba.g}},{{settings.opacity}}) {{settings.insetValue}};
    -moz-box-shadow: {{settings.horizontal}}px {{settings.vertical}}px {{settings.blur}}px {{settings.spread}}px rgba({{colors.rgba.r}},{{colors.rgba.b}},{{colors.rgba.g}},{{settings.opacity}}) {{settings.insetValue}};
}
</style>
Top