How to Use CSS Box Shadows and Text Shadows

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.

Read  How to let go of your wardrobe

Leave a Comment

Your email address will not be published. Required fields are marked *