CSS Avatar Generator

A CSS avatar is a styled profile picture element built entirely with CSS. When a user doesn't have a profile photo, initials-based avatars provide a clean visual placeholder. They are commonly used in user lists, comment sections, chat apps, and dashboards.

CSS avatars can include status indicators (online, offline, DND, idle) shown as a colored dot, supporting different sizes and shapes for various interface contexts. They are created using simple CSS properties like border-radius, background, and pseudo-elements.

1. Enter initials — Type up to 3 characters to display inside the avatar.
2. Choose a shape — Select Circle for profile photos or Rounded Square for list items.
3. Set size and colors — Adjust the avatar size, background, and text color to match your design.
4. Add a status indicator — Enable the status dot and choose Online, Offline, DND, Idle, or Invisible.
5. Copy the CSS — Click the Copy button and paste the CSS into your stylesheet.