36+ CSS Speech Bubbles

Do you want to add a touch of comic book speech bubbles to your web apps, layouts, or user interfaces? Have you been tired of searching for CSS speech bubbles? Wait, in this curated collection, you will find the top 36+ HTML and CSS speech bubble examples that you can use in user interfaces, chat applications, tooltips, and other interactive elements to highlight specific messages.

Our compilation offers a variety of speech bubble code examples, ranging from simple comic book layouts to advanced yet responsive speech bubbles. We have listed the best of the best eye-catching examples that you can use to enhance the interactivity and use-experience of your projects.

1. Responsive Comic Book Layout

See the Pen <a href="https://codepen.io/chris22smith/pen/MyBBOe"> Responsive Comic Book Layout</a> by Chris Smith (<a href="https://codepen.io/chris22smith">@chris22smith</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Smith
Source: Code / Demo
Created on: APRIL 23, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

2. CSS speech bubble example

See the Pen <a href="https://codepen.io/teroauralinna/pen/JMKyeB"> CSS speech bubble example</a> by Tero Auralinna (<a href="https://codepen.io/teroauralinna">@teroauralinna</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tero Auralinna
Source: Code / Demo
Created on: DECEMBER 21, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

3. Simple CSS Speech Bubbles

See the Pen <a href="https://codepen.io/adevade/pen/kabVLE"> Simple CSS Speech Bubbles</a> by Andréas Lundgren (<a href="https://codepen.io/adevade">@adevade</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andréas Lundgren
Source: Code / Demo
Created on: AUGUST 20, 2012
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

4. CSS Speech Bubble

See the Pen <a href="https://codepen.io/satrya/pen/ndrbeJ"> CSS Speech Bubble</a> by Ga Satrya 🇮🇩 (<a href="https://codepen.io/satrya">@satrya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ga Satrya 🇮🇩
Source: Code / Demo
Created on: DECEMBER 28, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

5. CSS / SASS Speech Bubbles

See the Pen <a href="https://codepen.io/nolastan/pen/bGEPBJ"> CSS / SASS Speech Bubbles</a> by Stan (<a href="https://codepen.io/nolastan">@nolastan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: nolastan
Source: Code / Demo
Created on: APRIL 11, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

6. Simple CSS Speech Bubble

See the Pen <a href="https://codepen.io/jamesbarnett/pen/kPrOdy"> CSS speech bubble</a> by James Barnett (<a href="https://codepen.io/jamesbarnett">@jamesbarnett</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: James Barnett
Source: Code / Demo
Created on: FEBRUARY 5, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. Speech Bubble

See the Pen <a href="https://codepen.io/antoniasymeonidou/pen/abwENMG"> Speech Bubbles</a> by NANOUU (<a href="https://codepen.io/antoniasymeonidou">@antoniasymeonidou</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: NANOUU
Source: Code / Demo
Created on: SEPTEMBER 16, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS (SCSS)

8. Alternating Speech Bubbles

See the Pen <a href="https://codepen.io/Kosai106/pen/eZvJwY"> Alternating speech bubbles</a> by Kevin Østerkilde (<a href="https://codepen.io/Kosai106">@Kosai106</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kevin Østerkilde
Source: Code / Demo
Created on: MARCH 20, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

9. CSS only Speech Bubble

See the Pen <a href="https://codepen.io/t_afif/pen/eYMbrJN"> CSS only Speech Bubble</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Temani Afif
Source: Code / Demo
Created on: AUGUST 18, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. CSS Speech Bubble With Animation Inside

See the Pen <a href="https://codepen.io/sushimi/pen/jOvBez"> CSS speech bubble with animation inside</a> by Susanna (<a href="https://codepen.io/sushimi">@sushimi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Susanna
Source: Code / Demo
Created on: SEPTEMBER 5, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. Single-element 3d speech bubble

See the Pen <a href="https://codepen.io/oliverturner/pen/AVvWQM"> Single-element 3d speech bubble</a> by Oliver Turner (<a href="https://codepen.io/oliverturner">@oliverturner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Oliver Turner
Source: Code / Demo
Created on: JANUARY 18, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

12. Chat Bubbles

See the Pen <a href="https://codepen.io/run-time/pen/VNRBJd"> chat bubbles</a> by Dave Alger (<a href="https://codepen.io/run-time">@run-time</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dave Alger
Source: Code / Demo
Created on: APRIL 29, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

13. Pure CSS Speech Bubbles

See the Pen <a href="https://codepen.io/mchernin34/pen/ojXvLq"> Pure CSS Speech Bubbles</a> by Michael Chernin (<a href="https://codepen.io/mchernin34">@mchernin34</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Michael Chernin
Source: Code / Demo
Created on: SEPTEMBER 6, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

14. Speech Bubble

See the Pen <a href="https://codepen.io/rikschennink/pen/mjywQb"> Speech bubble</a> by Rik Schennink (<a href="https://codepen.io/rikschennink">@rikschennink</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rik Schennink
Source: Code / Demo
Created on: JULY 11, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. [Pure CSS] CSS speech bubbles

See the Pen <a href="https://codepen.io/jpidelatorre/pen/wvLKQz"> [Pure CSS] CSS speech bubbles</a> by JP de la Torre (<a href="https://codepen.io/jpidelatorre">@jpidelatorre</a>) on <a href="https://codepen.io">CodePen</a>. Author: JP de la Torre
Source: Code / Demo
Created on: OCTOBER 26, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus), JavaScript

16. Responsive Testimonial Quote Bubble (CSS)

See the Pen <a href="https://codepen.io/jeremycaris/pen/zYOorR"> Responsive Testimonial Quote Bubble (CSS)</a> by Jeremy Caris (<a href="https://codepen.io/jeremycaris">@jeremycaris</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jeremy Caris
Source: Code / Demo
Created on: FEBRUARY 21, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. Speech Bubble Caret

See the Pen <a href="https://codepen.io/grayghostvisuals/pen/GqzRox"> Speech Bubble Caret</a> by GRAY GHOST (<a href="https://codepen.io/grayghostvisuals">@grayghostvisuals</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: GRAY GHOST
Source: Code / Demo
Created on: AUGUST 12, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

18. Speech Bubble

See the Pen <a href="https://codepen.io/thebabydino/pen/DmVqBM"> Speech bubble</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ana Tudor
Source: Code / Demo
Created on: FEBRUARY 15, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

19. Comic Speech Bubbles

See the Pen <a href="https://codepen.io/quatmo/pen/jVoXQe"> comic speech bubbles</a> by quatmo (<a href="https://codepen.io/quatmo">@quatmo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: quatmo
Source: Code / Demo
Created on: DECEMBER 26, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

20. Speech Bubbles

See the Pen <a href="https://codepen.io/danielmackay/pen/kWBMeZ"> Speech Bubbles</a> by Daniel Mackay (<a href="https://codepen.io/danielmackay">@danielmackay</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Daniel Mackay
Source: Code / Demo
Created on: JANUARY 26, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

21. Pure CSS WhatsApp Desktop Speech Bubble

See the Pen <a href="https://codepen.io/8eni/pen/YWoRGm"> Pure CSS WhatsApp Desktop Speech Bubble</a> by Benni (<a href="https://codepen.io/8eni">@8eni</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Benni
Source: Code / Demo
Created on: AUGUST 26, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. Black Lives Matter Dialog Boxes

See the Pen <a href="https://codepen.io/riojosdev/pen/RwrROqy"> Black Lives Matter Dialog Boxes</a> by Rio Jos (<a href="https://codepen.io/riojosdev">@riojosdev</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Remix Protocol
Source: Code / Demo
Created on: JUNE 15, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

23. Pure CSS Responsive Speech Bubble

See the Pen <a href="https://codepen.io/code-boxx/pen/NWwJwbN"> Pure CSS Responsive Speech Bubble</a> by Code Boxx (<a href="https://codepen.io/code-boxx">@code-boxx</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Code Boxx
Source: Code / Demo
Created on: MARCH 6, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

24. Apple iMessage in CSS

See the Pen <a href="https://codepen.io/AllThingsSmitty/pen/jommGQ"> Apple iMessage in CSS</a> by Matt Smith (<a href="https://codepen.io/AllThingsSmitty">@AllThingsSmitty</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Matt Smith
Source: Code / Demo
Created on: MAY 17, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

25. Pure CSS Speech And Thought Bubbles

See the Pen <a href="https://codepen.io/JoeHastings/pen/gPrPMo"> Pure CSS speech and thought bubbles</a> by Joe Hastings (<a href="https://codepen.io/JoeHastings">@JoeHastings</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Joe Hastings
Source: Code / Demo
Created on: DECEMBER 17, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

26. CSS Speech Bubble

See the Pen <a href="https://codepen.io/satrya/pen/ndrbeJ"> CSS Speech Bubble</a> by Ga Satrya 🇮🇩 (<a href="https://codepen.io/satrya">@satrya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: M.Satrya
Source: Code / Demo
Created on: DECEMBER 28, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

27. Hello, World

See the Pen <a href="https://codepen.io/kirstenallen/pen/MWwPYYm"> Hello, World</a> by kirsten allen (<a href="https://codepen.io/kirstenallen">@kirstenallen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: kirsten allen
Source: Code / Demo
Created on: MARCH 24, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

28. Comic Book Speech Bubbles With SVG

See the Pen <a href="https://codepen.io/dudleystorey/pen/wMLBLK"> Comic Book Speech Bubbles with SVG</a> by Dudley Storey (<a href="https://codepen.io/dudleystorey">@dudleystorey</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dudley Storey
Source: Code / Demo
Created on: FEBRUARY 21, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

29. Hello… I guess…

See the Pen <a href="https://codepen.io/alvaromontoro/pen/zYqzgoy"> Hello… I guess…</a> by Alvaro Montoro (<a href="https://codepen.io/alvaromontoro">@alvaromontoro</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alvaro Montoro
Source: Code / Demo
Created on: AUGUST 31, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

30. Comic Director Splash Animation

See the Pen <a href="https://codepen.io/argyleink/pen/AZOzZr"> Comic Director Splash Animation</a> by Adam Argyle (<a href="https://codepen.io/argyleink">@argyleink</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Adam Argyle
Source: Code / Demo
Created on: MARCH 21, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

31. Chat Bubbles In CSS

See the Pen <a href="https://codepen.io/Founts/pen/AJyVOr"> Chat Bubbles in CSS</a> by Jason Founts (<a href="https://codepen.io/Founts">@Founts</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jason Founts
Source: Code / Demo
Created on: JULY 23, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

32. speech bubbles 1

See the Pen <a href="https://codepen.io/RajRajeshDn/pen/oZdRJw"> speech bubbles 1</a> by rajeshdn (<a href="https://codepen.io/RajRajeshDn">@RajRajeshDn</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: rajeshdn
Source: Code / Demo
Created on: MARCH 23, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

33. Speech Bubbles

See the Pen <a href="https://codepen.io/MarkBoots/pen/RwLPXgJ"> Speech Bubbles</a> by Mark Boots (<a href="https://codepen.io/MarkBoots">@MarkBoots</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mark Boots
Source: Code / Demo
Created on: DECEMBER 3, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

34. Responsive Speech Bubble

See the Pen <a href="https://codepen.io/perossing/pen/WZorxv"> responsive speech bubble</a> by peros (<a href="https://codepen.io/perossing">@perossing</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: peros
Source: Code / Demo
Created on: SEPTEMBER 23, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

35. 8-bit pixel speech bubble text balloon

See the Pen <a href="https://codepen.io/josfabre/pen/EBMWwW"> 8-bit pixel speech bubble text balloon</a> by Jos Faber (<a href="https://codepen.io/josfabre">@josfabre</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jos Faber
Source: Code / Demo
Created on: July 11, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

36. Pure CSS Thought Bubbles

See the Pen <a href="https://codepen.io/quadbaup/pen/rKOKQv"> Pure CSS Thought Bubbles</a> by Grant (<a href="https://codepen.io/quadbaup">@quadbaup</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Grant
Source: Code / Demo
Created on: June 2, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS