背景コード生成用
オーロラ風のグラデーション背景
暗い背景に、色の光がにじむように重なる。
用途・説明
暗い背景の上に、2〜3色の光がオーロラのようににじんで重なる背景を作成します。プロダクトのファーストビュー、イベントやリリース告知など、印象を強く残したいセクションに向いています。radial-gradient の重ね合わせだけで描くので軽量です。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいフロントエンドエンジニアです。 以下の条件で「オーロラ風のグラデーション背景」を持つセクションを実装してください。 ## 仕様 - ベース色：#0B1220 - 光の色：#1463F0、#8B5CF6 - セクションの最小の高さ：560px ## 実装方法 - radial-gradient を3つ重ねる。左上に #1463F0、右上に #8B5CF6、下中央に #1463F0 を明るくした色 - それぞれ中心の不透明度は 0.5〜0.75、外側 70% あたりで完全に透明にする - 光どうしが重なる部分がにごらないよう、位置を少しずつずらす - 画像は使わない。filter: blur に頼らず、グラデーションだけでぼかす ## 読みやすさ - 見出しは白（#FFFFFF）、補足文は rgba(255, 255, 255, 0.82) - 光の最も明るい部分の上でも、白い文字のコントラスト比 4.5:1 以上を確保する。足りない場合は不透明度を下げる - サンプルとして、見出し・補足文・ボタンを含むセクションを1つ用意する ## レスポンシブ・その他 - スマホでは光の大きさを画面幅に合わせ、色が1か所に集まりすぎないようにする - フォーカスリングは白で表示する - 印刷時（@media print）は背景を非表示にする ## 出力形式 - [使用技術]のコードを1つ出力 - ベース色・光の色・不透明度をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。