</>
cssgenerators.dev
Star on GitHub
Tools / Speech Bubble

CSS Speech Bubble Generator

Generate a CSS speech bubble with a tail pointing in any direction — built with pure CSS using ::after pseudo-element.

Tail position
Tail offset20%
Tail size10px
Border radius12px
Hello! 👋
CSS
.bubble {
  position: relative;
  background: #6366f1;
  color: #ffffff;
  border-radius: 12px;
  padding: 14px 20px;
  display: inline-block;
}
.bubble::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: -10px;
  left: 20%;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #6366f1;
}

CSS generated is free to use — no attribution required.

How do CSS speech bubbles work?

A speech bubble is a styled div with a CSS triangle generated by the ::after pseudo-element positioned at the edge. The triangle uses the border trick: zero-size element with one colored border and two transparent borders.

What is the CSS speech bubble code structure?

The .bubble class styles the container (background, padding, border-radius). The .bubble::after rule creates the tail with content: "", position: absolute, width: 0, height: 0, and appropriate border properties.

How do you position the tail on a CSS speech bubble?

For a bottom tail: position the ::after element at bottom: -Xpx and use border-left, border-right, border-top to create a downward triangle. Adjust left percentage to move it horizontally.

What are the common use cases for CSS speech bubbles?

Speech bubbles are commonly used for tooltips, testimonials, chat interfaces, comic-style callouts, and tutorial overlays.

Other CSS Tools
TriangleArrowBorderBox Shadow