Web Design Lab ← ギャラリーへ
背景 & グラデーション 中級

レトロ・パースグリッド

夕焼け空に沈む太陽とパースの効いたグリッドを手前へ流す、80年代風シンセウェイブ背景。CSSのみで完結します。

#css#animation#retro

ライブデモ

使用例（お題: アイドルグループ Sakura）

この技法を「アイドルグループ Sakura」というテーマのダミーサイトで実際に使った例です。

HTML 
<!-- Sakura：シンセウェイブ風パースグリッドのライブツアー告知 -->
<section class="sr-stage">
  <!-- ★主役：夕陽＋手前へ流れるパースグリッド -->
  <div class="sr-sky" aria-hidden="true"></div>
  <div class="sr-sun" aria-hidden="true"></div>
  <div class="sr-floor" aria-hidden="true"><div class="sr-grid"></div></div>

  <div class="sr-inner">
    <span class="sr-eyebrow">★ SAKURA NEON TOUR 2026 ★</span>
    <h1 class="sr-title">桜 NIGHT<br>WAVE</h1>
    <p class="sr-tour">TOKYO ・ OSAKA ・ NAGOYA ・ FUKUOKA</p>
    <button class="sr-btn" type="button" id="srBtn">ツアー日程を見る</button>
  </div>
</section>
CSS 
/* Sakura：桜ネオンのシンセウェイブ。主役は手前へ流れるパースグリッド */
* { box-sizing: border-box; margin: 0; padding: 0; }

.sr-stage {
  position: relative;
  min-height: 400px;
  height: 400px;
  overflow: hidden;
  font-family: "Hiragino Kaku Gothic ProN", "Segoe UI", system-ui, sans-serif;
  color: #fff;
}

