全部コピペで簡単に実装できる！ CSSで実装された、トレンドのテキストエフェクトをまとめたライブラリ -CSS Text Effects

Post on:2026年8月18日

sponsorsr

ピュアCSSで実装された66種類のテキストエフェクトをまとめたライブラリを紹介します。JavaScriptや外部ライブラリへの依存はなし、HTMLとCSSだけで実装されており、コピペで簡単に利用できます。

幻想的なオーロラのアニメーション、ノイズの効果がかっこいいグリッチ、一文字ずつ表示されるタイプライター、美しいネオンライトのエフェクト、水が満ちるようなリキッドなど、あまり見かけないようなユニークなエフェクトも含まれています。

CSSで実装された、トレンドのテキストエフェクトをまとめたライブラリ -CSS Text Effects

CSS Text Effectsは、デザイナーやデベロッパー向けのツールを数多くリリースされているcolorionの新ツールで、ピュアCSSで実装されたテキストエフェクトが66種類あります。各エフェクトはCSSをコピペしてそのまま使用したり、プロンプトを使用してコーディングAIに再現させることも可能です。

MITライセンスで、商用プロジェクトでも無料で利用できます。

CSS Text Effects

さっそくいくつか試してみました。
まずは、グラデーションが美しい「AURORA」のエフェクト。

AURORA

HTMLは、シンプルです。

<div class="fx-aurora">AURORA</div>

1	<div class="fx-aurora">AURORA</div>

CSSはすこし長いですが、コピペで使えます。
全エフェクトは--inkカラートークンが使用されており、OSの「視差効果を減らす（prefers-reduced-motion)設定にも対応しています。

/* カラートークン — 全エフェクト共通:
--ink    メインのテキスト色（デフォルトは currentColor）
--ink-2  プライマリカラー   --ink-3  セカンダリカラー */
:root { --ink: currentColor; --ink-2: #FF4FD8; --ink-3: #4FF8FF; }

/* 01 Borealis — aurora gradient drifting through the letters */
.fx-aurora {
  font: 600 30px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .06em;
  background: linear-gradient(115deg, var(--ink-2), var(--ink-3), var(--ink-2), var(--ink-3)) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fx-aurora 7s linear infinite;
}
@keyframes fx-aurora {
  0%   { background-position: 0% 50%;   filter: hue-rotate(0deg); }
  100% { background-position: 300% 50%; filter: hue-rotate(360deg); }
}

/* カラートークン — 全エフェクト共通:

--ink メインのテキスト色（デフォルトは currentColor）

--ink-2 プライマリカラー --ink-3 セカンダリカラー */

:root { --ink: currentColor; --ink-2: #FF4FD8; --ink-3: #4FF8FF; }

/* 01 Borealis — aurora gradient drifting through the letters */

.fx-aurora {

font: 600 30px/1.1 "JetBrains Mono", monospace;

letter-spacing: .06em;

background: linear-gradient(115deg, var(--ink-2), var(--ink-3), var(--ink-2), var(--ink-3)) 0 0 / 300% 100%;

-webkit-background-clip: text;

background-clip: text;

color: transparent;

animation: fx-aurora 7s linear infinite;

}

@keyframes fx-aurora {

0% { background-position: 0% 50%; filter: hue-rotate(0deg); }

100% { background-position: 300% 50%; filter: hue-rotate(360deg); }

}

最近はすっかり見かけなくなりましたが、鉄道や空港にあった反転フラップ式案内表示機のパタパタを再現したエフェクト。

HTMLは、一文字ずつタグで囲む必要があります。

<div class="fx-flap" role="img" aria-label="DEPART"><b aria-hidden="true" style="--i:0">D</b><b aria-hidden="true" style="--i:1">E</b><b aria-hidden="true" style="--i:2">P</b><b aria-hidden="true" style="--i:3">A</b><b aria-hidden="true" style="--i:4">R</b><b aria-hidden="true" style="--i:5">T</b></div>

<div class="fx-flap" role="img" aria-label="DEPART">DEPART</div>

CSSは、下記の通り。

/* 19 Split-Flap — airport departure board; letters flip on their plates */
.fx-flap {
  font: 600 24px/1 "JetBrains Mono", monospace;
  letter-spacing: 0;
  display: inline-flex;
  gap: 3px;
  perspective: 400px;
  color: var(--ink);
}
.fx-flap b {
  font-weight: inherit;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.9em;
  background: linear-gradient(
      color-mix(in srgb, var(--ink) 16%, transparent) 0 49%,
      color-mix(in srgb, var(--ink) 8%, transparent) 51% 100%);
  border-radius: 4px;
  transform-origin: center;
  animation: fx-flap 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * .12s);
}
@keyframes fx-flap {
  0%, 55%, 100% { transform: rotateX(0); }
  62% { transform: rotateX(-88deg); }
  69% { transform: rotateX(0); }
  74% { transform: rotateX(-25deg); }
  79% { transform: rotateX(0); }
}

/* 19 Split-Flap — airport departure board; letters flip on their plates */

.fx-flap {

font: 600 24px/1 "JetBrains Mono", monospace;

letter-spacing: 0;

display: inline-flex;

gap: 3px;

perspective: 400px;

color: var(--ink);

}

.fx-flap b {

font-weight: inherit;

display: grid;

place-items: center;

width: 1.5em;

height: 1.9em;

background: linear-gradient(

color-mix(in srgb, var(--ink) 16%, transparent) 0 49%,

color-mix(in srgb, var(--ink) 8%, transparent) 51% 100%);

border-radius: 4px;

transform-origin: center;

animation: fx-flap 3.2s ease-in-out infinite;

animation-delay: calc(var(--i) * .12s);

}

@keyframes fx-flap {

0%, 55%, 100% { transform: rotateX(0); }

62% { transform: rotateX(-88deg); }

69% { transform: rotateX(0); }

74% { transform: rotateX(-25deg); }

79% { transform: rotateX(0); }

}

文字が煙りのように消えるエフェクト。

HTMLはこれも一文字ずつタグで囲みます。

<div class="fx-smoke" role="img" aria-label="SMOKE"><b aria-hidden="true" style="--i:0">S</b><b aria-hidden="true" style="--i:1">M</b><b aria-hidden="true" style="--i:2">O</b><b aria-hidden="true" style="--i:3">K</b><b aria-hidden="true" style="--i:4">E</b></div>

1	<div class="fx-smoke" role="img" aria-label="SMOKE"><b aria-hidden="true" style="--i:0">S</b><b aria-hidden="true" style="--i:1">M</b><b aria-hidden="true" style="--i:2">O</b><b aria-hidden="true" style="--i:3">K</b><b aria-hidden="true" style="--i:4">E</b></div>

CSSは、下記の通り。

/* 61 Smoke-Signal — letters curl upward and dissipate like smoke, then re-form */
.fx-smoke {
  font: 600 32px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .14em;
  color: var(--ink);
}
.fx-smoke b {
  font-weight: inherit;
  display: inline-block;
  animation: fx-smoke 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * .16s);
}
@keyframes fx-smoke {
  0%, 42%   { transform: none; opacity: 1; filter: blur(0); color: var(--ink); }
  62%       { color: var(--ink-3); }
  78%       { transform: translate(6px, -22px) rotate(14deg) scale(1.45); opacity: 0; filter: blur(7px); }
  79%       { transform: translateY(10px) scale(.8); opacity: 0; filter: blur(4px); }
  92%, 100% { transform: none; opacity: 1; filter: blur(0); }
}

