From the course: CSS: Enhancing Website Graphics

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Create a box shadow

Create a box shadow - CSS Tutorial

From the course: CSS: Enhancing Website Graphics

Start my 1-month free trial

Create a box shadow

“

- [Instructor] In the last video, you learned to add shadows to any text string. In this video, you'll learn to add shadows to any page element. Shadows are added to page elements using the box shadow property, which has the same general syntax as the text shadow property, where color defines the color of the shadow, offsetX and offsetY define the distance of the shadow from the page element, and the blur radius sets the extent of the shadow. For example, this box shadow property creates a drop shadow that's black in color, offset by 25 pixels in both the horizontal and vertical directions and has a blur radius of 40 pixels. As with the text shadow property, make the values for offsetX and offsetY move the shadow to the left and above the element. And increasing the blur radius creates a shadow that's less distinct and covers more area, while decreasing the blur radius creates a hard-edge shadow that covers the smaller area. Let's use the box shadow property on this page containing a…

Contents