DEV Community

Cover image for Box Shadow CSS
Shubham Tiwari
Shubham Tiwari

Posted on • Updated on

Box Shadow CSS

Hello Guys today i will be discussing about Box Shadow in CSS.

Let's get Started...

Box Shadow Can help you design your elements shadows and can make it attractive and eye catching

Syntax -

box-shadow: h-offset v-offset blur spread color;
Enter fullscreen mode Exit fullscreen mode
  • h-offset is the horizontal offset means the offset count on x-axis.
  • v-offset is the vertical offset means the offset count on y-axis.
  • blue is the amount of blur effect of the shadow.
  • spread indicates how much the shadow will spread in length and breadth.
  • color indicates the color of the shadow.

Example 1 - Normal Box shadow effect

Example 2 - Using in Animation

  • Like this you can use box shadow in different ways.
  • If you don't want to write code for box-shadow then you can use a box shadow generator , the link is given below
    https://shadows.brumm.af/

  • Here you can use the sliders to change values and create a box shadow as per your requirement.

THANK YOU FOR CHECKING THIS POST

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Top comments (0)