CSS Text Shadow and Box Shadow Effects (with Examples)

Shadows are a powerful way to add depth, dimension, and visual interest to elements on a webpage. With CSS, you can create two main types of shadows: text shadows and box shadows. Text shadows add a shadow effect to text, while box shadows add a shadow effect to other elements like divs, images, and buttons.

In this guide, we‘ll dive into the details of how to use the text-shadow and box-shadow properties in CSS. I‘ll explain what values these properties take and show you code examples of various shadow techniques. By the end, you‘ll be ready to add compelling shadow effects to your own web projects. Let‘s get started!

Text Shadow Basics

The text-shadow CSS property allows you to add one or more shadows to text. Here is the basic syntax:

text-shadow: offsetX offsetY blur color;

The property takes four values:

1. offsetX – The horizontal distance of the shadow from the text. Positive values move the shadow to the right, negative values to the left.
2. offsetY – The vertical distance of the shadow from the text. Positive values move the shadow down, negative values move it up.
3. blur – (Optional) The amount of blur applied to the shadow. Higher values will create a softer shadow, while a value of 0 will create a hard shadow.
4. color – The color of the shadow, specified as any valid CSS color value (color name, hex code, RGB, HSL, etc.)

Here‘s a simple example that creates a gray drop shadow shifted 2px right and 2px down from the text:

h1 {
text-shadow: 2px 2px #bbb;
}

Multiple Text Shadows

You can apply more than one shadow to the same text by separating multiple sets of values with commas. The shadows will be applied front-to-back, so the first shadow will appear on top.

Here‘s an example that creates a glowing text effect using two shadows:

h1 {
color: white;
text-shadow:
0 0 10px blue,
0 0 20px blue;
}

The first shadow creates a thinner blue glow close to the text, while the second creates a wider glow effect further out. Using semi-transparent colors for the shadow helps create a realistic glow effect.

You can stack as many shadows as you want to build up complex effects. Just be careful not to go overboard, as too many shadows can hurt performance.

Box Shadow Basics

The box-shadow property works similarly to text-shadow but applies the shadow effect to the element as a whole, including its padding and border. It uses the same offsetX, offsetY, blur, and color values as text-shadow but with a couple of additions:

box-shadow: offsetX offsetY blur spread color;

Spread is an optional length value that expands or contracts the shadow. Positive values expand the shadow larger than the element, while negative values contract it.

Also, box-shadow supports an optional ‘inset‘ keyword which changes the shadow to render inside the element rather than behind it. Here are a couple examples:

/ A basic box shadow /
div {
box-shadow: 2px 2px 5px #999;
}

/ An inset box shadow /
div {
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.7);
}

The first example creates a typical drop shadow effect. The inset shadow creates more of an embossed or sunken look, as if the box was carved out of another surface. Using a semi-transparent shadow color with RGBa helps the inset shadow blend with the element‘s background.

Multiple Box Shadows

Just like with text shadows, you can apply multiple box shadows to a single element. This allows you to layer shadows on top of each other for more complex effects.

One fun effect is to combine a normal box shadow with an inset shadow to create an effect like a photo sitting on a tabletop:

div {
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.7),
inset 0 2px 2px rgba(255, 255, 255, 0.5);
}

Here, the first shadow creates a soft black shadow underneath the element. The second inset shadow on top lightens the top edge, as if light was reflecting off the surface.

Browser Support and Tools

Text and box shadows are well-supported across browsers, with the exception of Internet Explorer 9 and below which do not support them at all. All modern browsers support the standard syntax covered here.

When implementing shadows, it can help to use a visual generator tool to quickly experiment with different shadow configurations without needing to manually write each value. Some free, browser-based shadow generators include:

• CSS Box Shadow Generator
• CSS3 Text Shadow Generator
• CSSmatic Box Shadow Generator

These tools provide a nice GUI for visually tweaking shadow parameters. They also generate the raw CSS you can copy and paste into your own stylesheets.

Shadow Best Practices

When using text or box shadows in your designs, keep these tips and best practices in mind:

Use shadows purposefully. Shadows should enhance a design, not distract from it. Think about what role shadows play in the overall visual hierarchy.

Err on the side of subtlety. Avoid large, hard, or high-contrast shadows unless you‘re purposely going for a bold look. Softer, semi-transparent shadows tend to work better.

Keep shadow colors neutral. Shadows should typically be black, white, or gray. Using bright or saturated shadow colors usually looks unnatural (unless it‘s for a very stylized effect).

Maximize accessibility. Text shadows can reduce the contrast between text and background. Make sure to keep contrast high enough for low-vision users, and consider skipping shadows on main body text.

Don‘t overdo it. Limit the number of shadows per page. Using a shadow on every element creates visual clutter. Shadows work best as an accent.

Creative Shadow Examples

Now that we‘ve covered the fundamentals of text and box shadows, let‘s look at a few more creative examples for inspiration:

Vintage Letterpress Effect

Combine a tight 1px text shadow with decreased letter spacing to simulate the uneven, imperfect look of old-fashioned letterpress printing:

h1 {
color: #222;
letter-spacing: -1px;
text-shadow: 0px 1px 1px #fff;
}

Neon Glow Effect

Use a stack of progressively blurrier, brighter text shadows to create an electric neon sign look:

h1 {
color: #fff;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #ff0080,
0 0 30px #ff0080,
0 0 40px #ff0080;
}

Lifted Corners Box Shadow

Use a pseudo-element along with negative spread shadows to create the illusion of a box lifting off the page:

div {
position: relative;
}
div::before {
content: "";
position: absolute;
z-index: -1;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
box-shadow: 0 0 40px 20px rgba(0, 0, 0, 0.3);
}

Conclusion

As you can see, text and box shadows are incredibly versatile tools for adding visual richness to a webpage. With some CSS savvy and a dash of creativity, the shadow possibilities are virtually endless.

Remember to use shadows judiciously to enhance a design without detracting from it. Keep shadows subtle, and always prioritize usability and accessibility. Finally, don‘t be afraid to play around and experiment. Some of the coolest shadow effects come from simply tweaking values to see what happens.

I hope you found this guide informative and inspiring. Now go forth and elevate your webpage designs with the power of shadows!