html
/

CSS Shadow

Last Sync: Today

On this page

11
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

CSS Shadow

What are CSS Shadows?

CSS shadows add depth and visual effects to elements using box-shadow and text-shadow properties.

Box Shadow Syntax

CSSRead-only
1
div {
  box-shadow: 2px 2px 5px gray;
}

Box Shadow Parameters

ValueDescription
offset-xHorizontal shadow
offset-yVertical shadow
blurBlur radius
spreadSpread size
colorShadow color

Example

CSSRead-only
1
div {
  box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
}

Inset Shadow

CSSRead-only
1
div {
  box-shadow: inset 2px 2px 5px gray;
}

Multiple Shadows

CSSRead-only
1
div {
  box-shadow: 2px 2px 5px black, -2px -2px 5px gray;
}

Text Shadow

CSSRead-only
1
h1 {
  text-shadow: 2px 2px 5px gray;
}

Soft UI Shadow

CSSRead-only
1
div {
  box-shadow: 8px 8px 15px #ccc, -8px -8px 15px #fff;
}

Best Practices

  • Use subtle shadows for modern UI
  • Avoid overly dark shadows
  • Use rgba for transparency
  • Combine multiple shadows carefully

Common Mistakes

  • Using heavy shadows affecting performance
  • Too many shadow layers
  • Incorrect blur values
  • Poor contrast shadows

Conclusion

CSS shadows enhance UI design by adding depth and visual hierarchy. Proper use improves aesthetics and usability.

Try it yourself

div {
  box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
}

Test Your Knowledge

Q1
of 3

Which adds shadow to box?

A
text-shadow
B
box-shadow
C
shadow
D
filter
Q2
of 3

Which adds shadow to text?

A
box-shadow
B
text-shadow
C
font-shadow
D
shadow
Q3
of 3

Which creates inner shadow?

A
inside
B
inner
C
inset
D
shadow-in

Frequently Asked Questions

What is box-shadow?

Adds shadow around elements.

What is text-shadow?

Adds shadow to text.

What is inset?

Creates inner shadow.

Previous

css transform

Next

css gradients

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.