12 CSS Chats

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

Related Articles

1. Bootstrap Chats
2. jQuery Chats
3. Tailwind Chats

Author

• Ahmad Shadeed
• November 3, 2021

Links

• article

Made with

• HTML / CSS

About a code

Facebook Messenger's Chat Bubble

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

Responsive: yes

Dependencies: -

Author

• Mubanga
• August 9, 2019

Links

• demo and code
• download

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

Author

• Florin Pop
• April 17, 2019

Links

• demo and code
• download

Made with

• HTML / CSS

About a code

Chat Interface

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

Responsive: yes

Dependencies: -

Author

• abadu
• February 10, 2019

Links

• demo and code
• download

Made with

• HTML (Pug) / CSS (Sass)

About a code

Chat UI Responsive

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

Responsive: yes

Dependencies: -

Author

• Genaro Colusso
• June 5, 2018

Links

• demo and code
• uplabs
• download

Made with

• HTML / CSS

About a code

Chat App

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

Responsive: yes

Dependencies: -

Author

• Thomas d'Aubenton
• August 14, 2017

Links

• demo and code
• uplabs
• download

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

Author

• CodeFrog
• July 23, 2017

Links

• demo and code
• youtube
• download

Made with

• HTML / CSS

About a code

Messenger App

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

Responsive: no

Dependencies: font-awesome.css

Author

• Álvaro Hernández Perales
• April 13, 2015

Links

• demo and code
• download

Made with

• HTML / CSS

About a code

Chat UI 2.0

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

Responsive: yes

Dependencies: font-awesome.css

Author

• Álvaro Hernández Perales
• March 21, 2015

Links

• demo and code
• download

Made with

• HTML / CSS

About a code

Responsive CSS Chat

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

Responsive: yes

Dependencies: font-awesome.css

Author

• anchen
• May 16, 2014

Links

• demo and code
• download

Made with

• HTML / CSS (SCSS)

About a code

Chat Window with CSS3

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

Responsive: yes

Dependencies: -

Author

• Ionel Cucu
• April 29, 2014

Links

• demo and code
• dribbble
• download

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

Author

• Fabrice W.
• May 1, 2013

Links

• demo and code
• download

Made with

• HTML / CSS (SCSS)

About a code

Adium Concept

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

Responsive: no

Dependencies: -