25 Incredible CSS Speech Bubbles - Open Source
These are the best HTML and CSS Speech Bubble code examples we could find. They are perfect for adding a little spunk to your website / app.
1. Pure CSS Thought Bubbles
Author: Grant (quadbaup)
Links: Source Code / Demo
Created on: June 2, 2018
Made with: HTML, CSS
2. Chat Bubbles
Author: Dave Alger (run-time)
Links: Source Code / Demo
Created on: April 28, 2019
Made with: HTML, CSS
3. Speech Bubble
Author: Rik Schennink (rikschennink)
Links: Source Code / Demo
Created on: July 11, 2018
Made with: HTML, SCSS
Tags: speech, bubble, blockquote, arrow, shadow
4. Speech Bubble Caret
Making a triangle for a speech bubble and using transforms to help create the position. Fork this pen and share your solution in the comments. Note the angles of the triangle as you create your solution.
Author: GRAY GHOST (grayghostvisuals)
Links: Source Code / Demo
Created on: August 12, 2016
Made with: HTML, SCSS
Tags: css, sass, caret, css-triangle, transforms
5. Comic Director Splash Animation
Comic Director is a Windows 8 app written in HTML and CSS. The first time run experience has a nifty little animation, here's how we did it.
Author: Adam Argyle (argyleink)
Links: Source Code / Demo
Created on: March 21, 2013
Made with: HTML, CSS
Tags: animation, keyframes, intel
6. Alternating Speech Bubbles
Author: Kevin Østerkilde (Kosai106)
Links: Source Code / Demo
Created on: March 19, 2016
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
7. Comic Book Speech Bubbles With SVG
A pattern for creating comic book speech bubbles using SVG. Uses Nate Piekos' Sequentialist BB font. Full explanatory article on my site.
Author: Dudley Storey (dudleystorey)
Links: Source Code / Demo
Created on: February 20, 2016
Made with: HTML, SCSS, JS
Tags: comic books, lettering, speech-bubbles, dialogue, deadpool
8. Pure CSS Speech And Thought Bubbles
Pure CSS thought and speech bubbles that grow to fit the text Adapted from http://codepen.io/shaman_tito/pen/GIdoy
Author: Joe Hastings (JoeHastings)
Links: Source Code / Demo, Codepen.io
Created on: December 17, 2015
Made with: HTML, Less
Tags: speech, thought, bubble, css
9. Responsive Speech Bubble
quick demo to answer a question posed by an acquaintance: "How to make a speech bubble to fit into a responsive design?" Criteria: - box section can change dimensions independently of pointer - pointer can be moved to different positions around box - rounded corners - glow or shadow arou...Read More
Author: peros (perossing)
Links: Source Code / Demo
Created on: September 23, 2017
Made with: HTML, CSS
10. CSS Speech Bubble
Author: M.Satrya (satrya)
Links: Source Code / Demo
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
11. Speech Bubble
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo, Stackoverflow.com
Created on: February 14, 2013
Made with: HTML, CSS
Tags: transform, css-shapes
12. Pure CSS Speech Bubbles
Examples of CSS speech bubbles. Originally made by Nicolas Gallagher.
Author: Michael Chernin (mchernin34)
Links: Source Code / Demo
Created on: September 6, 2015
Made with: HTML, CSS
Tags: pure-css, speech-bubbles, popover, triangle
13. Speech Bubble
Author: Rik Schennink (rikschennink)
Links: Source Code / Demo
Created on: July 11, 2018
Made with: HTML, SCSS
Tags: speech, bubble, blockquote, arrow, shadow
14. Speech Bubbles
Author: Daniel Mackay (danielmackay)
Links: Source Code / Demo
Created on: January 25, 2014
Made with: HTML, CSS
15. Comic Speech Bubbles
simple speech & think bubbles. (IE9 support) Now with yell-bubbles
Author: quatmo (quatmo)
Links: Source Code / Demo
Created on: December 25, 2016
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: comic, bubble
16. Pure CSS WhatsApp Desktop Speech Bubble
WhatsApp Desktop Speech Bubble made from pure CSS...
Author: Benni (8eni)
Links: Source Code / Demo
Created on: August 25, 2016
Made with: HTML, SCSS
Tags: css, whatsapp, scss, speech-bubble
17. CSS Speech Bubble With Animation Inside
Author: Susanna (sushimi)
Links: Source Code / Demo
Created on: September 4, 2014
Made with: HTML, CSS
Tags: css
18. CSS / SASS Speech Bubbles
Author: nolastan (nolastan)
Links: Source Code / Demo
Created on: April 10, 2014
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
19. Simple CSS Speech Bubble
CSS speech bubble w/ a text area, forked from example here http://css-tricks.com/examples/ShapesOfCSS/
Author: James Barnett (jamesbarnett)
Links: Source Code / Demo
Made with: HTML, CSS
20. Responsive Testimonial Quote Bubble (CSS)
Author: Jeremy Caris (jeremycaris)
Links: Source Code / Demo
Created on: February 20, 2014
Made with: HTML, CSS
21. Chat Bubbles In CSS
Chat bubbles built in CSS with classes to customize the look and location of talk arrow. *Only tested in Chrome Built off the work of these fine fellows: Nicolas Gallagher https://twitter.com/necolas Craig Buckler https://twitter.com/craigbuckler and Chris Coyier https://twitter.com/chris...Read More
Author: Jason Founts (Founts)
Links: Source Code / Demo
Created on: July 23, 2013
Made with: HTML, CSS
More Awesome Lists:
Share: