Design it once. Ship it in code or assets.
CSS Speech Bubble Maker helps you build a speech bubble that stays visually continuous from body to tail. Tune the tail, copy the generated code, and export a transparent asset without rebuilding the same shape somewhere else.
What this tool solves
A basic speech bubble is easy to mock up, but the common box-plus-triangle method starts to show seams when gradients, screenshots, or exports matter. That seam can read as a color break, a faint edge, or a mismatch between the browser preview and the exported asset.
This tool focuses on the moment a speech bubble stops being a throwaway placeholder and becomes part of the finished UI, hero visual, annotation, or slide. The goal is not more decoration. The goal is a result you can reuse with less cleanup.
Why the output uses clip-path
Instead of painting the tail as a second layer, the generator shapes one continuous box with clip-path: polygon().
That keeps the fill treatment consistent from the body to the tail, whether you are using a flat color or a gradient.
It also keeps the output easier to paste into a component, easier to export as a clean asset, and easier to hand off into design work. For modern browser projects, that tradeoff is often worth more than the flexibility of a stitched-together shape.
Best-fit use cases
- Chat UI, onboarding, and product demos where the bubble is part of the final visual.
- Callouts over screenshots, illustrations, or slides that need a clear tail and a clean export.
- Campaign graphics or social assets that benefit from a transparent PNG or SVG handoff.
- Reusable front-end components when you want working code faster than drawing custom vectors.
Current limitations
- Border styling is not built in, because the current implementation prioritizes a continuous fill.
- Fine tail placement and repeated export passes are more comfortable on desktop than on a narrow mobile screen.
- If you need highly irregular comic shapes or hand-drawn outlines, a custom SVG workflow is still the better fit.
Browser support
The generated output is intended for current versions of Chrome, Safari, Firefox, and Edge. Because it relies on
clip-path, it is best suited to modern browser baselines rather than legacy environments that need polygon fallbacks.
Frequently asked questions
Do I need an account?
No. You can start editing as soon as the page loads.
Can I use the result commercially?
Yes. The generated code and exported files are intended for practical production work.
Does the tool save my work?
No. The current version is focused on fast editing, copying, and export in the browser.
Can I add a border around the bubble?
Not in the current version. Right now the tool prioritizes a clean fill and export path over border treatments.
Read next
コピペで、そのまま実装までつなげる。
本体としっぽが途切れて見えにくい吹き出しを、1画面で整えられます。 しっぽを調整し、生成コードをコピーし、必要なら透過PNG・SVGとしてそのまま書き出せます。
このツールが解決すること
吹き出しはすぐ作れますが、角丸の本体と三角形を別々に組み合わせる方法だと、グラデーションや書き出しが入った途端に継ぎ目が見えやすくなります。 色の流れが切れて見えたり、細い線が出たり、ブラウザ上の見え方と書き出し後の見え方が揃いにくくなったりします。
このツールは、吹き出しが単なる仮置きではなく、UI、ヒーロー、注釈、スライドの完成形に近い役割を持つ場面を想定しています。 目的は装飾を増やすことではなく、仕上げ直しを減らして、そのまま使いやすい形にすることです。
clip-path を使う理由
しっぽを別レイヤーで足すのではなく、clip-path: polygon() でひとつのボックスを連続した形に切り出しています。
そのため、本体からしっぽまで、単色でもグラデーションでも塗りのつながりを保ちやすくなります。
そのままコンポーネントに持ち込みやすく、透過アセットとしても書き出しやすく、デザイン作業への受け渡しもスムーズです。 モダンブラウザ前提の案件であれば、この一体感のほうが価値になる場面が多いと考えています。
向いている用途
- 吹き出し自体を完成形の見た目として扱いたいチャットUI、オンボーディング、プロダクトデモ。
- スクリーンショット、イラスト、スライド上に置く注釈や補足ラベル。
- 透過PNGやSVGとして引き渡したいキャンペーン画像やSNS素材。
- 毎回ベクターを描かずに、実装可能な吹き出しを早く用意したいフロントエンド作業。
現状の制約
- 枠線機能は、塗りの連続性を優先しているため現在は搭載していません。
- しっぽ位置の細かな調整や複数回の書き出しは、狭いモバイル幅よりデスクトップのほうが扱いやすいです。
- 手描き風や極端に崩した漫画表現が必要なら、カスタムSVGのほうが向いています。
対応ブラウザ
生成される出力は、Chrome、Safari、Firefox、Edge の現行ブラウザを前提にしています。clip-path に依存するため、
polygon のフォールバックが必要な古い環境よりも、モダンブラウザを前提とした案件に向いています。
よくある質問
ユーザー登録は必要ですか？
不要です。ページを開けばすぐに編集を始められます。
商用利用はできますか？
できます。生成コードと書き出しファイルは実務利用を前提にしています。
作業内容は保存されますか？
保存機能はありません。ブラウザ上で素早く整えて、コピーと書き出しを行う用途に絞っています。
枠線付きの吹き出しは作れますか？
現状は非対応です。まずは塗りの一体感と書き出しやすさを優先しています。