本文へスキップ
  1. Web BENTO CSS
  2. カテゴリ一覧
  3. テキストエフェクト
Aa
05 / TEXT FX 12 パーツ

CSSテキストエフェクト 12選

光る・流れる・跳ねる、コピペで使えるCSSテキストエフェクト（文字アニメーション）のサンプル集。JS不要、必要な @keyframes までコード内にすべて含まれています。シャッフルで色のバリエーションを試して、気に入ったらそのままコピーしてください。クラス名は .bnto-text-neon 形式です。

該当するパーツが見つかりませんでした。

NEON

ネオン発光

/* 暗い背景の上で映えます */
.bnto-text-neon {
  --neon: hsl(5 100% 65%);
  color: #fff; font-weight: 900;
  text-shadow: 0 0 7px var(--neon),
    0 0 16px var(--neon), 0 0 28px var(--neon);
  animation: bnto-neon 1.8s ease-in-out infinite alternate;
}
@keyframes bnto-neon {
  from { text-shadow: 0 0 4px var(--neon), 0 0 10px var(--neon); }
  to   { text-shadow: 0 0 9px var(--neon),
         0 0 20px var(--neon), 0 0 34px var(--neon); }
}
使い方のコツ

複数の text-shadow を重ねて発光を表現しています。影の数とぼかし半径（px）を増やすほど強く光ります。文字色は白、影色（--neon）をアクセントカラーにして、暗い背景の上で使うのが鉄則です。

SHIMMER

流れるグラデ

.bnto-text-shimmer {
  background: linear-gradient(90deg,
    hsl(5 100% 65%), hsl(43 100% 50%), hsl(5 100% 65%));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  animation: bnto-shimmer 3s linear infinite;
}
@keyframes bnto-shimmer { to { background-position: 200% center; } }
使い方のコツ

background-clip: text; と color: transparent; のセットが必須。これが無いとグラデが見えません。流れる速さは 3s の数値で調整できます。静止したグラデ文字はグラデーションカテゴリにあります。

TYPING...

タイピング風

/* 9ch と steps(9) は文字数に合わせて変更 */
.bnto-text-typing {
  display: inline-block; overflow: hidden;
  white-space: nowrap;
  font-family: monospace;
  color: hsl(202 73% 56%);
  border-right: 3px solid hsl(202 73% 56%);
  width: 9ch;
  animation: bnto-typing 2.4s steps(9) infinite,
             bnto-caret .7s step-end infinite;
}
@keyframes bnto-typing { from { width: 0; } to { width: 9ch; } }
@keyframes bnto-caret { 50% { border-color: transparent; } }
使い方のコツ

steps() で幅を1文字ずつ広げる仕組み。9ch と steps(9) は表示する文字数と同じ値に揃えてください。1文字の幅が揃う等幅フォントで使うときれいです。1回だけ再生するなら infinite を 1 forwards に変えます。

POP 3D

立体ポップ

.bnto-text-3d {
  color: #fff; font-weight: 900;
  text-shadow: 2px 2px 0 hsl(5 90% 62%),
               4px 4px 0 hsl(5 65% 40%);
}
使い方のコツ

ずらした text-shadow を2色重ねるだけの軽量テク。2px 2px／4px 4px のずらし幅を大きくすると立体感が強調されます。さらに 6px 6px 0、8px 8px 0…と同系色を積み重ねると押し出しのような厚みも作れます。

OUTLINE

中抜き文字（袋文字）

.bnto-text-outline {
  color: transparent;
  -webkit-text-stroke: 2px hsl(258 47% 56%);
  font-weight: 900;
}
使い方のコツ

-webkit-text-stroke で輪郭を描き、color: transparent; で塗りを消しています。細いフォントだと線がつぶれるので太字フォント推奨。color に色を入れれば、縁取り付きの「袋文字」としても使えます。

ここが大事！

マーカーアニメ

.bnto-text-marker {
  background-image: linear-gradient(
    hsl(43 100% 50% / 0.55), hsl(43 100% 50% / 0.55));
  background-repeat: no-repeat;
  background-position: 0 78%;
  background-size: 0% 42%;
  animation: bnto-marker 2.6s ease-in-out infinite;
}
@keyframes bnto-marker {
  55%, 100% { background-size: 100% 42%; }
}
使い方のコツ

グラデ背景の background-size を横に伸ばして「蛍光ペンで引く」動きを再現。マーカーの太さは 42%、位置は 78% で調整します。1回だけ引いて止めたい場合は infinite を 1 forwards に変更してください。

BOUNCE

バウンス

.bnto-text-bounce {
  color: hsl(41 100% 50%);
  display: inline-block;
  font-weight: 900;
  animation: bnto-bounce 1.4s ease-in-out infinite;
}
@keyframes bnto-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
使い方のコツ

transform を動かすには display: inline-block; が必須（インライン要素は transform が効きません）。跳ねる高さは -12px、テンポは 1.4s で調整。「NEW」バッジや注目ラベルとの相性が抜群です。

WAVE!!

波打ち文字

.bnto-text-wave { color: hsl(150 58% 44%); font-weight: 900; }
.bnto-text-wave span {
  display: inline-block;
  animation: bnto-wave 1.6s ease-in-out infinite;
}
.bnto-text-wave span:nth-child(2) { animation-delay: .12s; }
.bnto-text-wave span:nth-child(3) { animation-delay: .24s; }
.bnto-text-wave span:nth-child(4) { animation-delay: .36s; }
.bnto-text-wave span:nth-child(5) { animation-delay: .48s; }
.bnto-text-wave span:nth-child(6) { animation-delay: .6s; }
@keyframes bnto-wave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
使い方のコツ

