CSS Snippet:
Chat Bubble Container
This CSS snippet creates a WhatsApp-style chat bubble container using soft inner highlights and rounded shaping. The border-radius is used to form a subtle “tail” effect, giving it a familiar messaging-style appearance without needing extra elements.
It’s a simple way to add personality and visual interest to sections while keeping the structure clean.
Difficulty:
Easy
Live preview
Chat Bubble
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Use case
Use this container when you want to create chat-style layouts or add a more conversational, informal feel to your content.
It works well for testimonials, message-style sections, or any content where you want a softer, more human UI style.
Where to apply it
Apply this class to containers that hold short pieces of content.
Common examples include:
• Testimonials or quotes
• Chat or message-style layouts
• Feature highlights with personality
• Informal content sections
This style works best with shorter content blocks rather than large sections.
Notes & Setup
Select your container in Wix Studio.
Add the class: chat-bubble-container
Paste the CSS into your site's Custom CSS section.
You can change the background colour to match your brand. The shape and shadow will automatically adapt.
If you don’t want the hover effect, simply remove the :hover section from the CSS.
Licensing
This CSS snippet is free to use in personal and commercial Wix Studio projects. You’re welcome to copy, adapt, and use it on client or business websites.
Credit is not required, but if you found it useful, we’d really appreciate a small link back to Wix Doctor, ideally on your site’s footer, about page, credits page or wherever feels appropriate.
Linking back helps more Wix users discover the library and supports the continued creation of free snippets, tutorials, and community resources.
CSS Code
css
.chat-bubble-container {
padding: 20px 24px;
/* Bubble shape */
border-radius: 24px 24px 0px 24px; /* bottom-left = tail */
/* Base colour */
background: #25D366; /* change this */
/* Bubble effect */
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.3),
inset 0 -4px 8px rgba(0, 0, 0, 0.15),
0 4px 10px rgba(0, 0, 0, 0.15);
transition: all 0.25s ease;
}
/* Text inside container */
.chat-bubble-container * {
color: #ffffff;
}
/* Optional hover */
.chat-bubble-container:hover {
transform: translateY(-2px);
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.4),
inset 0 -4px 10px rgba(0, 0, 0, 0.2),
0 8px 18px rgba(0, 0, 0, 0.2);
}
.jpg)