Speech Bubble CSS Generator
Create custom speech bubbles with CSS using this free online generator.
Adjust the background color, border, size, tail shape, position, and other design settings while checking the result with a real-time preview.
The required CSS code is generated automatically, so you can copy it and use it directly in your web project.
Sponsored Links
Start with a template
(Your current settings will be reset.)
Customization
Preview
CSS Code
.speechBubble {
position: relative;
display: inline-block;
margin-bottom: 20px;
padding: 16px;
border: 2px solid #000000;
border-radius: 8px;
background-color: #d6fdff;
text-align: left;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #000000;
}
.speechBubble::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
border-style: solid;
border-width: 20px 10px 0 10px;
border-color: #000000 transparent transparent;
translate: -50% 100%;
}
.speechBubble::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
border-style: solid;
border-width: 15.5px 7.8px 0 7.8px;
border-color: #d6fdff transparent transparent;
translate: -50% 100%;
}Notes
- This tool is intended for modern browsers. Some generated CSS may not work in older browsers.
- This site uses modern-normalize.css. The preview may look slightly different depending on the reset CSS or other styles used in your project.
Sponsored Links
