CSS Tip

Avatar with status indicator

Use modern CSS to add a status indicator to your avatar using less than 10 CSS declarations and without extra elements.

CSS-only avatar with status indicator

@property --s {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}
img {
  --w: 170px; /* the image size */
  --s: 12px;  /* control the indicator size */
  --g: 3px;   /* control the gap (+ a default gap) */
  
  width: var(--w);
  aspect-ratio: 1;
  padding: 0 calc(var(--w)/sqrt(2)) calc(var(--w)/sqrt(2)) 0;
  margin: 0 calc(-1*var(--w)/sqrt(2)) calc(-1*var(--w)/sqrt(2)) 0;
  outline: var(--s) solid #B90504;
  outline-offset: -9e9q;
  mask: 
    radial-gradient(#000 calc(var(--s) - 1px),#0000 var(--s)),
    radial-gradient(#000 70%,#0000 71%) content-box subtract,
    radial-gradient(
      #000  calc(sqrt(2)*var(--s) + var(--g)),
      #0000 calc(sqrt(2)*var(--s) + var(--g) + 1px));
  /* clip-path is only needed to reduce the mouse interaction area */
  clip-path: circle(calc(var(--w)/2 + var(--s))) content-box;
  transition: --s .5s;
}
img:hover {
  --s: 16px;
}

See the Pen Status indicator using only an image element by Temani Afif (@t_afif) on CodePen.

We can easily change the position of the indicator by rearranging the margin/padding values.

.bottom-right {
  padding: 0 calc(var(--w)/sqrt(2)) calc(var(--w)/sqrt(2)) 0;
  margin: 0 calc(-1*var(--w)/sqrt(2)) calc(-1*var(--w)/sqrt(2)) 0;
}
.bottom-left {
  padding: 0 0 calc(var(--w)/sqrt(2)) calc(var(--w)/sqrt(2));
  margin: 0 0 calc(-1*var(--w)/sqrt(2)) calc(-1*var(--w)/sqrt(2));
}
.top-right {
  padding: calc(var(--w)/sqrt(2)) calc(var(--w)/sqrt(2)) 0 0;
  margin: calc(-1*var(--w)/sqrt(2)) calc(-1*var(--w)/sqrt(2)) 0 0;
}
.top-left {
  padding: calc(var(--w)/sqrt(2)) 0 0 calc(var(--w)/sqrt(2));
  margin: calc(-1*var(--w)/sqrt(2)) 0 0 calc(-1*var(--w)/sqrt(2));
}

See the Pen Avatar with status indicator using one element II by Temani Afif (@t_afif) on CodePen.

More CSS Tips