Shadows & Rounded Corners

Shadows add depth — lifting cards off the page, showing which button is pressed, or making text stand out on photos. Combined with rounded corners, they create the soft, layered look of modern interfaces.

box-shadow

The values are: horizontal offset, vertical offset, blur radius, (optional) spread, and colour:

.card {
  box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);
  /*          x  y  blur spread colour */
}

Positive offsets move the shadow right and down, as if light comes from the top left. A transparent colour gives a natural, soft result; pure black looks harsh.

Elevation levels

Larger offsets and blur suggest an element floating higher. Design systems define a small set of levels like this and reuse them.

Layered shadows

Inset shadows and spread

inset draws the shadow inside the box. A shadow with no offset or blur but some spread acts like an extra border that doesn't affect layout — handy for focus rings and selection highlights.

Hover effects

text-shadow

text-shadow takes offset, blur and colour (no spread). A subtle shadow improves legibility over images.

drop-shadow for shaped content

box-shadow always follows the rectangular box. filter: drop-shadow() follows the visible shape — transparent PNGs, SVG icons and clipped elements (lesson 39).

More corner shapes

A slash in border-radius gives separate horizontal and vertical radii for each corner, producing organic "blob" shapes.

Try it yourself