Speech Bubbles – 8 Free CSS, Bootstrap & Tailwind Sets
Speech Bubbles is a pack of eight sets of CSS speech bubbles, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 using .card, .figure, .blockquote, .btn, .btn-check and its flex and grid utilities where they fit, and Tailwind CSS 4. The sets cover classic bubbles with tails on all four sides and corners, chat bubbles with grouped corners, comic speech, thought and shout balloons, callouts that point at a photo hotspot, a button or a chart bar, testimonial quote bubbles, animated typing indicators and pop-in messages, a dark set, and a modern CSS set built on clip-path: shape(), corner-shape and anchor positioning. The tails are pseudo-elements, gradients and clip-paths rather than images, and only one set uses JavaScript, for a replay button.
A good speech bubble makes it obvious who is speaking and never hides what it points at. The tail should land on its speaker or target, not near it, and it should keep the bubble's border and shadow, which is where most quick CSS bubbles show a seam or a missing outline. Text inside needs 4.5:1 contrast against the bubble colour, not the page, and a bubble over a photo needs a plan for small screens, where it can cover the very thing it describes. The bubble's shape is invisible to screen readers, so who said or thought a line belongs in the text, visible or visually hidden, and decorative tails and quote marks should stay out of the accessibility tree. Anything that animates should finish quickly and stay still for people who ask for reduced motion.
