吹き出しのCSSコピペパーツ 23選

CRG-09-001

こんにちは！定番の吹き出しです。

ベーシック吹き出しBasic Bubble

.cg-sb-basic {
  position: relative;
  display: inline-block;
  padding: 14px 20px;
  font-size: 14px;
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 12px;
}
.cg-sb-basic::before,
.cg-sb-basic::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 26px;
  border: 6px solid transparent;
}
.cg-sb-basic::before {
  bottom: -15px;
  border-top-color: #1B1A17;
  border-bottom: 0;
  border-width: 8px;
  left: 24px;
}
.cg-sb-basic::after {
  border-top-color: #fff;
  border-bottom: 0;
  border-width: 6px;
}

<div class="cg-sb-basic">こんにちは！定番の吹き出しです。</div>

GROSS WT. 619 B ORIGINAL

CRG-09-002

お問い合わせありがとうございます！

チャット風(相手)Chat Left

.cg-sb-chat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cg-sb-chat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C89B6C, #8A6A44);
  flex: none;
}
.cg-sb-chat p {
  position: relative;
  margin: 4px 0 0;
  padding: 12px 18px;
  font-size: 14px;
  background: #EFECE4;
  border-radius: 4px 16px 16px 16px;
  max-width: 220px;
}

<div class="cg-sb-chat"><span class="cg-sb-chat-icon" aria-hidden="true"></span><p>お問い合わせありがとうございます！</p></div>

GROSS WT. 541 B ORIGINAL

CRG-09-003

了解です、よろしくお願いします！

チャット風(自分)Chat Right

.cg-sb-mine {
  margin: 0;
  margin-left: auto;
  display: inline-block;
  padding: 12px 18px;
  font-size: 14px;
  color: #fff;
  background: #E8590C;
  border-radius: 16px 4px 16px 16px;
  max-width: 240px;
}

<p class="cg-sb-mine">了解です、よろしくお願いします！</p>

GROSS WT. 284 B ORIGINAL

CRG-09-004

ホバーツールチップHover Tooltip

.cg-sb-tip {
  position: relative;
  border: none;
  background: none;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 2px dotted #E8590C;
  cursor: help;
  padding: 2px;
}
.cg-sb-tip span {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 220px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: #1B1A17;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.cg-sb-tip span::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1B1A17;
}
.cg-sb-tip:hover span,
.cg-sb-tip:focus-visible span {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

<button class="cg-sb-tip" type="button">用語<span role="tooltip">マウスを乗せると出る補足説明</span></button>

GROSS WT. 1022 B ORIGINAL

CRG-09-005

どうしようかな…

もくもく思考バブルThought Bubble

.cg-sb-think {
  position: relative;
  display: inline-block;
  padding: 16px 24px;
  font-size: 14px;
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 30px;
}
.cg-sb-think::before,
.cg-sb-think::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1B1A17;
}
.cg-sb-think::before {
  width: 14px;
  height: 14px;
  bottom: -16px;
  left: 30px;
}
.cg-sb-think::after {
  width: 7px;
  height: 7px;
  bottom: -28px;
  left: 22px;
}

<div class="cg-sb-think">どうしようかな…</div>

GROSS WT. 556 B ORIGINAL

CRG-09-006

SALE!!

トゲトゲ叫びバブルShout Burst

.cg-sb-shout {
  display: inline-block;
  padding: 24px 30px;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  background: #E8590C;
  clip-path: polygon(
    50% 0%, 61% 12%, 76% 4%, 79% 20%, 96% 18%, 90% 33%,
    100% 42%, 89% 52%, 98% 66%, 82% 68%, 84% 85%, 68% 79%,
    62% 95%, 50% 84%, 38% 95%, 32% 79%, 16% 85%, 18% 68%,
    2% 66%, 11% 52%, 0% 42%, 10% 33%, 4% 18%, 21% 20%,
    24% 4%, 39% 12%
  );
}

<div class="cg-sb-shout">SALE!!</div>

GROSS WT. 452 B ORIGINAL

CRG-09-007

継続は力なり。小さく作って、早く出す。— 開発チームの合言葉

引用ブロック吹き出しQuote Block

