36+ CSS Speech Bubbles

A curated compilation of 36+ HTML and CSS speech bubble examples. Each item is unique and stylish and carefully hand-picked from GitHub and CodePen.

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