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

css

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

2Inset & Inner Shadows

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

Example Code

css

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

3text-shadow

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

Example Code

css

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

4Understand it in a real interface

A shadow can suggest elevation but does not reserve space around the element. Offset, blur, spread, and color play different roles. A subtle border may explain the edge of a static surface more clearly than a very strong shadow, particularly in dark mode.

5Try it yourself

Create two cards with different elevation levels. Use a close contact shadow and a softer ambient layer on one. Place the cards near a container edge and check whether overflow clipping removes the effect. Compare both cards on light and dark surfaces.

Finished reading?

Mark this topic as complete to track progress.

CSS Gradients

Next Topic

CSS Transitions