CSS Shadows

Imagine holding cardboard card above your desk. If there is a light directly above it, the card casts a soft shadow on the desk underneath, letting you see exactly how high the card is floating. CSS shadows are those lighting effects. By applying box-shadows or text-shadows, you can add vertical depth and coordinate layers to your elements, making your primary buttons, alert cards, and headers pop out from the background.

In this page:

The box-shadow Syntax
Using Multiple Shadows
Applying text-shadows
Pressed Inset Shadows
The Neumorphic Border Layout

The box-shadow Syntax

The box-shadow property adds a shadow to your element containers. It uses five values to define the shadow: horizontal offset, vertical offset, blur radius (how soft the shadow looks), spread radius (how large it expands), and color.

Note: Use soft, semi-transparent black shadows (like rgba(0,0,0,0.1)) to make your elements look realistic.

Warning: Avoid using solid, dark black shadows, as they look harsh and artificial.

Example: The box-shadow Syntax

css

<style>
.box {
  background: white;
  padding: 16px;
  box-shadow: 2px 4px 8px 0px gray;
}
</style>
<div class="box">Shadowed box</div>

Using Multiple Shadows

You can apply multiple overlapping shadows to a single element by separating their declarations with commas, allowing you to create rich, realistic depth effects.

Note: Combine a small, dark shadow with a large, soft shadow to create realistic lighting depth.

Warning: Adding too many overlapping shadows can slow down page loading speeds on older devices.

Example: Using Multiple Shadows

css

<style>
.box {
  background: white;
  padding: 16px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.3), 0 8px 16px rgba(0,0,0,0.15);
}
</style>
<div class="box">Layered shadows for depth</div>

Applying text-shadows

The text-shadow property applies shadows directly to text characters. It uses three values: horizontal offset, vertical offset, and blur radius, followed by the shadow color.

Note: Use a subtle text-shadow to make white headers readable when placed over light background images.

Warning: Applying text-shadows to small body text can make characters look blurry and hard to read.

Example: Applying text-shadows

css

<style>
h1 {
  text-shadow: 2px 2px 4px black;
}
</style>
<h1>Shadowed Text</h1>

Pressed Inset Shadows

By default, box-shadows render on the outside of your elements. By adding the inset keyword to the start of your box-shadow declaration, you instruct the browser to cast the shadow on the inside, making the element look pressed or sunken into the page.

Note: Use inset shadows to style active, pressed button states or form input fields cleanly.

Warning: Inset shadows can look blocky if your element borders do not have matching border-radius settings.

Example: Pressed Inset Shadows

css

<style>
.button {
  background: #ddd;
  padding: 16px;
  box-shadow: inset 2px 2px 4px gray;
}
</style>
<div class="button">Pressed / inset look</div>

The Neumorphic Border Layout

Neumorphism is a modern web design style that creates soft, plastic-like layouts. By combining a light shadow on the top-left with a dark shadow on the bottom-right, you make elements look like they are molded directly out of the page background.

Note: Neumorphism requires your element's background color to match the page background color exactly.

Warning: Neumorphic layouts can have poor accessibility contrast if your shadows are too light, making them hard for some users to see.

Example: The Neumorphic Border Layout

css

<style>
.box {
  background: #e0e0e0;
  box-shadow: -6px -6px 12px white, 6px 6px 12px rgba(0,0,0,0.2);
}
</style>
<div class="box">Neumorphic box</div>

Common Mistakes

Using solid, dark black shadows, which look harsh and artificial.
Applying text-shadows to small body text, making it blurry and hard to read.
Using high-contrast neumorphic styles that fail web accessibility contrast guidelines.

Chapter Summary

The box-shadow property adds shadows to container boxes, and text-shadow adds shadows to text characters.
Specify your shadows using offsets, a blur radius, and a semi-transparent RGBA color for realistic depth.
Add the inset keyword to cast shadows on the inside of elements, and combine light and dark shadows to create neumorphic designs.

Browser Support

Standard CSS box-shadow, text-shadow, and inset properties are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Gradients Next Lesson → CSS Filters