A Complete Guide to CSS box-shadow

CSS box-shadow is a powerful tool that allows you to add depth and dimension to your web designs. It is a CSS property that adds a shadow effect to the borders of an HTML element, creating the illusion of depth and separation from the background. In this guide, we will explore the different properties and values of box-shadow and how to use them to create stunning visual effects.

Basic Syntax

The basic syntax of the CSS box-shadow property is as follows:

css

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

  • h-shadow: The horizontal offset of the shadow from the element. A positive value moves the shadow to the right, while a negative value moves it to the left.
  • v-shadow: The vertical offset of the shadow from the element. A positive value moves the shadow down, while a negative value moves it up.
  • blur: The amount of blur applied to the shadow. The higher the value, the more blurred the shadow appears. A value of 0 produces a sharp shadow.
  • spread: The amount the shadow should expand or contract from its original size. A positive value expands the shadow, while a negative value contracts it.
  • color: The color of the shadow. This can be a named color, an RGB value, or a hexadecimal value.
    inset (optional): By default, the shadow is placed outside the element. Adding the inset keyword places the shadow inside the element.

Examples

Here are some examples of using the CSS box-shadow property:

css

/* Simple drop shadow */
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
/* Colored drop shadow */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 -3px 0 #42A5F5;
/* Multiple shadows */
box-shadow:
0 0 10px #000,
0 0 20px #000,
0 0 30px #000,
0 0 40px #42A5F5;
/* Inner shadow */
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);

Values

Horizontal and Vertical Offsets

The h-shadow and v-shadow values specify the horizontal and vertical distances of the shadow from the element. You can use positive or negative values to control the direction of the shadow.

css

/* Move the shadow to the right and down */
box-shadow: 2px 2px 4px #000;
/* Move the shadow to the left and up */
box-shadow: -2px -2px 4px #000;

Blur

The blur value controls the amount of blurring applied to the shadow. A higher value produces a more diffuse, softer edge to the shadow.

css

/* A sharp shadow */
box-shadow: 2px 2px 0 #000;
/* A blurry shadow */
box-shadow: 2px 2px 10px #000;

Spread

The spread value controls the amount the shadow should expand or contract from its original size. A positive value expands the shadow, while a negative value contracts it.

css

/* A small shadow */
box-shadow: 2px 2px 4px #000;
/* A larger shadow */
box-shadow: 2px 2px 4px 10px #000;

Color

The color value specifies the color of the shadow

css

/* A black shadow */
box-shadow: 2px 2px 4px #000;
/* A red shadow */
box-shadow: 2px 2px 4px #FF0000;
/* A transparent shadow */
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

Inset

The inset value places the shadow inside the element instead of outside it. This can create interesting effects, such as creating an inset border effect.

css

/* An outer drop shadow */
box-shadow: 2px 2px 4px #000;
/* An inner drop shadow */
box-shadow: inset 2px 2px 4px #000;

Multiple Shadows

You can specify multiple shadows for an element by separating each value with a comma. The first shadow value will be the top layer, and each subsequent value will be layered underneath.

css

/* Multiple outer drop shadows */
box-shadow:
2px 2px 4px #000,
-2px -2px 4px #000;
/* Multiple inner drop shadows */
box-shadow:
inset 2px 2px 4px #000,
inset -2px -2px 4px #000;

Conclusion

CSS box-shadow is a versatile property that allows you to create stunning visual effects with your web designs. By adjusting the values of the h-shadow, v-shadow, blur, spread, and color properties, you can create a wide range of shadow effects. The inset keyword and the ability to layer multiple shadows add even more creative possibilities. With CSS box-shadow, you can take your designs to the next level and make them stand out on the web.