CSS Speech Bubble / Tooltip Generator
Generate a CSS chat-bubble / speech-bubble / tooltip shape — a rounded box with a positionable pointed tail built from the classic border-triangle technique (::after/::before), not clip-path. Set color, radius, padding, an optional outline and the tail's edge, offset and size, with a live preview and ready-to-paste CSS + HTML.
Input
Sample content shown in the preview and copied into the HTML snippet.
Every selector is scoped under this class, so it won't collide with your own styles.
Colors
Shape
Also outlines the tail — adds a second, larger pseudo-element (::before) behind it.
Tail
Which edge of the bubble the tail points away from.
Position along that edge — 0 = start, 50 = center, 100 = end.
Output
Your speech bubble will appear here.
The real generated bubble, isolated in a Shadow DOM.
Guides
What this tool does
The CSS Speech Bubble / Tooltip Generator builds a rounded chat-bubble, callout or tooltip shape with a pointed tail, using nothing but a ::after (and, when a border is on, a ::before) pseudo-element on one <div>. There's no clip-path, no image, and no JavaScript — the tail is the classic border-triangle trick: a zero-size box with three border sides transparent and the fourth colored collapses into a solid triangle.
Set the background color, corner radius, padding and an optional outline, then pick which edge the tail points away from, how far along that edge it sits, and how big it is. You get a live preview (rendered from the real generated markup, isolated in a Shadow DOM so the pseudo-elements actually show up) plus ready-to-copy CSS and HTML.
How to use it
- Type the Bubble Text you want to preview, and give the block a Class Name so it won't collide with your own styles.
- Pick the Background and Text colors.
- Adjust Border Radius and the left/right and top/bottom Padding.
- Turn on Add a border if you want an outlined bubble — this also outlines the tail using a second, larger pseudo-element behind the first.
- Under Tail, choose which Edge the tail points away from, its Offset along that edge (0 = start, 50 = center, 100 = end), and its Size.
- Copy the HTML into your markup and the CSS into your stylesheet.
Why does the border need a second pseudo-element?
A CSS border can't follow the diagonal edges of a triangle, so the outline on the tail is faked: ::before draws a slightly bigger triangle in the border color, and ::after draws the actual-size triangle in the background color directly on top of it, anchored at the exact same point. What's left showing around the edges reads as an outline.
Why is the live preview a Shadow DOM instead of a plain preview box?
The tail only exists as a ::after/::before pseudo-element — there's no way to express that through an inline style attribute, which is how most tool previews render safely. This preview mounts the actual generated <style> and HTML in an isolated Shadow DOM instead, so what you see is exactly what you're about to paste, tail and all.
What if I need a different shape, not a bubble with a tail?
For polygon shapes (arrows, stars, hexagons) or a bubble made with clip-path instead of a tail, use the CSS Clip-Path Generator. To round a box without a tail, the CSS Border Radius Generator gives finer per-corner control, and for a plain drop shadow on any element see the CSS Box Shadow Generator.
Use it from code
From 3 credits per callREST API
curl -X POST https://api.iotools.cloud/v1/tool/css-speech-bubble-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"bubbleText": "Hey! Got a sec to chat? 💬",
"className": "bubble",
"backgroundColor": "#4f46e5",
"textColor": "#ffffff",
"borderRadius": "16",
"paddingX": "18",
"paddingY": "12",
"showBorder": "",
"borderColor": "#312e81",
"borderWidth": "2",
"tailPosition": "bottom",
"tailOffset": "50",
"tailSize": "14"
}'Swap in your own key from your account. The tool's fields are the body — no wrapper.
Ask an AI agent
Use the IOTools `css-speech-bubble-generator` tool (CSS Speech Bubble / Tooltip Generator) on this input:
YOUR_INPUT_HEREPaste this at any agent connected to the IOTools MCP server, then add your input.