Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a chat message with CSS?
To create chat messages with CSS, you can style conversation bubbles that alternate between different users. This involves creating message containers with distinct styling for each participant and proper alignment.
Syntax
.message {
background-color: color;
border-radius: radius;
padding: value;
margin: value;
}
Example
The following example creates a chat interface with alternating message styles −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0 auto;
max-width: 800px;
padding: 0 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f5f5;
}
.message {
font-size: 16px;
border: 2px solid #dedede;
background-color: #55e4a8;
color: black;
border-radius: 12px;
padding: 15px;
margin: 15px 0;
position: relative;
clear: both;
}
.darker {
border-color: #ccc;
background-color: #6f19b6;
color: white;
}
.message::after {
content: "";
clear: both;
display: table;
}
.message img {
float: left;
max-width: 50px;
width: 50px;
height: 50px;
margin-right: 15px;
border-radius: 50%;
object-fit: cover;
}
.message img.right {
float: right;
margin-left: 15px;
margin-right: 0;
}
.timeStampRight {
float: right;
color: #666;
font-size: 12px;
margin-top: 5px;
}
.timeStampLeft {
float: left;
color: #ccc;
font-size: 12px;
margin-top: 5px;
}
.message p {
margin: 0;
line-height: 1.4;
}
</style>
</head>
<body>
<h1>Chat Messages Example</h1>
<div class="message">
<img src="https://i.picsum.photos/id/295/200/200.jpg" alt="User 1">
<p>Hello! How are your holidays going?</p>
<span class="timeStampRight">9:00</span>
</div>
<div class="message darker">
<img class="right" src="https://i.picsum.photos/id/255/200/200.jpg" alt="User 2">
<p>They are going pretty good. Thanks for asking!</p>
<span class="timeStampLeft">9:05</span>
</div>
<div class="message">
<img src="https://i.picsum.photos/id/295/200/200.jpg" alt="User 1">
<p>Are you visiting somewhere during the holidays?</p>
<span class="timeStampRight">9:07</span>
</div>
<div class="message darker">
<img class="right" src="https://i.picsum.photos/id/255/200/200.jpg" alt="User 2">
<p>Yes! Thinking of going to Disneyland.</p>
<span class="timeStampLeft">9:10</span>
</div>
</body>
</html>
Output
The above code will produce the following output −
A chat interface displays with alternating message bubbles. User 1's messages appear in green with profile pictures on the left, while User 2's messages appear in purple with pictures on the right. Each message includes timestamps aligned to match the message sender's side.
Key Features
- Message containers: Rounded rectangles with distinct background colors
- Profile pictures: Circular images that float left or right based on the sender
- Timestamps: Small text aligned to match message positioning
- Clearfix: Ensures proper layout flow between messages
Conclusion
CSS chat messages use floating elements, background colors, and border-radius to create conversation bubbles. The key is alternating styles and proper clearfix techniques for clean message flow.
Updated on: 2026-03-15T15:12:27+05:30
500 Views
Advertisements