.cg-sb-quote {
  position: relative;
  margin: 0;
  padding: 22px 26px 18px 46px;
  font-size: 14.5px;
  background: #FBF4EA;
  border-left: 5px solid #C89B6C;
  border-radius: 0 12px 12px 0;
  max-width: 300px;
}
.cg-sb-quote::before {
  content: "\201C";
  position: absolute;
  left: 12px;
  top: 4px;
  font-size: 44px;
  font-weight: 900;
  color: #C89B6C;
  font-family: Georgia, serif;
}
.cg-sb-quote cite {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-style: normal;
  color: #5A5650;
}

<blockquote class="cg-sb-quote">継続は力なり。小さく作って、早く出す。<cite>— 開発チームの合言葉</cite></blockquote>

GROSS WT. 659 B ORIGINAL

CRG-09-008

POINT吹き出しにラベルを重ねた注釈ボックス。

リボン付き注釈Ribbon Note

.cg-sb-ribbon {
  position: relative;
  display: inline-block;
  padding: 24px 22px 16px;
  font-size: 14px;
  background: #fff;
  border: 2px solid #E8590C;
  border-radius: 10px;
  max-width: 280px;
}
.cg-sb-ribbon span {
  position: absolute;
  top: -13px;
  left: 14px;
  padding: 3px 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #fff;
  background: #E8590C;
  border-radius: 4px;
}

<div class="cg-sb-ribbon"><span>POINT</span>吹き出しにラベルを重ねた注釈ボックス。</div>

GROSS WT. 527 B ORIGINAL

CRG-09-009

まずはここをチェック

矢印下向きバナーArrow Banner

.cg-sb-down {
  display: inline-block;
  padding: 14px 30px 26px;
  font-size: 14px;
  font-weight: 900;
  color: #1B1A17;
  background: #F2B707;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px));
}

<div class="cg-sb-down">まずはここをチェック</div>

GROSS WT. 297 B ORIGINAL

CRG-09-010

このサイトは無料ですか？

はい、全パーツ無料です！

インタビュー対話セットInterview Pair

.cg-sb-qa { display: grid; gap: 10px; max-width: 300px; }
.cg-sb-qa p {
  margin: 0;
  padding: 11px 16px;
  font-size: 13.5px;
  border-radius: 12px;
  position: relative;
}
.cg-sb-qa .q {
  background: #EFECE4;
  border-bottom-left-radius: 2px;
  justify-self: start;
}
.cg-sb-qa .a {
  color: #fff;
  background: #3A5A78;
  border-bottom-right-radius: 2px;
  justify-self: end;
}

<div class="cg-sb-qa"><p class="q">このサイトは無料ですか？</p><p class="a">はい、全パーツ無料です！</p></div>

GROSS WT. 516 B ORIGINAL

CRG-09-011

アイコンの横に置く吹き出し。

横しっぽ吹き出しSide Tail

.cg-sb-sidetail {
  position: relative;
  display: inline-block;
  margin-left: 14px;
  padding: 13px 20px;
  font-size: 14px;
  background: #EFECE4;
  border-radius: 12px;
}
.cg-sb-sidetail::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 16px;
  border: 6px solid transparent;
  border-right: 10px solid #EFECE4;
  border-left: 0;
}

<div class="cg-sb-sidetail">アイコンの横に置く吹き出し。</div>

GROSS WT. 430 B ORIGINAL

CRG-09-012

見て見て！

ぷるぷる震える吹き出しWobble Bubble

.cg-sb-wobble {
  position: relative;
  display: inline-block;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  background: #E8590C;
  border-radius: 30px;
  animation: cg-sb-wobble-shake 2.2s ease-in-out infinite;
  transform-origin: bottom left;
}
.cg-sb-wobble::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 20px;
  border: 7px solid transparent;
  border-top: 12px solid #E8590C;
  border-bottom: 0;
  transform: rotate(18deg);
}
@keyframes cg-sb-wobble-shake {
  0%, 74%, 100% { transform: rotate(0); }
  80% { transform: rotate(-3deg); }
  86% { transform: rotate(3deg); }
  92% { transform: rotate(-2deg); }
}

