Home » Learn » CSS Tutorial » CSS Shadows

CSS Shadows

CSS can add shadows to boxes with box-shadow and to text with text-shadow. Shadows give depth to cards, buttons and headings.

box-shadow

box-shadow: offset-x offset-y blur spread color;
ValueMeaning
offset-xMove the shadow right (negative = left)
offset-yMove the shadow down (negative = up)
blurHow soft the edge is. 0 is sharp
spreadMakes the shadow bigger or smaller (optional)
colorColour of the shadow, often rgba()
.card { box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.25); }
Output in the browser
A card with a shadow

Inset shadow

Add the word inset to draw the shadow inside the box.

.field { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); }

More than one shadow

.glow { box-shadow: 0 0 6px #03a9f4, 0 0 20px #03a9f4; }

text-shadow

h1 { text-shadow: 2px 2px 4px #888; }
Output in the browser

Text with a shadow

text-shadow takes offset-x, offset-y, blur and colour. It has no spread value.

Note: Light, soft shadows (low opacity and big blur) look modern. A hard black shadow looks old. Do not use shadows on long paragraphs, because they reduce readability.

Summary

  • box-shadow: x y blur spread color for boxes.
  • text-shadow: x y blur color for text.
  • Use inset for inner shadows and commas for many shadows.
  • Next: CSS Height and Width.

Share this post:

Share on LinkedIn
Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.