Components & UI

Box & Text Shadows

Add depth with box-shadow and text-shadow.

1box-shadow

Syntax: x-offset, y-offset, blur, spread, color. Stack multiple shadows for layered depth.

Example Code

.card {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.05),
    0 10px 30px -10px rgba(15,23,42,0.15);
}

The inset keyword draws the shadow inside the element — useful for inputs and pressed states.

Example Code

input:focus {
  box-shadow: inset 0 0 0 3px rgba(79,70,229,0.2);
}

Adds a shadow under text. Skip the spread — only x, y, blur, color.

Example Code

h1 {
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

Finished reading?

Mark this topic as complete to track progress.