/* 61 Smoke-Signal — letters curl upward and dissipate like smoke, then re-form */

.fx-smoke {

font: 600 32px/1.1 "JetBrains Mono", monospace;

letter-spacing: .14em;

color: var(--ink);

}

.fx-smoke b {

font-weight: inherit;

display: inline-block;

animation: fx-smoke 3.4s ease-in-out infinite;

animation-delay: calc(var(--i) * .16s);

}

@keyframes fx-smoke {

0%, 42% { transform: none; opacity: 1; filter: blur(0); color: var(--ink); }

62% { color: var(--ink-3); }

78% { transform: translate(6px, -22px) rotate(14deg) scale(1.45); opacity: 0; filter: blur(7px); }

79% { transform: translateY(10px) scale(.8); opacity: 0; filter: blur(4px); }

92%, 100% { transform: none; opacity: 1; filter: blur(0); }

}

続いて、テキストがジィジィと小刻みに動くエフェクト。

JITTER

このHTMLは、シンプルです。

<div class="fx-jitter">JITTER</div>

1	<div class="fx-jitter">JITTER</div>

CSSは、下記の通り。

/* 17 Jitterbug — nervous analogue jitter: skews, jumps and dropped frames */
.fx-jitter {
  font: 600 30px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .06em;
  color: var(--ink);
  animation: fx-jitter 1.9s steps(1) infinite;
}
@keyframes fx-jitter {
  0%, 7%, 15%, 55%, 100% { transform: none; opacity: 1; }
  8%  { transform: skewX(-14deg) translateX(-4px); }
  10% { transform: skewX(10deg) translateX(3px); }
  12% { transform: translateY(-3px); opacity: .6; }
  46% { transform: skewX(8deg); }
  48% { transform: skewX(-6deg) translateY(2px); opacity: .75; }
  50% { transform: translateX(2px); }
}