テキストFXのCSSコピペパーツ 23選

CRG-07-001

SHIMMER TEXT

シマー(流れる光)文字Shimmer

.cg-tx-shimmer {
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  background: linear-gradient(90deg, #1B1A17 40%, #E8590C 50%, #1B1A17 60%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cg-tx-shimmer-run 2.6s linear infinite;
}
@keyframes cg-tx-shimmer-run { to { background-position: -300% center; } }

<p class="cg-tx-shimmer">SHIMMER TEXT</p>

GROSS WT. 426 B ORIGINAL

CRG-07-002

Hello, CSS CARGO.

タイプライターTypewriter

.cg-tx-type {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid #E8590C;
  width: 18ch;
  animation:
    cg-tx-type-write 3s steps(18) infinite,
    cg-tx-type-caret .7s step-end infinite;
}
@keyframes cg-tx-type-write {
  0% { width: 0; }
  60%, 100% { width: 18ch; }
}
@keyframes cg-tx-type-caret { 50% { border-color: transparent; } }

<p class="cg-tx-type">Hello, CSS CARGO.</p>

GROSS WT. 492 B ORIGINAL

CRG-07-003

OUTLINE

中抜きアウトライン文字Outline

.cg-tx-outline {
  margin: 0;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 2px #1B1A17;
}

<p class="cg-tx-outline">OUTLINE</p>

GROSS WT. 189 B ORIGINAL

CRG-07-004

OPEN

ネオンサイン文字Neon Sign

.cg-tx-neon-bg {
  padding: 20px 34px;
  border-radius: 10px;
  background: #14130F;
}
.cg-tx-neon {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #FFD9C4;
  text-shadow:
    0 0 6px rgba(232, 89, 12, .9),
    0 0 18px rgba(232, 89, 12, .7),
    0 0 40px rgba(232, 89, 12, .5);
  animation: cg-tx-neon-flicker 3.4s linear infinite;
}
@keyframes cg-tx-neon-flicker {
  0%, 6%, 10%, 100% { opacity: 1; }
  8% { opacity: .55; }
}

<div class="cg-tx-neon-bg"><p class="cg-tx-neon">OPEN</p></div>

GROSS WT. 529 B ORIGINAL

CRG-07-005

WAVE!

波打つ文字Wave Letters

.cg-tx-wave { margin: 0; display: flex; font-size: 30px; font-weight: 900; }
.cg-tx-wave span {
  animation: cg-tx-wave-up 1.4s ease-in-out infinite;
}
.cg-tx-wave span:nth-child(2) { animation-delay: .1s; }
.cg-tx-wave span:nth-child(3) { animation-delay: .2s; }
.cg-tx-wave span:nth-child(4) { animation-delay: .3s; }
.cg-tx-wave span:nth-child(5) { animation-delay: .4s; color: #E8590C; }
@keyframes cg-tx-wave-up {
  0%, 50%, 100% { transform: translateY(0); }
  25% { transform: translateY(-10px); }
}

<p class="cg-tx-wave" aria-label="WAVE!"><span>W</span><span>A</span><span>V</span><span>E</span><span>!</span></p>

GROSS WT. 621 B ORIGINAL

CRG-07-006

ここが重要ポイント

スワイプマーカー文字Swipe Highlight

.cg-tx-swipe {
  margin: 0;
  display: inline;
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(transparent 55%, #FFE28A 55%) no-repeat left / 0% 100%;
  animation: cg-tx-swipe-in 2.6s ease forwards infinite;
}
@keyframes cg-tx-swipe-in {
  0%, 20% { background-size: 0% 100%; }
  60%, 100% { background-size: 100% 100%; }
}

<p class="cg-tx-swipe">ここが重要ポイント</p>

GROSS WT. 398 B ORIGINAL

CRG-07-007

GLITCH

グリッチ文字Glitch

.cg-tx-glitch {
  position: relative;
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #1B1A17;
}
.cg-tx-glitch::before,
.cg-tx-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 55% 0);
}
.cg-tx-glitch::before {
  color: #E8590C;
  animation: cg-tx-glitch-a 2.4s steps(2, jump-none) infinite;
}
.cg-tx-glitch::after {
  color: #3A5A78;
  clip-path: inset(55% 0 0 0);
  animation: cg-tx-glitch-b 2.4s steps(2, jump-none) infinite;
}
@keyframes cg-tx-glitch-a {
  0%, 88%, 100% { transform: translate(0); }
  92% { transform: translate(-3px, -2px); }
  96% { transform: translate(2px, 1px); }
}
@keyframes cg-tx-glitch-b {
  0%, 88%, 100% { transform: translate(0); }
  92% { transform: translate(3px, 2px); }
  96% { transform: translate(-2px, -1px); }
}

<p class="cg-tx-glitch" data-text="GLITCH">GLITCH</p>

GROSS WT. 894 B ORIGINAL

CRG-07-008

校正済みのテキスト

波線アンダーラインWavy Underline

.cg-tx-wavy {
  margin: 0;
  display: inline;
  font-size: 21px;
  font-weight: 700;
  text-decoration: underline wavy #E8590C 2.5px;
  text-underline-offset: 7px;
}

<p class="cg-tx-wavy">校正済みのテキスト</p>

GROSS WT. 218 B ORIGINAL

CRG-07-009

POP!

3D押し出し文字3D Extrude

.cg-tx-3d {
  margin: 0;
  font-size: 44px;
  font-weight: 900;
  color: #F2B707;
  text-shadow:
    1px 1px 0 #1B1A17, 2px 2px 0 #1B1A17, 3px 3px 0 #1B1A17,
    4px 4px 0 #1B1A17, 5px 5px 0 #1B1A17, 6px 6px 0 #1B1A17;
}

<p class="cg-tx-3d">POP!</p>

GROSS WT. 248 B ORIGINAL

CRG-07-010

Focus In

にじみフェードインBlur In

.cg-tx-blur {
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  animation: cg-tx-blur-in 2.8s ease-in-out infinite;
}
@keyframes cg-tx-blur-in {
  0% { filter: blur(10px); opacity: 0; letter-spacing: .3em; }
  45%, 80% { filter: blur(0); opacity: 1; letter-spacing: .02em; }
  100% { filter: blur(10px); opacity: 0; }
}

<p class="cg-tx-blur">Focus In</p>

GROSS WT. 357 B ORIGINAL

CRG-07-011

COLOR CYCLE

色相が巡る文字Hue Cycle

.cg-tx-hue {
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  color: #E8590C;
  animation: cg-tx-hue-spin 5s linear infinite;
}
@keyframes cg-tx-hue-spin {
  to { filter: hue-rotate(360deg); }
}

<p class="cg-tx-hue">COLOR CYCLE</p>

GROSS WT. 235 B ORIGINAL

CRG-07-012

FLIP

めくれる文字Flip In Letters

.cg-tx-fliplt {
  margin: 0;
  display: flex;
  gap: 2px;
  font-size: 32px;
  font-weight: 900;
  perspective: 300px;
}
.cg-tx-fliplt span {
  display: inline-block;
  animation: cg-tx-fliplt-turn 2.4s ease-in-out infinite;
}
.cg-tx-fliplt span:nth-child(2) { animation-delay: .12s; }
.cg-tx-fliplt span:nth-child(3) { animation-delay: .24s; }
.cg-tx-fliplt span:nth-child(4) { animation-delay: .36s; color: #E8590C; }
@keyframes cg-tx-fliplt-turn {
  0%, 55%, 100% { transform: rotateX(0); }
  25% { transform: rotateX(360deg); }
}

<p class="cg-tx-fliplt" aria-label="FLIP"><span>F</span><span>L</span><span>I</span><span>P</span></p>

GROSS WT. 635 B ORIGINAL

CRG-07-013

見出しの行の長さをブラウザが自動で揃えてくれる

text-wrap:balance 見出しBalanced Wrapping

/* balance指定(上)は各行の長さが均等になり、最終行の孤立を防ぐ */
.cg-tx-balance-set {
  display: grid;
  gap: 14px;
  width: 240px;
}
.cg-tx-balance-set p {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.6;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1.5px solid #E3DFD4;
}
.cg-tx-balance { text-wrap: balance; border-left: 4px solid #E8590C; }
.cg-tx-nobalance { opacity: .55; }

<div class="cg-tx-balance-set"><p class="cg-tx-balance">見出しの行の長さをブラウザが自動で揃えてくれる</p><p class="cg-tx-nobalance">見出しの行の長さをブラウザが自動で揃えてくれる</p></div>

GROSS WT. 692 B ORIGINAL

CRG-07-014

HOLOGRAPHIC

ホログラフィック文字Holographic

.cg-tx-holo {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .04em;
  background: linear-gradient(
    115deg,
    #FF71CE, #7FD4FF, #98F6C3, #FFF6A9, #FF9DE6, #7FD4FF
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cg-tx-holo-shift 4s linear infinite;
  filter: drop-shadow(0 2px 6px rgba(127, 212, 255, .45));
}
@keyframes cg-tx-holo-shift {
  to { background-position: 300% center; }
}

<p class="cg-tx-holo">HOLOGRAPHIC</p>

GROSS WT. 528 B ORIGINAL

CRG-07-015

長い本文の末尾をグラデーションマスクでふわっと消すと、「続きがある」ことを自然に伝えられます。line-clampより柔らかい印象になります。

末尾フェード省略文Fade-Out Clamp

.cg-tx-fadeout {
  margin: 0;
  width: 250px;
  max-height: 5.2em;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.9;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 98%);
}

<p class="cg-tx-fadeout">長い本文の末尾をグラデーションマスクでふわっと消すと、「続きがある」ことを自然に伝えられます。line-clampより柔らかい印象になります。</p>

GROSS WT. 491 B ORIGINAL

CRG-07-016

BOING

弾んで登場する文字Bounce In

.cg-tx-bounce {
  margin: 0;
  display: flex;
  gap: 2px;
  font-size: 30px;
  font-weight: 900;
}
.cg-tx-bounce span {
  animation: cg-tx-bounce-drop 2.6s cubic-bezier(.3, 1.6, .5, 1) infinite;
}
.cg-tx-bounce span:nth-child(2) { animation-delay: .08s; }
.cg-tx-bounce span:nth-child(3) { animation-delay: .16s; }
.cg-tx-bounce span:nth-child(4) { animation-delay: .24s; }
.cg-tx-bounce span:nth-child(5) { animation-delay: .32s; color: #E8590C; }
@keyframes cg-tx-bounce-drop {
  0% { transform: translateY(-26px) scale(.6); opacity: 0; }
  18%, 78% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 0; }
}

<p class="cg-tx-bounce" aria-label="BOING"><span>B</span><span>O</span><span>I</span><span>N</span><span>G</span></p>

GROSS WT. 779 B ORIGINAL

CRG-07-017

Design that ships.

下からせり上がる文字Mask Rise

.cg-tx-rise {
  margin: 0;
  overflow: hidden;
  font-size: 22px;
  font-weight: 900;
}
.cg-tx-rise span {
  display: inline-block;
  animation: cg-tx-rise-up 3s cubic-bezier(.2, .8, .2, 1) infinite;
}
@keyframes cg-tx-rise-up {
  0% { transform: translateY(110%); }
  25%, 80% { transform: translateY(0); }
  100% { transform: translateY(-110%); }
}

<p class="cg-tx-rise"><span>Design that ships.</span></p>

GROSS WT. 407 B ORIGINAL

CRG-07-018

つくるのはWebサイトブランド体験

単語ローテーションWord Rotator

.cg-tx-rotate {
  margin: 0;
  display: flex;
  gap: 8px;
  font-size: 20px;
  font-weight: 900;
}
.cg-tx-rotate .win {
  position: relative;
  display: inline-block;
  height: 1.5em;
  overflow: hidden;
  min-width: 5.5em;
}
.cg-tx-rotate b {
  position: absolute;
  left: 0;
  color: #E8590C;
  opacity: 0;
  transform: translateY(100%);
  animation: cg-tx-rotate-cycle 6s ease-in-out infinite;
}
.cg-tx-rotate b:nth-child(2) { animation-delay: 2s; }
.cg-tx-rotate b:nth-child(3) { animation-delay: 4s; }
@keyframes cg-tx-rotate-cycle {
  0%, 30.5% { transform: translateY(100%); opacity: 0; }
  4%, 29% { transform: translateY(0); opacity: 1; }
  33%, 100% { transform: translateY(-100%); opacity: 0; }
}

<p class="cg-tx-rotate">つくるのは<span class="win"><b>Webサイト</b><b>ブランド</b><b>体験</b></span></p>

GROSS WT. 826 B ORIGINAL

CRG-07-019

PARTY

踊る文字Dancing Letters

.cg-tx-dance {
  margin: 0;
  display: flex;
  gap: 3px;
  font-size: 30px;
  font-weight: 900;
}
.cg-tx-dance span {
  animation: cg-tx-dance-move 1s ease-in-out infinite;
}
.cg-tx-dance span:nth-child(odd) { animation-direction: reverse; color: #E8590C; }
.cg-tx-dance span:nth-child(2) { animation-delay: .1s; }
.cg-tx-dance span:nth-child(4) { animation-delay: .1s; }
@keyframes cg-tx-dance-move {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-4px); }
}

<p class="cg-tx-dance" aria-label="PARTY"><span>P</span><span>A</span><span>R</span><span>T</span><span>Y</span></p>

GROSS WT. 626 B ORIGINAL

CRG-07-020

RAINBOW

色の波が通る文字Color Wave

.cg-tx-cwave {
  margin: 0;
  display: flex;
  font-size: 27px;
  font-weight: 900;
  color: #1B1A17;
}
.cg-tx-cwave span {
  animation: cg-tx-cwave-pass 2.1s ease-in-out infinite;
}
.cg-tx-cwave span:nth-child(2) { animation-delay: .1s; }
.cg-tx-cwave span:nth-child(3) { animation-delay: .2s; }
.cg-tx-cwave span:nth-child(4) { animation-delay: .3s; }
.cg-tx-cwave span:nth-child(5) { animation-delay: .4s; }
.cg-tx-cwave span:nth-child(6) { animation-delay: .5s; }
.cg-tx-cwave span:nth-child(7) { animation-delay: .6s; }
@keyframes cg-tx-cwave-pass {
  0%, 100% { color: #1B1A17; transform: translateY(0); }
  30% { color: #E8590C; transform: translateY(-5px); }
  60% { color: #F2B707; }
}

<p class="cg-tx-cwave" aria-label="RAINBOW"><span>R</span><span>A</span><span>I</span><span>N</span><span>B</span><span>O</span><span>W</span></p>

GROSS WT. 840 B ORIGINAL

CRG-07-021

カーソルを乗せてください

ホバーで伸びる下線Hover Underline Draw

.cg-tx-underline-draw {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  font-size: 20px;
  font-weight: 900;
  color: #1B1A17;
  text-decoration: none;
}
.cg-tx-underline-draw::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #E8590C;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.cg-tx-underline-draw:hover::after {
  transform: scaleX(1);
}

<a href="#" class="cg-tx-underline-draw">カーソルを乗せてください</a>

GROSS WT. 576 B ORIGINAL

CRG-07-022

SALE

3Dで折り返すフラグ見出し3D Flag Fold

.cg-tx-flagfold {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  perspective: 300px;
  font-size: 22px;
  font-weight: 900;
  color: #1B1A17;
}
.cg-tx-flagfold .flag {
  display: inline-block;
  width: 34px;
  height: 22px;
  background: #E8590C;
  clip-path: polygon(0 0, 100% 0, 82% 50%, 100% 100%, 0 100%);
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.3, .9, .3, 1), background .5s ease;
}
.cg-tx-flagfold:hover .flag {
  transform: rotateY(180deg);
  background: #F2B707;
}

<h3 class="cg-tx-flagfold">SALE<i class="flag"></i></h3>

GROSS WT. 645 B ORIGINAL

CRG-07-023

HOVER TO IGNITE

ホバーで点灯するネオン文字Hover Ignite Neon

.cg-tx-ignite {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #8a8880;
  cursor: default;
  transition: color .3s ease, text-shadow .3s ease;
}
.cg-tx-ignite:hover {
  color: #FFD9C4;
  text-shadow:
    0 0 6px rgba(232, 89, 12, .9),
    0 0 18px rgba(232, 89, 12, .7),
    0 0 40px rgba(232, 89, 12, .5);
  animation: cg-tx-ignite-flicker 1.6s linear infinite;
}
@keyframes cg-tx-ignite-flicker {
  0%, 92%, 100% { opacity: 1; }
  94% { opacity: .5; }
  96% { opacity: 1; }
  98% { opacity: .7; }
}

<p class="cg-tx-ignite">HOVER TO IGNITE</p>

GROSS WT. 582 B ORIGINAL

テキストFX23点 在庫あり