/* 夕焼け空 */
.sr-sky {
  position: absolute;
  inset: 0 0 45% 0;
  z-index: 0;
  background: linear-gradient(180deg, #2a0b3f 0%, #6a1f6e 45%, #ff6fa8 80%, #ffb37c 100%);
}

/* 沈む太陽（横ストライプで切る） */
.sr-sun {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 150px;
  height: 150px;
  z-index: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe7a0 0%, #ff8fc4 55%, #ff5ea0 100%);
  box-shadow: 0 0 60px rgba(255,143,196,0.7);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 12px, transparent 12px 17px);
          mask-image: repeating-linear-gradient(180deg, #000 0 12px, transparent 12px 17px);
}

/* 地面（パース床） */
.sr-floor {
  position: absolute;
  inset: 55% 0 0 0;
  z-index: 2;
  overflow: hidden;
  background: linear-gradient(180deg, #1a0626 0%, #320a3a 100%);
  perspective: 220px;
  perspective-origin: 50% 0%;
}

/* ★主役：手前へ流れるパースグリッド */
.sr-grid {
  position: absolute;
  left: -50%;
  top: 0;
  width: 200%;
  height: 240%;
  background-image:
    linear-gradient(to right, rgba(255,143,196,0.7) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,143,196,0.7) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: rotateX(72deg);
  transform-origin: 50% 0%;
  animation: srScroll 1.6s linear infinite;
}
@keyframes srScroll {
  from { background-position: 0 0; }
  to   { background-position: 0 44px; } /* 1マス分流して継ぎ目なくループ */
}

/* 地平線の発光ライン */
.sr-floor::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: #ff8fc4;
  box-shadow: 0 0 16px 3px rgba(255,143,196,0.9);
  z-index: 1;
}

.sr-inner {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}
.sr-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #ffe7a0;
  text-shadow: 0 0 12px rgba(255,180,120,0.8);
}
.sr-title {
  margin-top: 10px;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, #fff 0%, #ffd1e0 60%, #ff8fc4 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: 0 0 26px rgba(255,143,196,0.5);
}
.sr-tour {
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.9);
}
.sr-btn {
  margin-top: 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  color: #2a0b3f;
  background: linear-gradient(135deg, #ffd1e0, #ff9ec6);
  border: none;
  padding: 11px 24px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(255,143,196,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sr-btn:hover { transform: translateY(-2px); box-shadow: 0 0 28px rgba(255,143,196,0.85); }
.sr-btn:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .sr-grid { animation: none; }
  .sr-btn { transition: none; }
}
JavaScript 
// ツアー日程ボタンのトグル表示（CSSグリッドが主役なのでJSは最小限）
(() => {
  const btn = document.getElementById("srBtn");
  if (!btn) return; // null安全

  let open = false;
  const dates = "4/12 東京 ・ 4/19 大阪 ・ 4/26 名古屋 ・ 5/3 福岡";

  btn.addEventListener("click", () => {
    open = !open;
    btn.textContent = open ? dates : "ツアー日程を見る";
  });
})();

コード

HTML 
<!-- レトロ・パースグリッド: 遠近感のあるグリッドを手前に流す synthwave 背景 -->
<div class="rg-stage">
  <div class="rg-sun"></div>
  <div class="rg-floor">
    <div class="rg-grid"></div>
  </div>
  <div class="rg-content">
    <h1 class="rg-title">RETRO GRID</h1>
    <p class="rg-sub">パースの効いたグリッドを手前へ流す、80年代風シンセウェイブ背景。CSSのみで完結。</p>
  </div>
</div>
CSS 
/* 夕焼け空 + パース床グリッドで synthwave 風景を作る */
* { box-sizing: border-box; margin: 0; padding: 0; }

.rg-stage {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-family: "Segoe UI", "Hiragino Sans", system-ui, sans-serif;
  background: linear-gradient(180deg, #1a0033 0%, #41096b 45%, #ff2e88 100%);
}

/* 地平線に沈む太陽 */
.rg-sun {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd86b 0%, #ff6ec4 60%, #ff2e88 100%);
  box-shadow: 0 0 90px rgba(255, 110, 196, 0.6);
}
/* 太陽を横線で切る */
.rg-sun::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 10px,
    rgba(26, 0, 51, 0.85) 10px 16px
  );
  mask: linear-gradient(180deg, transparent 50%, #000 50%);
  -webkit-mask: linear-gradient(180deg, transparent 50%, #000 50%);
}

/* 床: 下半分にパースをかける */
.rg-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  perspective: 280px;
  overflow: hidden;
}

/* グリッドラインを手前へスクロール */
.rg-grid {
  position: absolute;
  inset: -50% 0 -50% 0;
  background-image:
    linear-gradient(rgba(0, 255, 240, 0.6) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0, 255, 240, 0.4) 2px, transparent 2px);
  background-size: 46px 46px;
  transform: rotateX(72deg);
  transform-origin: center top;
  animation: rg-scroll 1.4s linear infinite;
  /* 地平線側をフェードさせ、空との境目を自然になじませる */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 28%);
}

@keyframes rg-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 46px; }
}

.rg-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: #fff;
  padding: 0 24px;
  max-width: 520px;
  margin-top: -40px; /* 太陽より少し上へ */
}

.rg-title {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #fff;
  text-shadow:
    0 0 6px #ff2e88,
    0 0 18px #ff2e88,
    0 2px 0 #00fff0;
}

.rg-sub {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .rg-grid { animation: none; }
}

🤖 AIエージェント用プロンプト

このままコピーしてAIに貼り付け「追加する場所」だけ書き換えればOK
あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「レトロ・パースグリッド」の効果を追加してください。