1文字ずつ <span> で囲み、animation-delay をずらして波を作ります。文字数が増えたら nth-child の行を .12s 刻みで追加してください。長文には不向きなので、5〜8文字程度のロゴ的な使い方がおすすめです。

FOCUS

ぼかしフォーカス

.bnto-text-focus {
  color: hsl(119 31% 51%);
  font-weight: 900;
  animation: bnto-focus 2.4s ease-in-out infinite;
}
@keyframes bnto-focus {
  0%, 100% { filter: blur(0); opacity: 1; }
  45%      { filter: blur(7px); opacity: .35; }
}
使い方のコツ

filter: blur() でピントが合ったり外れたりする演出。登場時に一度だけぼかしを解除したい場合は、キーフレームを 0% { blur(8px); opacity: 0 } 100% { blur(0); opacity: 1 } にして 1 forwards で再生すると「ぼかし登場」になります。

ふわっと登場

文字間ふわっと

.bnto-text-tracking {
  color: hsl(327 60% 56%);
  display: inline-block;
  font-weight: 900;
  animation: bnto-tracking 3s ease-out infinite;
}
@keyframes bnto-tracking {
  0%        { letter-spacing: -.35em; opacity: 0; }
  40%, 100% { letter-spacing: .12em; opacity: 1; }
}
使い方のコツ

詰まった letter-spacing がふわっと開く登場演出。ヒーローエリアのキャッチコピーに向いています。実運用では infinite を 1 forwards にして、ページ表示時に1回だけ再生するのがおすすめです。

RETRO

レトロ影

.bnto-text-retro {
  color: hsl(41 100% 50%);
  -webkit-text-stroke: 1.5px #2A2622;
  text-shadow: 5px 5px 0 hsl(11 75% 58%);
  font-weight: 900;
}
使い方のコツ

濃い縁取り＋ずらしたベタ影でアメコミ風のポップな見た目に。影のずらし幅 5px 5px を大きくするほどレトロ感が強まります。丸ゴシック系の太字フォントと合わせると雰囲気がまとまります。

GLITCH

グリッチ

.bnto-text-glitch {
  --g1: hsl(202 73% 56%);
  --g2: hsl(338 73% 56%);
  color: #2A2622; font-weight: 900;
  animation: bnto-glitch 1.1s steps(2) infinite;
}
@keyframes bnto-glitch {
  0%, 100% { text-shadow: 2px 0 var(--g1), -2px 0 var(--g2); }
  25%      { text-shadow: -2px 0 var(--g1), 2px 0 var(--g2); }
  50%      { text-shadow: 2px 2px var(--g1), -2px -2px var(--g2); }
}
使い方のコツ

2色の text-shadow を steps(2) でカクカク切り替えて色ズレを表現。サイバー・ゲーム系のデザインと好相性です。--g1／--g2 はシアンとマゼンタのような補色寄りの組み合わせが「らしく」見えます。

CSSテキストエフェクトの基礎知識

テキストエフェクトは、キャッチコピーや見出しの文字そのものを演出して視線を集めるテクニックです。このページでは、コピペで使えるCSSの文字アニメーションを12種類掲載しています。すべてJavaScript不要のピュアCSSで、動きに必要な @keyframes までコードに含まれているため、貼り付けるだけでプレビューと同じ動きが再現できます。

使い方は、CSSタブのコードをスタイルシートへ、HTMLタブのコードをページへ貼り付けるだけ。クラス名・キーフレーム名は bnto- プレフィックス付きなので既存のCSSと衝突しにくく、ヒーローエリアのメインコピー、セール告知、404ページの遊び心など幅広い場面で活用できます。

使いすぎ注意 — 演出は1画面に1つ

動く文字は強力な分、複数同時に動くと視線が分散してどれも目立たなくなります。常時アニメーションする文字は1画面に1つを目安に、本文ではなく「最も読ませたい一言」にだけ使いましょう。

prefers-reduced-motion への配慮

動きに敏感なユーザーのために、@media (prefers-reduced-motion: reduce) 内で animation: none; を指定しておくと親切です。エフェクトが無効でも文字が読める配色にしておくことも大切です。

フォントとの相性

ネオン・中抜き・レトロ影などは太字フォントほど映えます。逆に細身の明朝体では線がつぶれたり影が浮いたりしがちなので、font-weight: 700 以上のゴシック系・丸ゴシック系と組み合わせるのが失敗しないコツです。

よくある質問

コピーしたテキストエフェクトはそのまま使えますか？
はい。CSSタブのコード（@keyframes含む）をスタイルシートに、HTMLタブのコードをページに貼り付けるだけで動きます。クラス名・キーフレーム名はすべて bnto- で始まる独自プレフィックス付きなので、既存のスタイルと衝突しにくい設計です。
アニメーションが動かないときの確認ポイントは？
まず @keyframes まで含めてコピーできているかを確認してください。流れるグラデのように background-clip: text; を使うエフェクトは color: transparent; が無いと表示されません。また、OSの「視差効果を減らす（prefers-reduced-motion）」設定が有効な環境では、アニメーションが再生されない場合があります。
タイピング風の文字を変えるには？
表示したい文字数に合わせて width: 9ch と steps(9) の数字を、文字数と同じ値に変更してください。1文字の幅が揃う等幅フォント（monospace）で使うときれいに見えます。
商用サイトで利用できますか？
はい、すべてのパーツは商用・個人を問わず無料で利用できます。登録やクレジット表記も不要です。
このページのパーツはAIコーディングツールでも使えますか？
はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「流れるグラデ」）を伝えるだけで適用を指示できます。AIがWebを読めない場合は、「コピー」ボタンで取得したHTMLとCSSをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に表示確認することをおすすめします。

関連カテゴリ

文字まわりの装飾と組み合わせて使いやすいパーツはこちら。

グラデーション 見出し装飾 ホバーアニメーション ローディング