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 text shadow

Create a text shadow - CSS Tutorial

From the course: CSS: Enhancing Website Graphics

Start my 1-month free trial

Create a text shadow

“

- [Instructor] In this chapter of our video tutorials, we'll examine how to make your content jump off the page with 3D shadows. This first video explores how CSS can be used to add shadows to any string of text on your webpage. Text shadows are created using the text shadow property, where color defines the color of the shadow, offset X sets the horizontal position of the shadow relative to the text, offset Y sets the vertical position of the shadow, and blur sets the radius or extent of the shadow. Let's look at some examples. Here's a simple text shadow, in which a black shadow is set at a distance of three pixels from the text in both the horizontal and vertical direction. Blur radius of zero pixels creates a distinct shadow with hard edges. Positive offset X values move the shadow to the right of the text, while negative offset X values move the shadow to the left. In the same way, positive offset Y values move the shadow below the text and negative offset Y values move the…

Contents