Dot Pattern Background

DEMO

CODE

<div class="demo-stage dpb-stage">
  <div class="dpb-dots" aria-hidden="true"></div>
  <div class="dpb-glow" aria-hidden="true"></div>
  <p class="dpb-label">DOT PATTERN</p>
</div>

.dpb-stage { position:relative; display:flex; align-items:center; justify-content:center; min-height:280px; background:#0F0F12; overflow:hidden; }
.dpb-dots {
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.30) 1.2px, transparent 1.7px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 22% 78%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 22% 78%, transparent);
}
.dpb-glow {
  position:absolute; top:50%; left:-130px; width:260px; height:260px; margin-top:-130px;
  border-radius:50%; background:radial-gradient(circle, rgba(233,27,137,.30), transparent 65%);
  animation: dpb-drift 7s ease-in-out infinite alternate;
}
@keyframes dpb-drift { from { transform:translateX(0); } to { transform:translateX(min(70vw, 560px)); } }
.dpb-label { position:relative; font-family:'Oswald',sans-serif; font-size:1.3rem; letter-spacing:.3em; color:#fff; margin:0; }

AI PROMPT

画像を使わずCSSだけでドットグリッド背景を作って。背景レイヤーに background-image: radial-gradient(rgba(255,255,255,.3) 1.2px, transparent 1.7px); background-size: 22px 22px を指定すると1発でドットが敷き詰められる（1.2px→1.7pxの差がアンチエイリアスになり滲まない）。mask-image: linear-gradient(180deg, transparent, #000 22% 78%, transparent) で上下をフェードさせると「浮いている」質感になる。その上に radial-gradient の円形グロー div を1枚重ね、transform: translateX をゆっくり alternate 往復させるとスポットライトが泳ぐ。ドット色を薄く（opacity .3以下）保つのが本文の可読性を守るコツ。ヒーローセクション・機能紹介の背景に。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。