Chat Bubble Generator

Generate chat bubble styles with position controls

Position

Colors

Background

Text

Styling

Padding X16px

Padding Y12px

Border Radius18px

Tail

Show Tail

Tail Size10px

Presets

Live Preview

Hello! This is a chat bubble message.

Generated CSS

.chat-bubble {
  background-color: #3b82f6;
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 18px;
  max-width: 70%;
  position: relative;
  margin-right: auto;
}

.chat-bubble::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 20px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #3b82f6;
}