What is box shadow?

The box-shadow is a CSS property that adds shadow effects around an element’s box or frame. It’s like like in a natural world where the light is coming from a direction and then the shadow will spread under that element.

Check out the Box Shadow Generator. It’s much easier to do it with a GUI instead of writing code.

You can add shadows to boxes using the box-shadow CSS property. The box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

The syntax is:

box-shadow: h-offset v-offset blur spread color;

The first two values specify the horizontal and vertical offset of the shadow respectively. The third value defines how much blur should be applied to the shadow. The fourth value specifies how far from the edge of the box shadow should spread. Finally, you can specify a color for your shadow by supplying a color name or hex code as the fifth parameter.

With this formula the shadow will be outside of the box, however, it’s possible to have it inside of the box by prepending or appending another keyword inside. So it becomes:

box-shadow: inset h-offset v-offset blur spread color;

Example of a outside box shadow:

10px 10px 10px 2px rgba(0, 0, 0, 0.25)

Example of an inside box shadow:

The only difference is the inset keyword.

inset 10px 10px 10px 2px rgba(0, 0, 0, 0.25)

You can get new ideas, and generate lots of shadows for your project or just for fun, experiment on the Shadow Generator page.

Looking for inspiration? Check out this list of different box shadows.

Have fun and be creative!