This CSS speech bubble generator builds a rounded bubble with a triangular tail from one element and one pseudo-element, with no images or SVG. Set the tail, radius and colors, check the live preview and copy the code into your chat UI, tooltip or comic layout.
-
Runs entirely in your browser — nothing is uploaded. If you leave a number blank, the generator uses a 20% tail position, a 12 px tail, a 16 px corner radius and 14 px padding.
How the CSS Speech Bubble Generator Works
The bubble is an ordinary block with a background, padding and rounded corners. The tail is its ::after pseudo-element: a box with zero width and height whose thick borders meet at diagonal joins. Color one border to match the bubble, make the rest transparent, and a solid triangle remains. The CSS speech bubble generator places it just outside the edge you choose.
Formula: for a tail of size S on the bottom edge at position P, the rule is top: 100%; left: P%; margin-left: −S px; border-width: S S 0; border-color: background transparent transparent. The result is a triangle 2 × S wide and S tall whose tip points away from the bubble. The negative margin centers it on the P% mark; other sides rotate the same pattern.
- Bubble text — the message, escaped safely in the HTML.
- Tail side — bottom, top, left or right edge of the bubble.
- Tail position — where along that edge the tail sits, from 0% to 100%. If you leave it blank, the generator uses 20%.
- Tail size — the border width in pixels; the tail is twice this wide and this tall. A blank field uses 12 px.
- Corner radius and Padding — the rounding of the corners and the space around the text, in pixels. If you leave them blank, it uses 16 px and 14 px.
- Background and Text color — the fill (also used for the tail) and the text color.
Example Scenarios
| Settings (input) | Key ::after rules (output) | Tail shape |
|---|---|---|
| Bottom, 20%, 12 px, background #1f5c3d | top: 100%; left: 20%; margin-left: -12px; border-width: 12px 12px 0; border-color: #1f5c3d transparent transparent | 24 × 12 px, points down |
| Top, 50%, 10 px, background #1f5c3d | bottom: 100%; left: 50%; margin-left: -10px; border-width: 0 10px 10px; border-color: transparent transparent #1f5c3d | 20 × 10 px, points up |
| Left, 30%, 8 px, background #e5e5ea | right: 100%; top: 30%; margin-top: -8px; border-width: 8px 8px 8px 0; border-color: transparent #e5e5ea transparent transparent | 8 × 16 px, points left |
| Right, 50%, 14 px, background #0b84ff | left: 100%; top: 50%; margin-top: -14px; border-width: 14px 0 14px 14px; border-color: transparent transparent transparent #0b84ff | 14 × 28 px, points right |
Speech Bubble CSS: Tips for Chat and Comic Layouts
Good speech bubble CSS stays small and predictable:
- For chat bubble CSS, use a left tail on incoming messages and a right tail on your own, with a different background for each, keeping the tail position fixed.
- Keep the tail position away from the corners. With a 16 px radius, 15% to 85% looks attached; 0% hangs off the curve.
- The parent must not clip the tail. With overflow: hidden on a card, the triangle disappears, so add margin on the tail side.
- Borders on the bubble need a second, slightly larger triangle in ::before behind the first, colored like the border. That is the usual trick when you want a css callout generator look with an outline.
- A comic speech bubble CSS style usually wants a white fill, a black outline, a bold rounded font and a longer, narrower tail, which you can get by raising the tail size and lowering the padding.
Screen readers ignore the tail because generated content with an empty string carries no text. If you copy the code from the CSS speech bubble generator into a component library, rename the .bubble class to suit. MDN explains how generated content behaves in its reference for the ::before and ::after pseudo-elements.
CSS Speech Bubble Generator FAQ
How do I make a speech bubble in CSS without images?
Give a block element a background, padding and border-radius, then add an ::after pseudo-element with empty content, zero size and thick borders. Color only the border that faces away from the bubble and the diagonal joins form a triangle pointing outward.Is this CSS speech bubble generator free to use?
Yes. It is completely free, needs no account or sign-up and runs entirely in your browser, so nothing is uploaded. The output is plain HTML and CSS with no dependency, and you can use it freely in personal and commercial projects.How do I move the tail of a speech bubble?
Change the side to pick the edge, then change the position percentage to slide the tail along it. In the code, the left value moves a top or bottom tail, and the top value moves a left or right tail.Can I add a border or outline to the bubble?
Yes, with one extra rule. Add a border to the bubble, then create a ::before triangle a pixel or two larger than the ::after one, colored like the border and placed underneath. Box-shadow does not follow the tail, so use filter: drop-shadow for shadows instead.Does the bubble work in all browsers?
The technique uses only border triangles, pseudo-elements, border-radius and absolute positioning, which every current browser supports well. There is no clip-path, mask or custom property involved, so there is nothing to polyfill and no vendor prefix you need to add.How do I make the bubble responsive?
The generated rule already sets max-width: 320px and display: inline-block, so short messages stay compact and long ones wrap onto new lines. Use a percentage tail position rather than pixels so the tail stays in proportion when the bubble width changes.Related Tools
To match a brand color in the CSS speech bubble generator, convert it first with the hex to RGB color converter. The ratio calculator for scaling layouts helps keep padding and tail sizes in proportion, and the triangle calculator gives the angles of a custom tail.