# 追加してほしい効果
レトロ・パースグリッド（背景 & グラデーション）
夕焼け空に沈む太陽とパースの効いたグリッドを手前へ流す、80年代風シンセウェイブ背景。CSSのみで完結します。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- レトロ・パースグリッド: 遠近感のあるグリッドを手前に流す synthwave 背景 -->
<div class="rg-stage">
  <div class="rg-sun"></div>
  <div class="rg-floor">
    <div class="rg-grid"></div>
  </div>
  <div class="rg-content">
    <h1 class="rg-title">RETRO GRID</h1>
    <p class="rg-sub">パースの効いたグリッドを手前へ流す、80年代風シンセウェイブ背景。CSSのみで完結。</p>
  </div>
</div>

【CSS】
/* 夕焼け空 + パース床グリッドで synthwave 風景を作る */
* { box-sizing: border-box; margin: 0; padding: 0; }

.rg-stage {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-family: "Segoe UI", "Hiragino Sans", system-ui, sans-serif;
  background: linear-gradient(180deg, #1a0033 0%, #41096b 45%, #ff2e88 100%);
}

/* 地平線に沈む太陽 */
.rg-sun {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd86b 0%, #ff6ec4 60%, #ff2e88 100%);
  box-shadow: 0 0 90px rgba(255, 110, 196, 0.6);
}
/* 太陽を横線で切る */
.rg-sun::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 10px,
    rgba(26, 0, 51, 0.85) 10px 16px
  );
  mask: linear-gradient(180deg, transparent 50%, #000 50%);
  -webkit-mask: linear-gradient(180deg, transparent 50%, #000 50%);
}

/* 床: 下半分にパースをかける */
.rg-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  perspective: 280px;
  overflow: hidden;
}

/* グリッドラインを手前へスクロール */
.rg-grid {
  position: absolute;
  inset: -50% 0 -50% 0;
  background-image:
    linear-gradient(rgba(0, 255, 240, 0.6) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0, 255, 240, 0.4) 2px, transparent 2px);
  background-size: 46px 46px;
  transform: rotateX(72deg);
  transform-origin: center top;
  animation: rg-scroll 1.4s linear infinite;
  /* 地平線側をフェードさせ、空との境目を自然になじませる */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 28%);
}

@keyframes rg-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 46px; }
}

.rg-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: #fff;
  padding: 0 24px;
  max-width: 520px;
  margin-top: -40px; /* 太陽より少し上へ */
}

.rg-title {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #fff;
  text-shadow:
    0 0 6px #ff2e88,
    0 0 18px #ff2e88,
    0 2px 0 #00fff0;
}

.rg-sub {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .rg-grid { animation: none; }
}

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。
背景 & グラデーション
アニメーショングラデーション
background-position をアニメーションさせ、4色のグラデーションが無限にループする背景。ヒーローセクションやランディングページの土台に使えます。
背景 & グラデーション
メッシュグラデーション
複数の radial-gradient を重ねて有機的な色面を作り、JSで各色溜まりを漂わせるメッシュ背景。SaaSやポートフォリオのヒーローに最適です。
背景 & グラデーション
SVGノイズ質感
feTurbulence で生成した粒状ノイズをグラデーションに重ね、上質なマット質感を演出。ボタンでノイズの粗さを切り替えられます。
背景 & グラデーション
動く幾何学パターン
canvas で三角格子を描き、サイン波に沿って各点を明滅させる動的背景。テック系のLPやダッシュボードの背景に使えます。
背景 & グラデーション
オーロラ光背景
ぼかした光の帯をゆっくり揺らし、星空とともに夜空のオーロラを再現するCSS背景。ダークテーマのヒーローに映えます。
背景 & グラデーション
ドット/グリッド背景
CSSのドット格子にマウス追従のスポットライトを重ねた背景。マスクで照らした部分だけドットを濃く見せます。ダッシュボード向け。
背景 & グラデーション
回転グラデーションボーダー
@property で角度を回転させた conic-gradient のボーダーがカードの縁を発光させる演出。価格表やバッジカードに使えます。
背景 & グラデーション
blobモーフィング
JSで制御点の半径を補間し、SVGパスを滑らかに変形させる有機的な背景。遊び心のあるLPの主役背景になります。