What’s the difference between box-shadow and drop-shadow?

Both box-shadow and drop-shadow are CSS properties used to create shadows behind an element, but there are some differences between them.

box-shadow creates a shadow around the entire box of an element, including any padding and border. It has four required values: horizontal offset, vertical offset, blur radius, and spread radius. It also allows you to specify a color for the shadow. Here’s an example:

box-shadow: 2px 2px 5px #888888;

drop-shadow creates a shadow behind an element that appears to lift it off the page. It only applies to the actual shape of the element, ignoring any padding and border. drop-shadow has two required values: horizontal offset and vertical offset, and allows you to specify blur radius, spread radius, and a color for the shadow. Here’s an example:

drop-shadow(2px 2px 5px #888888);

So, in summary, box-shadow applies a shadow to the entire box of an element, while drop-shadow only applies a shadow to the shape of the element.

So what’s best to use “drop-shadow” or “box-shadow”?

Determining whether to use box-shadow or drop-shadow ultimately depends on the specific design needs and context of your project.

If you need to create a shadow around an element that includes padding and borders, box-shadow is the better choice. On the other hand, if you want to create a shadow that appears to lift an element off the page, and you don’t want the shadow to include padding and borders, then drop-shadow is the way to go.

It’s important to note that drop-shadow is not supported by all browsers and requires the use of the -webkit prefix for Safari and older versions of Chrome. So, if you need to support older browsers or want to ensure cross-browser compatibility, box-shadow may be the safer option.

In conclusion, both box-shadow and drop-shadow have their own unique strengths and uses, and the best choice depends on the specific design requirements of your project.

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!