Avatars, pills and layered shadows – CSS Practice

Create three common pieces of interface.

What to build

An avatar, a status pill and a raised panel.

Requirements

.avatar is 64px by 64px, with a border-radius of 50%, a background of teal, and a 3px solid white border.
.pill has a border-radius of 999px, padding of 4px 12px, and a background of black at 15% strength, using an alpha colour.
.panel has two box shadows, separated by a comma. The first is 0 1px 2px and the second is 0 8px 24px, both using rgb(0 0 0 / 0.2).

Constraints

Do not use opacity. The pill's text must remain fully opaque.

Example

box-shadow: 0 1px 2px gray, 0 4px 8px silver;

Why it works

A tight shadow gives a crisp edge and a wide one gives soft depth, so together they look like real light. An alpha background fades only the fill.

Hints

Hint 1

A circle needs equal width and height.

Hint 2

A pill needs a very large border-radius.

Hint 3

Several shadows are separated by commas.

Hint 4

rgb(...) with a slash gives an alpha background that leaves the text solid.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pieces</title>
  <style>
    .avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: teal;
      border: 3px solid white;
    }
    .pill {
      border-radius: 999px;
      padding: 4px 12px;
      background: rgb(0 0 0 / 0.15);
    }
    .panel {
      box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 8px 24px rgb(0 0 0 / 0.2);
    }
  </style>
</head>
<body>
  <div class="panel">
    <div class="avatar"></div>
    <span class="pill">Online</span>
  </div>
</body>
</html>

Lesson: Backgrounds, borders and shadows →