背景コード生成用
ゆっくり動くグラデーション背景
色がゆっくり流れ続ける、動きのあるグラデーション。
用途・説明
グラデーションの色がゆっくりと流れ続ける背景を作成します。ファーストビューや申し込みセクションに、さりげない動きを加えたいときに向いています。動きを控えたい人への配慮と、負荷を抑える指定を含みます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいフロントエンドエンジニアです。 以下の条件で「ゆっくり動くグラデーション背景」を持つセクションを実装してください。 ## 仕様 - グラデーション：#1463F0 から #8B5CF6 へ、120deg の方向。間に2色の中間の明るい色を1つ入れる - 動き：15秒かけて行って戻る、ゆっくりした往復 - セクションの最小の高さ：520px ## 実装方法 - background-size を 200% 200% にし、@keyframes で background-position を動かす - JavaScript は使わない - animation は ease-in-out、infinite、alternate - サンプルとして、見出し・補足文・ボタンを含むセクションを1つ用意する ## 読みやすさ - 文字は白。グラデーションのどの位置でも、白い文字のコントラスト比 4.5:1 以上を確保する。満たさない場合は色を暗くする案を出す - 動きは遅く保ち、文字を読むじゃまにならないようにする ## レスポンシブ・その他 - prefers-reduced-motion: reduce のときはアニメーションを止め、静止したグラデーションを表示する - 画面外にあるときに無駄な描画をしないための工夫（content-visibility など）を併記する - 印刷時（@media print）は背景を非表示にする ## 出力形式 - [使用技術]のコードを1つ出力 - 2色・速さをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。