Box Shadow Effect in CSS

Posted on
6,549 Points
4 Endorsements
Last Modified:
Experience Level: Beginner
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property

Video Steps

1. Start with a normal styled element, such as a div.

2. In the element's style, type the box shadow property: "box-shadow:"

3. Define the shadow's appearance using four different measurements and a color

4. The first pixel measurement is the horizontal position of the shadow; positive values move the shadow to the right and negative values move the shadow to the left of the lement

5. The second pixel measurement is the vertical position of the shadow; positive values move the shadow down and negative values more the shadow to the top of the element

6. The third pixel measurement is optional, but it adjusts the blur of the shadow; a value of 0 will lead to a shadow with straight edges; a higher value will lead to a blurrier, less defined shadow

7. The third pixel measurement is also optional and adjusts the overall size of the shadow; a larger value will result in a more spread out shadow that is further from the element

8. The color can be defined by a hex code or even an RGBA value

9. For maximum browser compatibility, the box-shadow property should be copied and pasted, each time with a different compatibility prefix (-webkit-, -moz-, and -o-)


Featured Post

Introduction to R

R is considered the predominant language for data scientist and statisticians. Learn how to use R for your own data science projects.

Suggested Videos

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
reCAPTCHA Version 3 was released in 2018, and it works differently to the "I'm not a robot" checkbox in reCAPTCHA version 2. With v3, there's no robot checkbox, but an annoying badge is displayed in the lower right corner of your entire website. Eve…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month