Collection of hand-picked free HTML and CSS chat code examples from Codepen and other resources.

Demo image: Facebook Messenger's Chat Bubble

Author

  • Ahmad Shadeed

Made with

  • HTML / CSS

About a code

Facebook Messenger's Chat Bubble

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

Responsive: yes

Dependencies: -

Demo image: Direct Messaging

Author

  • Mubanga

Made with

  • HTML (Slim) / CSS (SCSS) / JS

About a code

Direct Messaging

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

Responsive: no

Dependencies: font-awesome.css

Demo image: Chat Interface

Author

  • Florin Pop

Made with

  • HTML / CSS

About a code

Chat Interface

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

Responsive: yes

Dependencies: -

Demo image: Chat UI Responsive

Author

  • abadu

Made with

  • HTML (Pug) / CSS (Sass)

About a code

Chat UI Responsive

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

Responsive: yes

Dependencies: -

Demo image: Chat App

Author

  • Genaro Colusso

Made with

  • HTML / CSS

About a code

Chat App

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

Responsive: yes

Dependencies: -

Demo image: Material Messaging App Concept

Author

  • Thomas d'Aubenton

Made with

  • HTML / CSS

About a code

Material Messaging App Concept

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

Responsive: yes

Dependencies: font-awesome.css, bootstrap.css

Demo image: Messenger App

Author

  • CodeFrog

Made with

  • HTML / CSS

About a code

Messenger App

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

Responsive: no

Dependencies: font-awesome.css

Demo image: Chat UI 2.0

Author

  • Álvaro Hernández Perales

Made with

  • HTML / CSS

About a code

Chat UI 2.0

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

Responsive: yes

Dependencies: font-awesome.css

Demo image: Responsive CSS Chat

Author

  • Álvaro Hernández Perales

Made with

  • HTML / CSS

About a code

Responsive CSS Chat

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

Responsive: yes

Dependencies: font-awesome.css

Demo image: Chat Window with CSS3

Author

  • anchen

Made with

  • HTML / CSS (SCSS)

About a code

Chat Window with CSS3

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

Responsive: yes

Dependencies: -

Demo image: HTML/CSS Implementation of HipChat Redesign

Author

  • Ionel Cucu

Made with

  • HTML / CSS (Less) / JS

About a code

HTML/CSS Implementation of HipChat Redesign

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

Responsive: no

Dependencies: font-awesome.css, jquery.js, jquery.mousewheel.js, jquery.jscrollpane.js

Demo image: Adium Concept

Author

  • Fabrice W.

Made with

  • HTML / CSS (SCSS)

About a code

Adium Concept

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

Responsive: no

Dependencies: -