背景コード生成用
メッシュグラデーション背景
4つの色が溶け合う、鮮やかでなめらかな背景。
用途・説明
四隅に置いた色がなめらかに混ざり合う、メッシュグラデーション風の背景を作成します。ファーストビュー、キャンペーンページ、アプリ紹介など、ひと目で印象に残したいセクションに向いています。画像を使わず radial-gradient の重ね合わせだけで作るので、色の差し替えも簡単です。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいフロントエンドエンジニアです。 以下の条件で「メッシュグラデーション背景」を持つセクションを実装してください。 ## 仕様 - 左上：#1463F0、右上：#8B5CF6、右下：#F4C9A8、左下：#1463F0 の55%の淡い色 - それぞれの色を radial-gradient で四隅に置き、中心に向かって透明にする - ベース色：#1463F0 の20%の淡い色 ## 実装方法 - background に radial-gradient を4つ重ね、最後にベース色を指定する - 各グラデーションの大きさは 60% 70% 程度にして、色どうしが中央で自然に混ざるようにする - 画像・canvas・JavaScript は使わない - 上に置くコンテンツは、白の半透明パネル（背景 rgba(255, 255, 255, 0.82)、角丸 16px）にのせる ## 読みやすさ - パネル内の見出しは #1B2A44、補足文は #5F6D84 - パネルを使わず直接文字を置く場合の、文字色の決め方をコメントで説明する - サンプルとして、見出し・補足文・ボタンを含むセクションを1つ用意する ## レスポンシブ・その他 - セクションの上下の余白：PC 120px / スマホ 72px - スマホでは各グラデーションの大きさを 80% に広げ、色が切れて見えないようにする - 印刷時（@media print）は背景を非表示にする ## 出力形式 - [使用技術]のコードを1つ出力 - 4つの色をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。