43 CSS Speech Bubble Design Examples

Q: How do you create a speech bubble in CSS?

Create a div with background-color, padding, and border-radius for the main shape. Add a ::after pseudo-element with transparent borders and one colored border to form the triangular tail pointer. Position it absolutely relative to the parent container.

Q: What CSS property makes the triangle pointer?

The border property creates triangles through a technique called the border trick. Set width and height to zero, apply thick borders on all sides, make three transparent and one colored. The visible border forms a triangle.

Q: Can speech bubbles work without JavaScript?

Yes. Pure CSS speech bubbles require no JavaScript. Pseudo-elements, positioning, and border properties handle everything. You can also add CSS animations for entrance effects without scripting.

Q: Why isn’t my speech bubble triangle showing?

Common causes include missing content on pseudo-elements, incorrect positioning values, the parent lacking position: relative, or the border color matching the background. Use browser developer tools to inspect pseudo-elements and computed styles.

Q: What’s the difference between speech bubbles and tooltips?

Speech bubbles display dialogue content in chat interfaces with directional tails indicating speakers. Tooltips provide contextual help text appearing on hover or focus, typically smaller with centered arrows. Same CSS technique, different use cases.

Q: How do you make speech bubbles responsive?

Use max-width with percentages or viewport units instead of fixed pixels. Apply clamp() for fluid sizing, and adjust padding with media queries at mobile breakpoints.

Q: Can you animate CSS speech bubbles?

Yes. Apply CSS keyframes for fade-in, scale, or slide animations on message load. Transition properties handle hover effects smoothly. Transform and opacity changes perform best for smooth rendering.

Q: Do CSS speech bubbles work in all browsers?

Core features like pseudo-elements, border-radius, and positioning have near-universal support. They work in Chrome, Firefox, Safari, Edge, and even IE9+. Advanced effects may need fallbacks.

Chat interfaces need visual cues. Without them, users can’t tell who said what.

CSS speech bubble examples solve this problem using pure code, no images, no external libraries.

These dialogue box shapes appear everywhere: messenger apps, customer support widgets, comic-style layouts, tooltip designs.

Building them requires understanding pseudo-elements, the border trick for triangles, and precise positioning.

This guide covers the complete process.

You’ll find working code snippets for left-pointing, right-pointing, top-pointing, and bottom-pointing bubbles.

Plus styling techniques for shadows, gradients, rounded corners, and responsive adaptation.

Each example works across Chrome, Firefox, Safari, and Edge without browser prefixes.

What is a CSS Speech Bubble

A CSS speech bubble is a visual UI element that mimics comic-style dialogue boxes.

It consists of two parts: a container box holding text and a triangular pointer (tail) indicating the speaker direction.

Web designers create these shapes using pure CSS properties like borders, pseudo-elements, and positioning.

No images required. The entire shape renders through code.

Speech bubbles appear in chat interfaces, tooltips, testimonial sections, and comic-style web layouts.

They provide visual context that helps users understand conversation flow and message attribution.

CSS Speech Bubble Examples To Check Out

Speech Bubble Wow by bchiang7

See the Pen
Speech Bubble wow by Brittany Chiang (@bchiang7)
on CodePen.

Circular Speech Bubbles

See the Pen
circular speech bubbles by rajeshdn (@RajRajeshDn)
on CodePen.

Speech Bubbles 3 by cool_lazyboy

See the Pen
speech bubbles 3 by rajeshdn (@RajRajeshDn)
on CodePen.

Speech Bubble Slider by Marc

See the Pen
Speech Bubble Slider by Marc (@mburgess0899)
on CodePen.

Shakespearean Insult Generator by Kris Bocz

See the Pen
Shakespearean Insult Generator – CodePen challenge by Kris Bocz (@kbocz)
on CodePen.

Flat Responsive Speech Bubbles by Faunk

See the Pen
Flat Responsive Speech Bubbles by Fabian Fink (@Faunk)
on CodePen.

Responsive Speech Bubble by Peros

See the Pen
responsive speech bubble by peros (@perossing)
on CodePen.

Chat Bubbles by Dave Alger

See the Pen
chat bubbles by Dave Alger (@run-time)
on CodePen.

CSS Speech Bubble by Rm.satrya

See the Pen
CSS Speech Bubble by Ga Satrya 🇮🇩 (@satrya)
on CodePen.

