Skip to main content
CSS Tip

A CSS-only Speech Bubble

Create a Speech Bubble using a few lines of code

A speech bubble made with CSS

.bubble {
--r: 1rem; /* the radius */
--t: 1.5em; /* the size of the tail */

border-inline: var(--t) solid #0000;
border-radius: calc(var(--r) + var(--t))/var(--r);
mask:
radial-gradient(100% 100% at var(--_p) 0,#0000 99%,#000)
var(--_p) 100%/var(--t) var(--t) no-repeat,
linear-gradient(#000 0 0) padding-box;
}
.left {
--_d: 0;
border-bottom-left-radius: 0 0;
}
.right {
--_d: 100%;
border-bottom-right-radius: 0 0;
}

See the Pen CSS only Speech Bubble by Temani Afif (@t_afif) on CodePen.

More Speech Bubble shapes: css-generators.com/tooltip-speech-bubble


More CSS Tips