グロー効果とは

text-shadow や box-shadow を同じ色で複数重ねて、文字やボタンが発光しているように見せる CSS の演出。

概要

同じ色の text-shadow や box-shadow を、ぼかし幅を変えながら複数重ねることで、文字やボタンの縁がにじんで発光しているように見せる演出です。ネオンサインのような見た目になることから「ネオン」とも呼ばれ、暗い背景の上に置くとより効果が際立ちます。

別名

表記ゆれ：グロー効果、ネオン、発光、光る文字

AI への伝え方

「文字をネオンっぽく光らせて」「ボタンをホバーしたら発光するようにして」で伝わります。発光は暗い背景でこそ映えるため、「暗い背景と組み合わせて」と伝えると意図した見た目になりやすいです。

似たパーツとの違い

「ドロップシャドウ」は要素の輪郭を分かりやすくするための落ち影で、グレー系の控えめな色を使うのが一般的です。グロー効果は同じ影の仕組みを使いつつ、鮮やかな色を複数重ねて「光って見える」ことを目的にしている点が異なります。

デモ

NEON GLOW

コード

HTML

<div class="glow-demo">
  <p class="glow-demo__text">NEON GLOW</p>
  <button class="glow-demo__button" type="button">発光ボタン</button>
</div>

CSS

.glow-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px 24px;
  background: #1a1a1a;
  border-radius: 12px;
  font-family: sans-serif;
}

.glow-demo__text {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  /* 同じ色のぼかしを重ねて発光しているように見せる */
  text-shadow: 0 0 4px #4dd0e1, 0 0 12px #4dd0e1, 0 0 28px #0017c1;
}

.glow-demo__button {
  padding: 12px 28px;
  border: 1px solid #4dd0e1;
  border-radius: 24px;
  background: transparent;
  color: #4dd0e1;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 0 6px #4dd0e1;
  transition: box-shadow 0.2s ease;
}

.glow-demo__button:hover {
  /* ホバーでぼかしと広がりを増やし、より強く発光させる */
  box-shadow: 0 0 10px #4dd0e1, 0 0 24px #4dd0e1;
}