<div class="cg-sb-wobble">見て見て！</div>

GROSS WT. 716 B ORIGINAL

CRG-09-013

いらっしゃいませ！

ぽんっと出る吹き出しPop In Loop

.cg-sb-pop {
  position: relative;
  display: inline-block;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 700;
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 14px;
  transform-origin: bottom left;
  animation: cg-sb-pop-in 3s cubic-bezier(.3, 1.5, .5, 1) infinite;
}
.cg-sb-pop::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 18px;
  border: 6px solid transparent;
  border-top: 10px solid #1B1A17;
  border-bottom: 0;
}
@keyframes cg-sb-pop-in {
  0% { transform: scale(0); opacity: 0; }
  12%, 82% { transform: scale(1); opacity: 1; }
  95%, 100% { transform: scale(0); opacity: 0; }
}

<div class="cg-sb-pop">いらっしゃいませ！</div>

GROSS WT. 696 B ORIGINAL

CRG-09-014

気になることはありますか？

ふわふわ浮く吹き出しGentle Float

.cg-sb-floaty {
  position: relative;
  display: inline-block;
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #3A5A78;
  border-radius: 16px;
  animation: cg-sb-floaty-move 3.2s ease-in-out infinite;
}
.cg-sb-floaty::before {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 26px;
  border: 7px solid transparent;
  border-top: 11px solid #3A5A78;
  border-bottom: 0;
}
@keyframes cg-sb-floaty-move {
  50% { transform: translateY(-7px); }
}

<div class="cg-sb-floaty">気になることはありますか？</div>

GROSS WT. 568 B ORIGINAL

CRG-09-015

ここをタップ

ぴょんぴょん誘導バブルBouncing Guide

.cg-sb-guide {
  position: relative;
  display: inline-block;
  padding: 11px 22px 15px;
  font-size: 13px;
  font-weight: 900;
  color: #1B1A17;
  background: #F2B707;
  border-radius: 12px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 58% calc(100% - 8px), 50% 100%, 42% calc(100% - 8px), 0 calc(100% - 8px));
  animation: cg-sb-guide-hop 1.2s ease-in-out infinite;
}
@keyframes cg-sb-guide-hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

<div class="cg-sb-guide">ここをタップ</div>

GROSS WT. 541 B ORIGINAL

CRG-09-016

新着メッセージ 2件

ぶるぶる通知バブルBuzzing Alert

.cg-sb-buzz {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: #1B1A17;
  border-radius: 30px;
  animation: cg-sb-buzz-shake 2.8s ease-in-out infinite;
}
.cg-sb-buzz svg { color: #F2B707; }
@keyframes cg-sb-buzz-shake {
  0%, 88%, 100% { transform: translateX(0); }
  90% { transform: translateX(-2.5px) rotate(-1.5deg); }
  93% { transform: translateX(2.5px) rotate(1.5deg); }
  96% { transform: translateX(-1.5px); }
}

<div class="cg-sb-buzz"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>新着メッセージ 2件</div>

GROSS WT. 846 B ORIGINAL

CRG-09-017

しっぽの根本から出現！

しっぽから膨らむ吹き出しGrow from Tail

.cg-sb-grow {
  position: relative;
  display: inline-block;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #E8590C;
  border-radius: 4px 16px 16px 16px;
  transform-origin: top left;
  animation: cg-sb-grow-in 3.4s cubic-bezier(.3, 1.4, .5, 1) infinite;
}
@keyframes cg-sb-grow-in {
  0% { transform: scale(0) rotate(-8deg); opacity: 0; }
  14%, 84% { transform: scale(1) rotate(0); opacity: 1; }
  96%, 100% { transform: scale(0) rotate(-8deg); opacity: 0; }
}

<div class="cg-sb-grow">しっぽの根本から出現！</div>

GROSS WT. 568 B ORIGINAL

CRG-09-018

NEW夏の新メニュー登場

NEW点滅付き吹き出しBlinking NEW

.cg-sb-newbubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  font-size: 13.5px;
  font-weight: 700;
  background: #fff;
  border: 2px solid #E8590C;
  border-radius: 14px;
}
.cg-sb-newbubble::before {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 24px;
  border: 6px solid transparent;
  border-top: 9px solid #E8590C;
  border-bottom: 0;
}
.cg-sb-newbubble b {
  font-size: 10.5px;
  letter-spacing: .12em;
  color: #fff;
  background: #E8590C;
  padding: 3px 9px;
  border-radius: 20px;
  animation: cg-sb-newbubble-blink 1.4s ease-in-out infinite;
}
@keyframes cg-sb-newbubble-blink {
  50% { opacity: .45; }
}

<div class="cg-sb-newbubble"><b>NEW</b>夏の新メニュー登場</div>

GROSS WT. 764 B ORIGINAL

CRG-09-019

こんにちは！

相談したいことがあって…

なんでもどうぞ！

順に現れるチャットChat Sequence

.cg-sb-seq {
  display: grid;
  gap: 8px;
  width: 250px;
}
.cg-sb-seq p {
  margin: 0;
  padding: 10px 16px;
  font-size: 13px;
  border-radius: 14px;
  opacity: 0;
  animation: cg-sb-seq-show 6s ease-in-out infinite;
}
.cg-sb-seq .a {
  background: #EFECE4;
  justify-self: start;
  border-bottom-left-radius: 3px;
}
.cg-sb-seq .b {
  color: #fff;
  background: #E8590C;
  justify-self: end;
  border-bottom-right-radius: 3px;
  animation-delay: 1.2s;
}
.cg-sb-seq p:last-child { animation-delay: 2.4s; }
@keyframes cg-sb-seq-show {
  0% { opacity: 0; transform: translateY(8px); }
  8%, 80% { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; }
}

<div class="cg-sb-seq"><p class="a">こんにちは！</p><p class="b">相談したいことがあって…</p><p class="a">なんでもどうぞ！</p></div>

GROSS WT. 823 B ORIGINAL

CRG-09-020

グラスツールチップGlass Tooltip

.cg-sb-glassbg {
  padding: 44px 40px 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, #C2426B, #3A5A78);
}
.cg-sb-glasstip {
  position: relative;
  padding: 11px 26px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 30px;
  cursor: pointer;
}
.cg-sb-glasstip span {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  border-radius: 10px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.cg-sb-glasstip:hover span,
.cg-sb-glasstip:focus-visible span {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

<div class="cg-sb-glassbg"><button class="cg-sb-glasstip" type="button">HOVER<span role="tooltip">すりガラスの補足チップ</span></button></div>

GROSS WT. 1210 B ORIGINAL

CRG-09-021

入力中インジケーターTyping Indicator

.cg-sb-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 15px 20px;
  background: #EFECE4;
  border-radius: 4px 16px 16px 16px;
}
.cg-sb-typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8A8478;
  animation: cg-sb-typing-bounce 1.2s ease-in-out infinite;
}
.cg-sb-typing span:nth-child(2) { animation-delay: .15s; }
.cg-sb-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes cg-sb-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-6px); opacity: 1; }
}

<div class="cg-sb-typing" role="status" aria-label="相手が入力中"><span></span><span></span><span></span></div>

GROSS WT. 694 B ORIGINAL

CRG-09-022

やわらかい形の吹き出しです

揺らぐブロブ吹き出しLiquid Blob Bubble

.cg-sb-blob {
  position: relative;
  display: inline-block;
  padding: 20px 28px;
  font-size: 14px;
  font-weight: 700;
  color: #1B1A17;
  background: #F2B707;
  animation: cg-sb-blob-morph 6s ease-in-out infinite;
}
.cg-sb-blob::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  bottom: -8px;
  left: 30px;
  background: #F2B707;
  border-radius: 50%;
  animation: cg-sb-blob-dot 6s ease-in-out infinite;
}
@keyframes cg-sb-blob-morph {
  0%, 100% { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
  33% { border-radius: 60% 40% 35% 65% / 55% 60% 40% 45%; }
  66% { border-radius: 35% 65% 55% 45% / 40% 35% 65% 60%; }
}
@keyframes cg-sb-blob-dot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.65); }
}

<div class="cg-sb-blob">やわらかい形の吹き出しです</div>