Box Shadow - CSS

Horizontal Length

Vertical Length

Blur Radius

Spread Radius

Shadow Color

r
g
b
a

Background Box

hex
Outline
Inset

Background Application

background-color: rgba(9, 8, 86, 1)

-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75)

-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75)

box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75)

What is Box Shadow?

The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. - MDN web docs - box-shadow

Values

Font - HTML Dog - CSS Property: box-shadow

ValueNoteExample
noneNo shadow. Default.
inset [length] [length]
  • inset is optional — if used, this specifies that the shadow falls inwards, rather than outwards.
  • First length is the horizontal offset. A positive . A positive value pushes the shadow to the right. A negative value pushes it to the left. Required.
  • Second length is the vertical offset . A positive value pushes the shadow down. A negative value pushes it up. Required.
  • Third length is the blur radius . The higher the value, the greater the blur. Should not be negative. Optional — if unused, defaults to 0 blur).
  • Fourth length is the spread distance. A positive value expands the shadow. A negative value contracts it. Optional — if unused, defaults to 0 (no spread).
  • Color is the shadow color. Optional — if unused, defaults to the computed value of color.
inset 5px -5px 10px 10px rgba(0,0,0,0.2)
[value] [value]Multiple shadows. A list of shadow values can be separated by commas. The first value set will define the top shadow, the second the shadow generated underneath that, and so on.2px 2px 3px red, 4px 4px 3px blue