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:
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.
Positive values result in a shadow below and right of the element.
You can also use negative values for h-offset and v-offset:
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:
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.
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:
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.
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:
But how does these values work?
CSS Text Shadow Position
CSS text shadow offsets work very similarly to the same box shadow values:
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.
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.
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.
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.
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.
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.
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.
