user
What are the parameters of box-shadow in css ?
alphonsio

The box-shadow property in CSS is used to add shadow effects around an element's frame. It can take several parameters to define the appearance and behavior of the shadow. Here are the parameters it can accept:

box-shadow [inset] offset-x offset-y [blur-radius] [spread-radius] [color];
  1. inset (optional): When the inset keyword is included, this changes the shadow from an outer shadow (one that falls outside of the box) to an inner shadow.

CSS box-shadow inset parameter

  1. offset-x: The horizontal distance to the right of the box where the shadow will be displayed. A negative value will place the shadow to the left of the box.

  2. offset-y: The vertical distance below the box where the shadow will be displayed. A negative value will place the shadow above the box.

CSS box-shadow offset-x and offset-y parameters

  1. blur-radius (optional): This value determines the blur amount for the shadow, making it larger and lighter. The higher the value, the blurrier and bigger the shadow. If no value is set, the shadow will be sharp.
    CSS box-shadow blur-radius parameter

  2. spread-radius (optional): This optional value allows the shadow to expand or shrink. Positive values will cause the shadow to expand and grow bigger than the source element, whereas negative values will cause it to shrink.

CSS box-shadow spread-radius parameter

  1. color (optional): The color of the shadow. If not specified, it inherits the color of the text. Colors can be defined in several formats in CSS, including keyword, RGB, RGBA, HEX, HSL, HSLA, etc.

CSS box-shadow color parameter

The box-shadow can accept comma-separated values to create multiple shadows on the same element.

Number of parameters

  • When two values are specified: <offset-x> <offset-y>
  • When three values are specified: <offset-x> <offset-y> <blur-radius>
  • When four values are specified: <offset-x> <offset-y> <blur-radius> <spread-radius>

Example Usage:

.box {
  width: 100px;
  height: 100px;
  background-color: #666;
  box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.5);
}

This will create a shadow that is offset 10 pixels to the right and 10 pixels down from the .box, with a blur radius of 20 pixels and a spread radius of 5 pixels, using a semi-transparent black color.

Here are some examples online: