CSS Tooltip & Speech Bubble Generator

Generate CSS-only tooltips and speech bubbles with a configurable arrow — copy the code instantly.

Controls

Tooltip Text

Arrow Position

Arrow Size8px

Background

Text Color

Border Radius6px

Padding X16px

Padding Y8px

Font Size14px

Max Width220px

Border

Box Shadow

Live Preview

This is a tooltip

Generated CSS

.tooltip {
  position: relative;
  display: inline-block;
  background: #1e293b;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  max-width: 220px;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.tooltip::after {
  content: '';
  position: absolute;
  border: 8px solid transparent;
  border-top-color: #1e293b;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
}