Pure CSS Speech And Thought Bubbles by Joe Hastings

See the Pen
Pure CSS speech and thought bubbles by Joe Hastings (@JoeHastings)
on CodePen.

Speech Bubble W/ Drop Shadow by Syahrasi

See the Pen
CSS speech bubble w/ dropshadow by Syahrasi (@syahrasi)
on CodePen.

Rik Schennink’s Speech Bubble

See the Pen
Speech bubble by Rik Schennink (@rikschennink)
on CodePen.

Skew’d Bubble Dink by Jase

See the Pen
Skew’d Bubble Dink (CSS) by Jase (@jasesmith)
on CodePen.

SVG Speech Bubble by Timothy Miller

See the Pen
SVG speech bubble by Timothy Miller (@webinspect)
on CodePen.

Comic Book Speech Bubbles with Dudley Storey

See the Pen
Comic Book Speech Bubbles with SVG by Dudley Storey (@dudleystorey)
on CodePen.

Hello, World by kirsten allen

See the Pen
Hello, World by kirsten allen (@kirstenallen)
on CodePen.

Black Lives Matter Dialog Boxes by Rio Jos

See the Pen
Black Lives Matter Dialog Boxes by Rio Jos (@riojosdev)
on CodePen.

CSS Stacked Chat Bubbles by J.M. CIery

See the Pen
CSS stacked chat bubbles (Messenger style) by J.M. CIery (@jmpp)
on CodePen.

Dustin Dowell’s Pure CSS iOS Chat Bubbles Sass Mixin

See the Pen
Pure CSS iOS Chat Bubbles Sass Mixin by Dustin Dowell (@dustindowell)
on CodePen.

Ana Tudor’s Speech Bubble

See the Pen
Speech bubble by Ana Tudor (@thebabydino)
on CodePen.

Pure CSS WhatsApp Desktop Speech Bubble by Benni

See the Pen
Pure CSS WhatsApp Desktop Speech Bubble by Benni (@8eni)
on CodePen.

CSS Chat Bubbles by Andrew

See the Pen
CSS Chat Bubbles by Andrew (@andrewerrico)
on CodePen.

Sassy Right Triangles? Katherine G Shaw’s Speech Bubble Blockquote

See the Pen
Speech Bubble Blockquote with Sassy Right Triangles by Katherine G Shaw (@KatherineGShaw)
on CodePen.

Mrbnsn’s Clip-Path Magic: Speech Bubble W/ Hover Effects

See the Pen
Clip-path speech bubble w/ hover effects by Michael Robinson (@mrbnsn)
on CodePen.

Just the Speech Bubble by Fivera

See the Pen
Speech bubble by Fivera (@fivera)
on CodePen.

Jamesbarnett’s Take on CSS Speech Bubble

See the Pen
CSS speech bubble by James Barnett (@jamesbarnett)
on CodePen.

Convo Boxes Galore with Carles Codony

See the Pen
speech bubbles by Carles Codony (@bitblitter)
on CodePen.

Depthdev’s Callouts & Speech Bubbles

See the Pen
CSS Callouts/Speech Bubbles by Adam (@depthdev)
on CodePen.

Chat Bubbles on an iPhone by Stephen Zuniga

See the Pen
Chat bubbles in iPhone by Stephen Zuniga (@stezu)
on CodePen.

Grant’s Pure CSS Thought Bubbles

See the Pen
Pure CSS Thought Bubbles by Grant (@quadbaup)
on CodePen.

Apple iMessage Vibes by Matt Smith

See the Pen
Apple iMessage in CSS by Matt Smith (@AllThingsSmitty)
on CodePen.

Patrick Kleckner’s 8-Bit Balloon

See the Pen
8-Bit by Patrick Kleckner (@pkleckner)
on CodePen.

Argyleink’s Animated Comic Director Splash

See the Pen
Comic Director Splash Animation by Adam Argyle (@argyleink)
on CodePen.

How CSS Speech Bubbles Work

The magic happens through two CSS techniques working together.

First, a container div creates the main bubble shape with border-radius for rounded corners.

Second, pseudo-elements (::before or ::after) generate the triangular pointer using the border trick method.

The bubble container uses HTML structure combined with absolute positioning to place elements precisely.

Parent elements need position: relative so child pseudo-elements can anchor correctly with position: absolute.

What CSS Properties Create Speech Bubble Shapes

