How to Use CSS Box Shadows and Text Shadows

CSS is full of options to enhance the appearance of your websites; text and box shadows are prime examples. They offer similar results to the shadows found in image editing software like Photoshop.

But how do CSS shadows work? Let’s dive right in.

How to Use CSS Box Shadow

You can apply a CSS box shadow with a single line of CSS containing a range of up to six values. The order of values is crucial for your CSS box shadow to work, and it looks like this:

box-shadow: offset-x offset-y blur spread color inset;

Let’s take a look at each of the values in order.

CSS Box Shadow Position

The offset-x and offset-y values control the position of your box shadow. The offset-x value represents the horizontal position of the shadow, while offset-y is the vertical offset.

 box-shadow: 10px 10px;

Positive values result in a shadow below and right of the element.

You can also use negative values for h-offset and v-offset:

 box-shadow: -10px -10px;

A negative h-offset moves the shadow to the left, while a negative v-offset moves it upwards:

CSS Box Shadow Blur

As you can see, adding the h-offset and v-offset to your shadow creates a solid shadow without any feathering. The blur value blurs your CSS box shadow and takes effect if you provide a third value:

box-shadow: 10px 10px 20px;

The higher the number you add to the blur value, the more blurred your CSS box shadow will be. This value cannot be negative.

CSS Box Shadow Spread

The spread value allows you to change the size of your shadow without altering its position.

 box-shadow: 10px 10px 20px 30px;

A positive spread value will make your CSS box shadow larger, while a negative value will make it smaller.

CSS Box Shadow Color

CSS box shadows default to the element’s text color, but you can override that by adding a color:

box-shadow: 10px 10px 20px 10px 

The color you use must be in a CSS legal color format, like a hex code, RGB code, or predefined color. You can learn about hex codes and other CSS legal color options before you get started with your shadows.

CSS Box Shadow Inset

CSS box shadows default to falling outside of their assigned element. By adding an inset to the box-shadow property, you can display the shadow on the inside of the element.

box-shadow: 10px 10px 20px 10px 

This is a predefined text value; simply add or remove it to set the value.

How to Use CSS Text Shadow

CSS text shadows are like box shadows, though they have fewer values to modify. The syntax for a CSS text shadow looks like this:

text-shadow: offset-x offset-y blur-radius color;

But how does these values work?

CSS Text Shadow Position

CSS text shadow offsets work very similarly to the same box shadow values:

text-shadow: 10px 10px;

Positive values will position the shadow below and right of the text.

Negative values do the opposite, placing the shadow above and left of the text.

 text-shadow: -10px -10px;

You can mix negative and positive values to position your CSS text shadow perfectly.

CSS Text Shadow Blur Radius

CSS text shadow blur radius enables you to blur the shadow behind your text.

text-shadow: 10px 10px 10px; 

The default for this value is 0 (no blur).

CSS Text Shadow Color

By default, CSS text shadows match the color of the text. You can change the color of your text by adding it to the end of the CSS text shadow property.

text-shadow: 10px 10px 10px 

Like CSS box shadow colors, you must use a CSS legal color for this.

CSS Box and Text Shadow Design Examples

You can start to experiment with your use of CSS box and text shadows once you understand the basics. The ideas below should inspire you to come up with your own creative ways to use these CSS properties.

Dual-Color Borders With Two CSS Box Shadows

You can add more than one box shadow or text shadow to an HTML element. As long as they have commas between them, you can add new shadows to a single property.

box-shadow: 30px 30px #0000ff, -30px -30px 0px #00ff00;

This dual-color border is a good example of this. Two CSS box shadows with opposing positions and no blur/spread produce an excellent creative border.

Dual CSS Text Shadows for Dramatic Effect

In a similar vein to the idea above, you can add and position text multiple text shadows for interesting results.

text-shadow: 35px 20px 4px darkgray, -35px -20px 4px darkgray;

This example shows a line of text with a shadow above and a shadow below, both of which have text-based color values.

Multicolor Backgrounds With Inset CSS Box Shadows

CSS is powerful enough to create unique and interesting assets without any external files. Using an inset CSS box shadow as a background is a great example of this.

box-shadow: 20px 10px 10px 40px 

This box has a white background, along with three inset shadows in different colors. The shadows overlap one another to create a unique background.

Enhancing this effect further is a simple matter of adding a stylish CSS background gradient to your element.

CSS Box Shadows & Text Shadows for Creative Web Design

CSS box and text shadows are easy to use once you know how to work with them. You now have the tools you need to start working on your own designs, but you should keep researching CSS to improve your skills.

We use cookies to give you the best experience.