Speech Bubble CSS Generator
Speech Bubble Generator generates CSS code for creating speech bubbles.
The design of the border and the tail can also be customized.
The output CSS code can be easily used by copy and paste.
Sponsored Links
Start customizing from templates
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
- It is intended for use with modern browsers and may contain CSS properties that are not supported by IE or older versions of browsers.
- The reset CSS of this site is based on “modern-normalize.css”. Depending on the reset CSS and other stylesheets loaded in your project, there may be differences from the preview appearance.
Sponsored Links
