Design a chat or speech bubble with a positioned tail. Tune background, border, radius and tail placement, then copy ready-to-use HTML and CSS.
🔒 Everything runs locally — no data is uploaded.
The bubble itself is a normal padded box with a border and radius. The tail is drawn with two triangles built from the classic CSS border trick, layered as ::before and ::after pseudo-elements. When a border is enabled, the outer triangle uses the border color and is slightly larger, while the inner triangle uses the background color and sits on top, leaving a matching outline around the pointer.
Point the tail from the top, bottom, left or right edge, and slide it anywhere from 5% to 95% along that edge.
Enable a border and the tail automatically gets an outline that matches, just like native chat app bubbles.
Get a single div and a compact style block — no extra markup, classes or JavaScript required.
The tail is a small triangle built with the border trick on a ::before and ::after pseudo-element, positioned outside one edge of the bubble so it looks like a pointer.
This generator draws a slightly larger border-colored triangle behind a smaller fill-colored triangle, so the tail appears outlined to match the bubble border.
Yes. The offset slider positions the tail anywhere from 0% to 100% along the chosen edge, so it can point at any part of an avatar or element.
Yes. The bubble uses normal block sizing with padding, so it grows to fit whatever text or HTML content you place inside it.
Yes. It is plain HTML and CSS with no build step, classes or JavaScript required, so it works in any project.