CSS Generators: Tooltips & Speech Bubbles

A Collection of Tooltips & Speech Bubbles Shapes

Get a CSS-only Tooltip Shape or Speech Bubble made with a single-element and customizable using CSS variables.

<div class="tooltip">Your text content</div>

Read the content of each tooltip to know which one to use. You can adjust the position of the tail using the range slider.

Click the shape to copy the CSS

This is a Tooltip with a solid coloration and without border radius

This is a Speech Bubble with a solid coloration and with border radius

This is a Tooltip with a gradient coloration and without border radius

This is a Speech Bubble with a gradient coloration and with border radius

This is a Tooltip with a border and without border radius. Border and background have a solid coloration

This is a Tooltip with a border and with a border radius. Border and background have a solid coloration

This is a Tooltip with a border and without border radius. Border and background have a gradient coloration

This is a Tooltip with a border and a border radius. Border and background have a gradient coloration

This is a Tooltip with a border and without border radius. Border can have a solid or gradient coloration and the background is transparent

This is a Tooltip with a border and a border radius. Border can have a solid or gradient coloration and the background is transparent

This is a Tooltip with a gradient or solid coloration and with border radius

This is a Tooltip
with a solid
coloration

This is a Tooltip
with a solid
coloration and
a border

This is a Tooltip
with a gradient
coloration

This is a Tooltip
with a gradient
coloration and
a border

This is a Tooltip with a solid coloration and without border radius

This is a Speech Bubble with a solid coloration and with border radius

This is a Tooltip with a gradient coloration and without border radius

This is a Speech Bubble with a gradient coloration and with border radius

This is the same as #1 but with more control over the tail

This is the same as #2 but with more control over the tail

This is the same as #3 but with more control over the tail

This is the same as #4 but with more control over the tail

This is the same as #5 but with more control over the tail

This is the same as #6 but with more control over the tail

This is the same as #7 but with more control over the tail

This is the same as #8 but with more control over the tail

This is the same as #13 but with more control over the tail

This is the same as #14 but with more control over the tail

This is the same as #15 but with more control over the tail

This is the same as #16 but with more control over the tail

This is the same as #5 but with another shape for the tail

This is the same as #6 but with another shape for the tail

This is the same as #7 but with another shape for the tail

This is the same as #8 but with another shape for the tail

This is the same as #7 but with another shape for the tail

This is the same as #5 but with another shape for the tail

This is the same as #6 but with another shape for the tail

This is the same as #7 but with another shape for the tail

This is the same as #8 but with another shape for the tail