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