Post thumbnail: 8 CSS Speech Bubbles

8 CSS Speech Bubbles

Collection of hand-picked free HTML and CSS speech bubble code examples.


Related Articles

  1. CSS Blockquotes

Demo image: Speech Bubble

Author

  • Rik Schennink

Made with

  • HTML / CSS (SCSS)

About the code

Speech Bubble

HTML and CSS simple responsive speech bubble.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Responsive Speech Bubble

Author

  • peros

Made with

  • HTML / CSS

About the code

Responsive Speech Bubble

Box section can change dimensions independently of pointer. Pointer can be moved to different positions around box. Rounded corners. Glow or shadow around the whole thing that changes along with component shapes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Speech Bubble Caret

Author

  • GRAY GHOST

Made with

  • HTML / CSS (SCSS)

About the code

Speech Bubble Caret

Making a triangle for a speech bubble and using transforms to help create the position.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Alternating Speech Bubbles

Author

  • Kevin Østerkilde

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Alternating Speech Bubbles

...

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Dudley Storey

Made with

  • HTML / CSS (SCSS)

About the code

Comic Book Speech Bubbles with SVG

A pattern for creating comic book speech bubbles using SVG.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Pure CSS Speech and Thought Bubbles

Author

  • Joe Hastings

Made with

  • HTML / CSS (Less)

About the code

Pure CSS Speech and Thought Bubbles

Pure CSS thought and speech bubbles that grow to fit the text.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Speech Bubble

Author

  • M.Satrya

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

CSS Speech Bubble

Simple speech bubble with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Speech Bubble

Author

  • Ana Tudor

Made with

  • HTML / CSS

About the code

Speech Bubble

A complex CSS shape speaking bubble.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

back to top