How to create a speech bubble in CSS

Sharing is caring!

How to create a speech bubble in CSS, in this very simple CSS tutorial, I’ll show you how to to make a speech bubble in CSS.

So as outlined in the video above. We start off with creating our html div element.

<div class="speech-bubble">
Speech Bubble!
</div>

Then we create the CSS for the speech bubble.

.speech-bubble {
position:relative;
background-color: #00aabb;
border-radius: .4em;
color:#fff;
padding: 5rem;
font-size:3rem;
text-align:center;
font-family: 'Kaushan Script', cursive;
}

But if you decide to use a custom Google font like I did you will need to include the @Import code from Google fonts to the top of the CSS file.

@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');

Then we need to add the ‘after’ pseudo-element for the speech bubble arrow.

.speech-bubble:after {
content: '';
position:absolute;
bottom:0;
left:50%;
width:0;
height:0;
border:20px solid transparent;
border-top-color: #00aabb;
border-bottom:0;
margin-left:-20px;
margin-bottom: -20px;
}

If you’re using CSS preprocessors such as LESS/SASS , please refer to the video on how to change this CSS for that. That’s it, you have a CSS speech bubble which you can customise to your liking. Thanks for reading, feel free to subscribe for future coding tutorials.