CSS Box Shadow
Tags: css, webdev, programming, tutorial
Published: 2021-12-29 04:01:46

So in this topic , I'll cover about `box-shadow` propery in CSS.
_So first we'll know about general syntax of `box-shadow` property._
![General Syntax of Box-Shadow Property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/clzsv97pi9slq9dxtncg.jpg)

**1)Drop shadow:**
_A drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image._
![Drop Shadow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhleb15d02oucbrvdb5t.jpg)
![Drop Shadow o/p](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tplya6sdo12sa98lkw8g.jpg)

**2)Inner Shadow:**
_An inner shadow can be rendered using  the `inset` property value._
![Inner Shadow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1u7pmu38ayp79hjg6h1.jpg)
![Inner Shadow o/p](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6s4l6ekpc21ug9dys2i.jpg)

**3)a)Offset Drop (bottom-right) shadow:**
![Bottom-right](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m956bn8jzt2mj9bbaacs.jpg)
![bottom-right o/p](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9qajs2i8pk9u8qtuws1.jpg)

**3)b)Offset Drop (top-left) shadow:**
![top-left](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59wemkrksz2htr9jol4r.png)
 ![top-left o/p](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtue2o5aqag0vd7ylvcx.jpg)

**4)a)With inset:**
_If the `inset` keyword property value is present,the `box-shadow` will appear inside the HTML element as you can see in the Image._
![With inset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijnn8r1mw2bck7joovet.jpg)
![With inset o/p](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07zkpa6o26uccfcl0l3f.jpg)

**4)b)Without inset:**
![w/o inset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3t0u0xwzy57sker64x7u.jpg)
![w/o inset o/p](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/us8lns6c4nvy38jj879b.jpg)

**5)a) Horizontal offset:**
_The Horizontal offset value controls the  x-axis position of the `box-shadow`._
![horizontal offset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4avu18phb5lwzcbrdqls.jpg)
![horizontal offset o/p](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfcvysbd6kghf80wtn1o.jpg)

**5)b) Vertical Offset:**
_The vertical offset controls the `box-shadow`'s position on the y-axis._
![vertical offset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmz5a1oxa34u9s3lp9ae.jpg)
![vertical offset o/p](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvqoy5bw9htnv4ioqect.jpg)
**Note:**

- 
+ve value shift the `box-shadow` to the right

- 
-ve value shift the `box-shadow` to the left 

**6)Blur radius:**
_If the **blur radius** is 0 ,the `box-shadow` will be **sharp** and it's color will be **solid**. As you **increase** the value , it'll become **blurrier** and more **opaque**_
![blur radius](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ia0ua47lb03vtaf7qknb.jpg)
![blur radius o/p](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bmjjbp0b8xs27s1qe9c2.jpg)

**7)Spread distance:**
_It makes the `box-shadow` larger or smaller in all directions._

**a)+ve (spread distance )value-** 
_the `box-shadow` will grow in size on all sides_
![+ve spread distance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bnntc475eufrae2n0di.jpg)
![+ve spread distance o/p](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2h15k7rj1mq6tx94yaa.jpg)

**b)-ve (spread distance) value-** 
_`box-shadow` contract on all sides_
![-ve spread distance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5e3oov82yqfnva9tvmw.jpg)
![-ve spread distance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vaerrosyqvgzjc8k363y.jpg)

**8)Color:** 
_`color` value sets the box shadow's color._
![color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ry7av3z2akjcvynx9v2u.jpg)
![color o/p](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/if6xtwgcx12twt7m5uo7.jpg)