css box shadow example

css box shadow example, Here are best css box shadows example that can we use in different website layouts, internet is full of irrevelevent stuff, and many designers suffer in creating shadow effects for there designs, thats why’ we brings some of the best examples of css box shadow that you can use in your css art work.

In css a property properly known as ‘box-shadow’, here is the syntax.

.card {
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
 }

Here in this example of css box shadow ‘0’ is the apperence of shadow on ‘x’ axis, ‘3px’ is at on ‘y’ axsis, ’10px’ is the intensity of blurness of shadow and the rgb is the color of shadow.

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread 
radius] [color];

but in the design point of view we need the css shadow effect that matches your web design.

So here I have shared some of the best css box shadow examples.

1. CSS box-shadow light effect

Here is, the shadow effect is light which gives decent apperence of box depth.

2. CSS ribbon with box shadow example

Credits : Luiz Otávio Miranda Figueiredo

edges shadow of design gives the ribbon effect, which is created by Luiz.

3. Card bottom shadow effect

.box{
  width: 12rem;
  height: 12rem;
  background-color: white;
  border-radius: 10px;
  box-shadow:
      0 1px 1px hsl(0deg 0% 0% / 0.075),
      0 2px 2px hsl(0deg 0% 0% / 0.075),
      0 4px 4px hsl(0deg 0% 0% / 0.075),
      0 8px 8px hsl(0deg 0% 0% / 0.075),
      0 16px 16px hsl(0deg 0% 0% / 0.075)
    ;
  
}

Different hsl color values create, oriented depth effect. cool for creating

4. Light shadow Spread css effect

.box{
  width: 12rem;
  height: 12rem;
  background-color: white;
  border-radius: 10px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px  7px 29px 0px; 
}

5. CSS round Shadow Effect example

.box{
  width: 12rem;
  height: 12rem;
  background-color: white;
  border-radius: 10px;
box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

6. CSS Inner Shadow Effect

.box{
  width: 12rem;
  height: 12rem;
  background-color: white;
  border-radius: 10px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

7 . CSS shadow effect by Facebook

.box{
  width: 12rem;
  height: 12rem;
  background-color: white;
  border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}

8. CSS line box shadow effect

.box{
  width: 12rem;
  height: 12rem;
  background-color: white;
  border-radius: 10px;
box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

Conclusion

We have actually tried to solve the problem of web and graphic designers by adding some valuable content on CSS box-shadow example, in future we add more css box shadow effects here.