Playground

Below are some sliders to play around with some box-shadow values. In this case, I use 5 values to set the box shadow: offset-x, offset-y, blur radius, spread radius and color. This is the full declaration of a CSS box shadow with all of its properties.

Optionally, you can have an inset box-shadow by placing inset at the start of the box shadow value. This places the box shadow inside of the element.

Note: Having a negative blur radius is invalid and will result in your box shadow to not render.

Box Shadow

style

.element {
box-shadow: 10px 10px 5px 0px #194d33;
}

Inset

Offset X

Offset Y

Blur Radius

Spread Radius

Color

There are also more compact ways of declaring CSS box shadows. Another format is with offset-x, offset-y, color.

Box Shadow

style

.element {
box-shadow: 10px 10px #194d33;
}

Offset X

Offset Y

Color

Or you could use offset-x, offset-y, blur-radius, color to declare box shadows.

Box Shadow

style

.element {
box-shadow: 10px 10px 5px #194d33;
}

Offset X

Offset Y

Blur Radius

Color

Stacking Box Shadows

You can also stack multiple box shadows. All you need to do is comma separate multiple box-shadow values. Box shadows declared last will appear behind box shadows declared at the start.