CSS 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
| Parameters | Details |
|---|---|
| inset | by default, the shadow is treated as a drop shadow. the inset keyword draws the shadow inside the frame/border. |
| offset-x | the horizontal distance |
| offset-y | the vertical distance |
| blur-radius | 0 by default. value cannot be negative. the bigger the value, the bigger and lighter the shadow becomes. |
| spread-radius | 0 by default. positive values will cause the shadow to expand. negative values will cause the shadow to shrink. |
| color | can be of various notations: a color keyword, hexadecimal, rgb(), rgba(), hsl(), hsla() |
bottom-only drop shadow
.box_shadow {
background-color: #1C90F3;
width: 200px;
height: 100px;
margin: 50px;
box-shadow: 0px 0px 8px 2px #444444;
}
inner drop shadow
#example {
background-color: #1C90F3;
width: 200px;
height: 100px;
margin: 50px;
box-shadow: inset 0px 0px 10px 0px #444444;
}