How does a CSS triangle become a speech bubble tail?

A zero-size element with only borders visible forms a triangle: giving one border a color and making the adjacent two transparent leaves only a diagonal edge painted, which reads as a triangle pointing away from the solid side. Positioning that triangle flush against one edge of the bubble with position: absolute turns it into a tail.

Why is the tail a separate pseudo-element instead of part of the bubble's shape?

clip-path could cut a tail shape out of the bubble directly, but it can't also keep the bubble's rounded corners and drop shadow intact in the same operation without much more complex path math. A ::after pseudo-element with border-trick triangle is simpler, keeps the bubble's border-radius untouched, and lets the tail's color update independently.

How do I move the tail along the edge?

The tail is positioned with a left or top percentage (depending on which side it points from) and transform: translateX(-50%) or translateY(-50%) to keep it centered on that offset. Dragging the Tail position slider changes that percentage, moving the tail from one corner of the bubble toward the other.

Can I add a border or shadow to the bubble?

Yes — add a border or box-shadow to .bubble as usual. Note that a border won't automatically extend onto the triangle tail; for a bordered look, either add a second, slightly larger triangle in the border color behind the tail, or skip the border and rely on a box-shadow instead, which doesn't have this issue.

Does this tool store or upload my bubble design?

No — everything here is generated and rendered locally in your browser. Nothing is sent to a server.

CSS SPEECH BUBBLE GENERATOR

Build a chat-style speech bubble with a tail on any side and copy the CSS.

Speech bubble text goes here.

Tail position: 24%

Tail size: 14px

Radius: 14px

Bubble color

Text color

.bubble {
  position: relative;
  display: inline-block;
  max-width: 320px;
  background: #ff6a35;
  color: #201d19;
  border-radius: 14px;
  padding: 16px 20px;
}

.bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 24%;
  transform: translateX(-50%);
  border-width: 14px 14px 0 14px;
  border-color: #ff6a35 transparent transparent transparent;
}

How to build a speech bubble

1
Pick which side the tail points from: bottom, top, left, or right.
2
Adjust the tail's position along that edge and its size on the live preview.
3
Set the bubble's corner radius, background color, and text color.
4
Copy the generated CSS and HTML and drop it into a chat UI or callout.

Questions

How does a CSS triangle become a speech bubble tail?: A zero-size element with only borders visible forms a triangle: giving one border a color and making the adjacent two transparent leaves only a diagonal edge painted, which reads as a triangle pointing away from the solid side. Positioning that triangle flush against one edge of the bubble with position: absolute turns it into a tail.
Why is the tail a separate pseudo-element instead of part of the bubble's shape?: clip-path could cut a tail shape out of the bubble directly, but it can't also keep the bubble's rounded corners and drop shadow intact in the same operation without much more complex path math. A ::after pseudo-element with border-trick triangle is simpler, keeps the bubble's border-radius untouched, and lets the tail's color update independently.
How do I move the tail along the edge?: The tail is positioned with a left or top percentage (depending on which side it points from) and transform: translateX(-50%) or translateY(-50%) to keep it centered on that offset. Dragging the Tail position slider changes that percentage, moving the tail from one corner of the bubble toward the other.
Can I add a border or shadow to the bubble?: Yes — add a border or box-shadow to .bubble as usual. Note that a border won't automatically extend onto the triangle tail; for a bordered look, either add a second, slightly larger triangle in the border color behind the tail, or skip the border and rely on a box-shadow instead, which doesn't have this issue.
Does this tool store or upload my bubble design?: No — everything here is generated and rendered locally in your browser. Nothing is sent to a server.