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

Syntax

css

selector {
  box-shadow: h-offset v-offset blur spread color;
  text-shadow: h-offset v-offset blur color;
}

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.
Accepted values:
<offset-x> <offset-y> — required horizontal and vertical offsets
<blur-radius> — optional, larger is softer
<spread-radius> — optional, grows or shrinks the shadow
<color> — shadow color (defaults to currentcolor)
inset — draws the shadow inside the box
none — no shadow (default)
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.
Accepted values:
box-shadow: A, B — comma-separated list, first is on top
none — no shadows
inset — any layer may be inner
<color> — each layer has its own color
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.
Accepted values:
<offset-x> <offset-y> — required offsets
<blur-radius> — optional blur
<color> — optional color (defaults to currentcolor)
A, B — comma-separated list for multiple shadows
none — no shadow (default)
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.
Accepted values:
inset — draws the shadow inside the padding edge
<offset-x> <offset-y> — direction the inner shadow falls
<blur-radius> — softness of the inner edge
<spread-radius> — thickness of the inner shadow

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.
Accepted values:
box-shadow: A, B — two comma-separated shadows (light and dark)
negative offsets — light shadow toward the top-left
positive offsets — dark shadow toward the bottom-right
inset — flips the effect into a pressed look

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>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Gradients Next Lesson → CSS Filters

CSS Shadows

The box-shadow Syntax

Using Multiple Shadows

Applying text-shadows

Pressed Inset Shadows

The Neumorphic Border Layout

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code