CSS is full of options to improve the look and feel of your websites. Text and frame shadows are prime examples. They offer results similar to shadows in image editing software such as 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 that contains a range of up to six values. The order of the values is crucial for the functioning of your CSS box shadow and looks like this:
box-shadow: offset-x offset-y blur spread color inset;
Let’s look at each value in turn.
CSS box shadow position
The offset x and offset y values control the position of your box shadow. The offset-x value represents the shadow’s horizontal position, while offset-y is the vertical offset.
box-shadow: 10px 10px;
Positive values result in a shadow below and to the right of the element.
You can also use negative values for h-offset and v-offset:
box-shadow: -10px -10px;
A negative h offset shifts the shadow to the left, while a negative v offset shifts it up:
CSS box shadow blur
As you can see, adding the h offset and v offset to your shadow creates a solid shadow with no feathering. The Blur value blurs your CSS box shadow and takes effect when you supply a third value:
box-shadow: 10px 10px 20px;
The higher the number you add to the blur value, the blurrier your CSS box shadow will be. This value cannot be negative.
CSS box shadow spread
The Spread value allows you to resize your shadow without changing its position.
box-shadow: 10px 10px 20px 30px;
A positive Spread value makes the CSS box shadow larger, while a negative value makes it smaller.
CSS box shadow color
CSS box shadows use the element’s text color by default, but you can override this by adding a color:
box-shadow: 10px 10px 20px 10px
The color you use must be in an acceptable CSS color format, e.g. B. as hex code, RGB code or predefined color. You can learn about hex codes and other legal CSS color options before you start your shadows.
CSS box shadow insertion
CSS box shadows fall outside of their assigned element by default. 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; Just add or remove it to set the value.
How to use CSS text shadows
CSS text shadows are like box shadows, although they have fewer values to change. The syntax for a CSS text shadow looks like this:
text-shadow: offset-x offset-y blur-radius color;
But how do these values work?
CSS text shadow position
CSS text shadow offsets work very much like the same box shadow values:
text-shadow: 10px 10px;
Positive values position the shadow below and to the right of the text.
Negative values do the opposite, placing the shadow above and to the left of the text.
text-shadow: -10px -10px;
You can mix negative and positive values to perfectly position your CSS text shadow.
CSS text shadow blur radius
CSS Text Shadow Blur Radius allows 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
As with CSS box shadow colors, you must use a CSS legal color for this.
Design examples for CSS boxes and text shadows
Once you understand the basics, you can experiment with using CSS boxes and text shadows. The following ideas should inspire you to find your own creative ways of using these CSS properties.
Two color borders with two css box shadows
You can add more than one border shadow or text shadow to an HTML element. As long as there are commas between them, you can add new shadows to a single property.
box-shadow: 30px 30px #0000ff, -30px -30px 0px #00ff00;
This two-tone border is a good example. Two CSS box shadows with opposite positions and no blur/spread create an excellent creative border.
Dual CSS text shadows for dramatic effects
Similar to the idea above, you can add and position multiple text shadows to create 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.
Multicolored backgrounds with CSS box shadows inserted
CSS is powerful enough to create unique and interesting assets without external files. Using an inserted CSS box shadow as the background is a great example of this.
box-shadow: 20px 10px 10px 40px
This box has a white background along with three applied shadows of different colors. The shadows overlap to create a unique background.
To further enhance this effect, simply add a stylish CSS background gradient to your element.
CSS Box Shadows & Text Shadows for creative web design
CSS fields 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 exploring CSS to hone your skills.