CSS Speech Bubble Generator
Generate a CSS speech bubble with a customizable tail position, colour and radius for chat interfaces and callouts.
Last reviewed by the Radiatus Cloud team
Generate a CSS speech bubble with a customizable tail, colour and radius.
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Build speech bubbles with CSS
Speech bubbles are the familiar rounded containers with a pointing tail, used in chat interfaces, comments and callouts. This generator creates them entirely with CSS. You choose which side the tail points from, the bubble colour and the corner radius, and the tool produces a reusable snippet. The tail is drawn using the border trick on an after pseudo-element, a classic technique that needs no images.
Apply the generated class to any container of text, and the bubble sizes itself to the content.
Flexible and image-free
Because the bubble and its tail are pure CSS, they scale crisply at any size and resolution, load instantly and are easy to recolour by changing a single value. This makes them perfect for message threads where you might show left-aligned and right-aligned bubbles in different colours for each speaker.
Adjust the tail position and radius to match your design, and duplicate the class with different colours for sent and received messages. All generation happens locally in your browser.
Notes on the generated code
Because the css speech bubble generator runs entirely in your browser, you can experiment with every option and watch the generated code update instantly, with nothing uploaded and no account required. The output is clean, standards-based CSS that works in any project without external libraries or a build step, so you can paste it straight into your stylesheet and refine it further by hand whenever you need to.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
How is the tail drawn?
The tail uses the CSS border trick on a pseudo-element, where transparent borders on three sides and a coloured border on one create a triangle.
Can I have different coloured bubbles?
Yes. Generate the CSS, then create variants of the class with different background colours for each speaker in a chat.
Do speech bubbles need images?
No. They are drawn entirely with CSS, so they are crisp at any size and resolution and load instantly.
How do I move the tail?
Choose the tail side in the generator, or adjust the position values in the generated CSS to fine-tune where it points.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Pick the tail side, colour and radius, then copy the CSS.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.