Dot Pattern Background

CODE

HTML

<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>

CSS

.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; }
/* REDUCED-MOTION:v1 */
@media (prefers-reduced-motion: reduce) {
  .dpb-glow {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

AI PROMPT

Claude Code Cursor v0

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

📖 なかしまぁ先生のCSSアニメーション入門 📖 UIデザインの教科書新版マルチデバイス時代のインターフェース設計 📖 Fundamentals of Web Animation with GSAP

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

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

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

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

CREATOR TOOLS · スクール（PR）

🎬 Adobe Creative Cloud — After Effects / Photoshop 業界標準ツール → 💻 SkillHacks — プログラミング・動画編集オンラインスクール → 🚀 デイトラ — Web制作スクール・実案件レベルまで習得 →

※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。

Dot Pattern Background（ドットパターン背景）とは

radial-gradient の background-size 繰り返しで敷き詰めるドットグリッド背景。Magic UI や shadcn/ui 系のサイトで定番になったヒーロー背景で、画像なし・追加リクエストなしで実装できるのが強みです。mask-image でフェードを掛ける・グローを1枚泳がせる、の2手間で「それっぽさ」が大きく変わります。

当サイトの Animated Grid Background は「線のグリッド」を動かす背景、本ページは「点のグリッド」に光を泳がせる背景という別テーマです。ドットは線よりノイズが少なく本文の可読性を保ちやすいため、テキスト量の多いヒーローや機能一覧の背景に向いています。

よくある質問

ドット背景を画像でなくCSSで作る利点は何ですか？

radial-gradientの繰り返しなので容量が実質ゼロ（1KB以下）で、Retinaでも滲まず、ドットの間隔・色・サイズをCSS変数1つで即調整できます。ダークモード対応も色の差し替えだけで済みます。

ドットの間隔や大きさはどこで変えますか？

間隔は background-size（本ページは22px 22px）、ドットの大きさは radial-gradient の第1ストップ（1.2px）で調整します。第2ストップ（1.7px）との差を0.5px程度残すとエッジが滑らかになります。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

RELATED EFFECTS

Dot Pattern Background（ドットパターン背景）とは

よくある質問