Core properties include border-radius (rounded corners), background-color (fill), padding (internal spacing), and max-width (size control).

The ::before and ::after pseudo-elements handle triangle creation through transparent borders and the content property.

How Does the Border Trick Create Triangle Pointers

Set width and height to zero, then apply thick borders on all sides with different colors.

Making three borders transparent and one colored produces a triangle pointing in the opposite direction.

A 10px solid border with only border-top-color visible creates a downward-pointing arrow; rotating the colored border changes direction.

The CSS Triangle Generator automates this process if math isn’t your thing.

CSS Speech Bubble Examples

Below are practical code snippets covering common speech bubble variations.

Each example uses semantic HTML structure and clean CSS without JavaScript dependencies.

What is a Basic CSS Speech Bubble

The simplest implementation: a div with padding, background-color, border-radius, and a ::after pseudo-element forming the tail.

“ .speech-bubble { position: relative; background: #4a90d9; border-radius: 10px; padding: 15px 20px; color: white; max-width: 300px; }

.speech-bubble::after { content: ”; position: absolute; bottom: -10px; left: 20px; border-width: 10px 10px 0; border-style: solid; border-color: #4a90d9 transparent transparent; } `

What is a Left-Pointing Speech Bubble

The pointer sits on the left edge, useful for chat interfaces where messages align to the right.

` .bubble-left { position: relative; background: #e8e8e8; border-radius: 10px; padding: 15px 20px; margin-left: 15px; }

.bubble-left::before { content: ”; position: absolute; left: -10px; top: 15px; border-width: 10px 10px 10px 0; border-style: solid; border-color: transparent #e8e8e8 transparent transparent; } `

What is a Right-Pointing Speech Bubble

Mirror of left-pointing; the tail extends from the right side for sender messages in messenger-style layouts.

` .bubble-right { position: relative; background: #0084ff; border-radius: 10px; padding: 15px 20px; margin-right: 15px; color: white; }

.bubble-right::after { content: ”; position: absolute; right: -10px; top: 15px; border-width: 10px 0 10px 10px; border-style: solid; border-color: transparent transparent transparent #0084ff; } `

What is a Top-Pointing Speech Bubble

Triangle extends upward from the bubble, ideal for CSS tooltips appearing below trigger elements.

` .bubble-top { position: relative; background: #333; border-radius: 8px; padding: 12px 18px; color: white; margin-top: 12px; }

.bubble-top::before { content: ”; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); border-width: 0 10px 10px; border-style: solid; border-color: transparent transparent #333; } `

What is a Bottom-Pointing Speech Bubble

The classic comic book style with the tail pointing downward toward the speaker.

` .bubble-bottom { position: relative; background: #fff; border: 2px solid #333; border-radius: 12px; padding: 15px 20px; margin-bottom: 15px; }

.bubble-bottom::after { content: ”; position: absolute; bottom: -12px; left: 30px; border-width: 12px 8px 0; border-style: solid; border-color: #fff transparent transparent; }

.bubble-bottom::before { content: ”; position: absolute; bottom: -15px; left: 28px; border-width: 14px 10px 0; border-style: solid; border-color: #333 transparent transparent; } `

What is a Rounded Speech Bubble

Higher border-radius values (20px+) create softer, more modern dialogue boxes popular in messaging apps.

` .bubble-rounded { position: relative; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 25px; padding: 18px 25px; color: white; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); }

.bubble-rounded::after { content: ”; position: absolute; bottom: -8px; left: 25px; border-width: 10px 8px 0; border-style: solid; border-color: #764ba2 transparent transparent; } `

Use the CSS Border Radius Generator for precise corner calculations.

What is a CSS Thought Bubble

Thought bubbles replace the triangular pointer with small circles, creating a cloud-like effect for internal dialogue.

` .thought-bubble { position: relative; background: #f0f0f0; border-radius: 50px; padding: 20px 30px; margin-bottom: 30px; }

.thought-bubble::before, .thought-bubble::after { content: ”; position: absolute; background: #f0f0f0; border-radius: 50%; }

.thought-bubble::before { width: 20px; height: 20px; bottom: -15px; left: 30px; }

.thought-bubble::after { width: 12px; height: 12px; bottom: -25px; left: 20px; } `

How to Style CSS Speech Bubbles

Base structure done. Now make it visually interesting.

How to Add Colors to Speech Bubbles

Set background-color on the container and match the border-color on pseudo-elements exactly.

Gradients work too: use background: linear-gradient() for modern messaging aesthetics.

The CSS Gradient Generator creates smooth color transitions without manual hex calculations.

How to Add Shadows to Speech Bubbles

Apply box-shadow to the main container for depth: 0 4px 15px rgba(0,0,0,0.15) creates subtle elevation.

Filter: drop-shadow() works better than box-shadow when you need the shadow to follow the triangle shape.

Check the CSS Box Shadow Generator for precise shadow values.

How to Add Borders to Speech Bubbles

Bordered bubbles need two pseudo-elements: one for the outer border triangle, one for the inner fill triangle offset by border-width.

` .bordered-bubble { border: 2px solid #333; background: #fff; }

.bordered-bubble::before { border-color: #333 transparent transparent; bottom: -14px; }

.bordered-bubble::after { border-color: #fff transparent transparent; bottom: -12px; } `

How to Make Responsive Speech Bubbles

Use max-width with percentage values, viewport units (vw), or clamp() for fluid sizing across devices.

Media queries adjust padding and font-size at breakpoints; responsive design principles keep bubbles readable on mobile.

` .responsive-bubble { max-width: clamp(200px, 80%, 400px); padding: clamp(10px, 3vw, 20px); } `

CSS Speech Bubble Code Snippets

Copy-paste ready. Tested in Chrome DevTools, Firefox Developer Tools, Safari Web Inspector.

Messenger-Style Blue Bubble

` .messenger-bubble { background: #0084ff; color: #fff; border-radius: 18px; padding: 12px 16px; max-width: 65%; word-wrap: break-word; } `

iMessage Green Bubble

` .imessage-bubble { background: #34c759; color: #fff; border-radius: 18px; padding: 10px 14px; position: relative; }

.imessage-bubble::after { content: ”; position: absolute; bottom: 0; right: -8px; width: 20px; height: 20px; background: radial-gradient(circle at top left, transparent 70%, #34c759 70%); } `

WhatsApp-Style Bubble

` .whatsapp-bubble { background: #dcf8c6; border-radius: 8px; padding: 8px 12px; position: relative; box-shadow: 0 1px 0.5px rgba(0,0,0,0.13); }

.whatsapp-bubble::before { content: ”; position: absolute; top: 0; right: -8px; border-width: 0 0 10px 10px; border-style: solid; border-color: transparent transparent transparent #dcf8c6; } `

Comic Book Style

` .comic-bubble { background: #fff; border: 3px solid #000; border-radius: 50% 50% 50% 0; padding: 20px; font-family: 'Comic Sans MS', cursive; position: relative; }

.comic-bubble::after { content: ”; position: absolute; bottom: -20px; left: 10px; border: 15px solid transparent; border-top-color: #000; } `

Tooltip Dark Theme

` .tooltip-dark { background: rgba(0,0,0,0.85); color: #fff; border-radius: 6px; padding: 8px 12px; font-size: 14px; position: absolute; z-index: 100; }

.tooltip-dark::after { content: ”; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgba(0,0,0,0.85); } `

Glassmorphism Bubble

Frosted glass effect using backdrop-filter; see CSS glassmorphism for full implementation details.

` .glass-bubble { background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; padding: 16px 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } `

Neumorphism Bubble

Soft UI style with inset shadows; explore CSS neumorphism patterns for variations.

` .neumorphic-bubble { background: #e0e0e0; border-radius: 20px; padding: 20px; box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff; } `

Animated Entrance Bubble

Combine with CSS keyframes for fade-in or scale effects on chat message load.

` @keyframes bubbleIn { from { opacity: 0; transform: scale(0.8) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.animated-bubble { animation: bubbleIn 0.3s ease-out forwards; } `

When to Use CSS Speech Bubbles

Context matters. Speech bubbles work in specific user interface scenarios.

What Are Chat Interface Applications

Messaging apps, customer support widgets, AI chatbots, comment threads.

Directional tails distinguish sender from receiver; color coding reinforces message ownership in conversation flow.

Build complete CSS chat box layouts by combining bubble styles with flexbox alignment.

What Are Tooltip Use Cases

Hover hints, form field help text, icon explanations, abbreviation definitions.

Top or bottom-pointing bubbles appear on CSS hover effects; trigger visibility with :hover or :focus states.

The Bootstrap tooltip component handles complex positioning automatically.

What Are Comic-Style Design Implementations

Portfolio sites, children’s content, gaming interfaces, promotional landing pages.

Bold borders, expressive fonts, multiple bubble shapes create playful user experience moments.

CSS Speech Bubble Browser Compatibility

Core features work everywhere modern browsers exist.

::before and ::after pseudo-elements: 98%+ global support including Chrome 1+, Firefox 1.5+, Safari 3+, Edge 12+.

Border-radius: Full support since IE9 (2011); no prefixes needed.

Position absolute/relative: Universal support across all browsers.

Test with Can I Use before shipping; verify cross-browser compatibility for edge cases.

Potential Issues

Backdrop-filter (glassmorphism): No Firefox support until v103; use @supports for fallbacks
Clip-path alternative shapes: Partial IE11 support; stick to border-triangle method for legacy
CSS variables: IE11 doesn’t support custom properties; hardcode values as fallback

Mobile Considerations

Touch devices lack hover states; speech bubble tooltips need tap-to-reveal or always-visible modes.

Mobile-first design approach: start with tap-friendly bubble sizes (min 44px touch targets), scale up for desktop.

Viewport units prevent bubbles from overflowing small screens; test across viewport sizes before deployment.

FAQ on CSS Speech Bubble Examples

How do you create a speech bubble in CSS?

Create a div with background-color, padding, and border-radius for the main shape.

Add a ::after pseudo-element with transparent borders and one colored border to form the triangular tail pointer.

Position it absolutely relative to the parent container.

What CSS property makes the triangle pointer?

The border property creates triangles through a technique called the border trick.

Set width and height to zero, apply thick borders on all sides, make three transparent and one colored.

The visible border forms a triangle.

Can speech bubbles work without JavaScript?

Yes. Pure CSS speech bubbles require zero JavaScript.

Pseudo-elements (::before, ::after), positioning, and border properties handle everything.

Add CSS animations for entrance effects without scripting.

How do you change speech bubble tail direction?

Modify which border receives color and adjust positioning values.

Border-top-color with bottom positioning creates downward tails; border-left-color with right positioning creates left-pointing tails.

Change the colored border side to flip direction.

Why isn’t my speech bubble triangle showing?

Common causes: missing content: ” on pseudo-elements, incorrect position values, parent lacking position: relative, or border-color matching background.

Check Chrome DevTools to inspect pseudo-element rendering and computed styles.

How do you add a border around the entire speech bubble?

Use two pseudo-elements stacked together.

The ::before creates the outer border triangle slightly larger; ::after creates the inner fill triangle.

Offset the inner triangle by your border-width value to reveal the border color beneath.

What’s the difference between speech bubbles and tooltips?

Speech bubbles display dialogue content in chat interfaces with directional tails indicating speakers.

Tooltips provide contextual help text appearing on hover or focus, typically smaller with centered arrows.

Same CSS technique, different use cases.

How do you make speech bubbles responsive?

Use max-width with percentage or viewport units instead of fixed pixel values.

Apply clamp() for fluid sizing: max-width: clamp(200px, 80%, 400px).

Adjust padding with media queries at mobile breakpoints.

Can you animate CSS speech bubbles?

Absolutely. Apply CSS keyframes for fade-in, scale, or slide animations on message load.

Transition properties handle hover effects smoothly.

Transform and opacity changes perform best for 60fps rendering.

Do CSS speech bubbles work in all browsers?

Core features (pseudo-elements, border-radius, positioning) have 98%+ global support.

Works in Chrome, Firefox, Safari, Edge, and even IE9+.

Advanced effects like backdrop-filter need cross-browser fallbacks.

Conclusion

These CSS speech bubble examples give you everything needed to build dialogue boxes, chat interfaces, and tooltip designs from scratch.

No external libraries. No image dependencies. Just clean, maintainable code.

The border trick technique handles triangle pointers in any direction.

Pseudo-elements like ::before and ::after do the heavy lifting without extra markup cluttering your HTML structure.

Style them with CSS shadow effects, gradient backgrounds, or border animations for polished results.

Test your implementations in Chrome DevTools and Firefox Developer Tools before pushing to production.

Browser support sits at 98%+ for core features.

Start with the basic bubble code, then iterate. Add rounded corners, adjust tail positioning, experiment with glassmorphism or neumorphism styles.

Your chat UI deserves better than generic boxes.