CSS Generators

A collection of Tooltips/Speech Bubbles

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 Tooltip with a solid coloration and without border radius
This is a Tooltip with a solid coloration and without border radius
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 Speech Bubble with a solid coloration and with border radius
This is a Speech Bubble with a solid coloration and with 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 Tooltip with a gradient coloration and without border radius
This is a Tooltip with a gradient coloration and without 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 Speech Bubble with a gradient coloration and with border radius
This is a Speech Bubble with a gradient coloration and with 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 without 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 solid coloration
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 with a 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 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 without border radius. Border and background have a gradient 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 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 a 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 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 without border radius. Border can have a solid or gradient coloration and the background is transparent
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 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 border and a 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 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 gradient or solid coloration and with border radius
This is a Tooltip with a gradient or solid coloration and with border radius
This is a Tooltip with a gradient or solid coloration and with border radius
This is a Tooltip with a gradient or solid coloration and with border radius
This is a Tooltip with a gradient or solid coloration and with border radius
This is a Tooltip with a gradient or solid coloration and with border radius
This is a Tooltip with a gradient or solid coloration and with border radius
This is a Tooltip with a gradient or solid coloration and with border radius
This is a Tooltip with a gradient or solid coloration and with border radius
This is a Tooltip with a gradient or solid coloration and with border radius
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 Tooltip with a solid coloration and without border radius
This is a Tooltip with a solid coloration and without border radius
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 Speech Bubble with a solid coloration and with border radius
This is a Speech Bubble with a solid coloration and with 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 Tooltip with a gradient coloration and without border radius
This is a Tooltip with a gradient coloration and without 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 Speech Bubble with a gradient coloration and with border radius
This is a Speech Bubble with a gradient coloration and with 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 #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 #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 #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 #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 #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 #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 #8 but with another shape for the tail
?