The CSS Speech Bubble Generator replaces a network speech-bubble API with a browser-side tool that produces a pure-CSS message bubble plus a triangular ::after tail, drawn from a zero-size box with three transparent borders and one colored border, and runs the same validated size, color, side, and offset calculation in both the live preview and the copied rule, so the geometry you see is exactly the geometry you ship.
Teams reach for a remote API when they need a chat message, a tooltip, or a callout pointer, but every external dependency adds a key, a rate limit, a network hop, and a version pin. A local generator trades that for output that runs on the same machine that renders the page: no API key, no quota, no upload, no account, and no new dependency for what amounts to a small block of borders, sizing, and positioning.
The generator validates two complete six-digit hex colors, a corner radius between zero and eighty pixels, and a triangle tail size between four and forty pixels. Empty numeric fields are rejected rather than silently coerced to zero, which means the preview is always reflecting values the copied rule can honor, and the production layout is never asked to absorb an ambiguous border-width or a missing token.
Why replace a speech-bubble API with a browser-side tool
A speech-bubble endpoint typically returns a base64-encoded SVG, a PNG asset, or a string of CSS keyed by hash, and each approach adds friction the in-browser generator removes.
- No API key: the tool needs no token, billing relationship, or quota window to produce the shape.
- No network hop: the calculation runs on the same event loop as the rest of the page, so latency is effectively zero and offline mode still works.
- No dependency: the copied rule is a small block of borders, sizing, and positioning, so the consuming component can stay framework-free.
- No retention risk: nothing is uploaded, logged, or stored, which matters when the bubble will wrap user-generated content.
- No version drift: the geometry is recomputed every render, so a token or layout change in the consuming component cannot silently break a cached bubble from a different deploy.
The cost of those benefits is scope. The tool focuses on a rounded surface and a single straight pointer. Custom offsets, multiple pointers, curved tails, outlines, and drop shadows are deliberately outside the output, because each one changes the geometry the preview agrees to show.
How a pure-CSS triangle tail is calculated
The triangle is the classic CSS border trick described in the W3C CSS Backgrounds and Borders Level 3 specification: a zero-width, zero-height box is given four solid borders, the borders that do not form the visible edge are made transparent, and the remaining border is colored to match the bubble. Per the MDN border-style reference, adjacent borders share a diagonal at the corners, which is what gives the shape its triangular outline instead of a trapezoid.
The generator maps each of the four tail sides onto the same template, and the mapping is the only thing that changes across selections:
| Selected side | Visible projection | Borders set to transparent | Colored border | Position offset |
|---|---|---|---|---|
| Bottom | Below the bubble | Left and right | Top | Below the box, centered horizontally |
| Top | Above the bubble | Left and right | Bottom | Above the box, centered horizontally |
| Left | To the left of the bubble | Top and bottom | Right | Left of the box, centered vertically |
| Right | To the right of the bubble | Top and bottom | Left | Right of the box, centered vertically |
Worked numeric example: a 14-pixel bottom tail
Pick a bottom tail with a tail size of 14 pixels. The generator interprets that number as both the visible projection below the bubble and half of the triangle base, so the math is straightforward:
- top border-width = 2 × 14 = 28 pixels (the colored half)
- left border-width = 14 pixels and right border-width = 14 pixels, both set to transparent
- bottom border-width = 0 (no downward edge, since the pointer projects that way instead)
- width and height on the pseudo-element = 0
- position: absolute, placed below the bubble and offset left: 50% with transform: translateX(-50%) to center the base
The result is a triangle 28 pixels wide at the base that projects 14 pixels below the bubble, so the size set on the slider matches exactly the gap the pointer occupies in the layout.
Steps to configure colors, radius, tail size, and side
Use the CSS Speech Bubble Generator to author a bubble in a single sitting:
- Enter two six-digit hex colors: a bubble background and a text color that produces readable contrast against that background.
- Set the corner radius, in pixels, for the rounded surface of the bubble; the field accepts zero through eighty pixels.
- Set the triangle tail size, in pixels, controlling both the visible projection and half of the triangle base; the field accepts four through forty pixels.
- Choose top, right, bottom, or left, and watch the live preview redraw with the matching border-color geometry.
- Copy the generated base class and the ::after pseudo-element rule produced for the chosen side.
- Add the component decisions the output intentionally leaves blank: width, padding, typography, max-width, wrapping, semantics, contrast, and responsive spacing.
Reading the copied base class and ::after rule
The output is two pieces: the relatively positioned base class that owns the rounded shape and the ::after pseudo-element that draws the triangle. The base class gets the bubble background color, the corner radius, and position: relative so the pseudo-element can be anchored to it. The pseudo-element is the geometry, and every declaration is written explicitly so the rule stays readable in developer tools.
The pseudo-element carries content: '', zero width, zero height, a border-style: solid declaration for every side, three border-color: transparent values on the borders that should disappear, and the bubble background color on the border opposite the chosen side. Explicit declarations are what the W3C CSS Backgrounds and Borders Level 3 specification calls for, and they are what the generator emits — no shorthand that hides which border carries the color.
The preview in the generator draws the same triangle as a real child element because inline styles cannot target pseudo-elements. Both paths use the same validated size, color, side, and offset calculation, so what you see in the preview is what the copied rule produces once it lands in the stylesheet.
What the generator intentionally leaves out
The copied rule is intentionally narrow. It does not include content, padding, width, typography, animation, or interaction logic, because those belong to the component that is using the shape. It also does not include:
- Custom offsets for the pointer, beyond the default 50% center
- Multiple pointers on a single bubble
- Curved tails
- Outlines around the bubble
- Drop shadows beneath the bubble
- Word wrapping, line height, or text overflow rules
Tail size is deliberately capped at forty pixels because the same value drives both the visible projection and half of the triangle base, and beyond that range the geometry stops being practical for a message surface. Empty numeric controls are rejected rather than converted to zero, so the copied rule never contains an ambiguous declaration. For the shadow layer specifically, the same API-alternative pattern applies through the Box Shadow Generator API Alternative for Client-Side CSS companion, which keeps that visual treatment local to the browser.
Wiring the bubble into chat, tooltips, and quotes
A decorative pointer does not establish a semantic relationship, so the surrounding HTML has to carry the meaning. Three patterns come up again and again:
- Chat: expose author, order, status, and timestamps in text rather than relying on left or right placement alone to imply authorship.
- Quote: use a paragraph element for the body and cite or surrounding markup for the attribution; the bubble only frames the content.
- Tooltip: the shape alone is not enough — add trigger association, keyboard reachability, predictable focus behavior, dismissal on Escape, and an accessible relationship to the triggering element. A decorative tail must never be promoted to a tooltip by visual appearance.
Check contrast between the text color and the bubble background by hand. The generator does not compute WCAG ratios, and a visually pleasing bubble can still fail accessibility checks at common text sizes. Long unbroken strings, translated copy, zoom, and narrow mobile widths may expand the box or collide with the tail, so give the production component a sensible max-width, wrapping rules, padding, and enough outer space on the tail side. An ancestor using overflow: hidden can clip the pointer, so reserve space and inspect every breakpoint.
After copying, integrate existing design tokens, then test semantic reading order, contrast, high-contrast modes, zoom, localization, overflow, and the exact container that will host the pointer. The 50% offset can be changed to align the pointer with an avatar or anchor without changing the underlying triangle geometry — the colored border stays where the slider placed it, and only the absolute offset on the pseudo-element moves.
For a deeper look, see CSS Stripes Generator Alternative With Hard-Edge Stops.