背景コード生成用
淡いグラデーション背景
ぼかした色のにじみで、やさしく奥行きのある背景に。
用途・説明
複数の淡い色をぼかして重ねた、メッシュ風のグラデーション背景をCSSだけで作ります。ヒーローセクションや申し込みエリアの背景に使うと、画像なしでも華やかさが出ます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[使用技術]- 例：CSSのみ、Tailwind CSS
プロンプト全文
あなたはCSSに詳しいWebデザイナーです。 淡い色がふんわりにじむ「メッシュ風グラデーション背景」を実装してください。 ## 目的 - 画像を使わず、CSSだけで軽量な背景をつくる - 上に置くテキストの読みやすさを最優先にする ## 配色 - ベース色：#F7F9FC - にじませる色：#CFE0FF、#F8E1D0、#E3E0F5 - いずれも彩度を抑え、背景として主張しすぎないこと ## 実装条件 - radial-gradient を3〜4個重ねて、画面の左上・右上・下中央に色だまりを配置する - 各色の広がりは要素幅の40〜60%程度。境界がはっきり見えないようにする - 背景を適用する要素は min-height: 480px とし、中身は中央に配置 - サンプルとして中央に白い半透明カード（背景 rgba(255,255,255,0.7)、角丸12px、枠線 #E2E8F0）と見出し・本文を置く ## アクセシビリティ・パフォーマンス - 背景の上のテキストは、最も濃い色だまりの上でもコントラスト比4.5:1以上を確保する - アニメーションは付けない。付ける場合は prefers-reduced-motion で停止できること - filter: blur() の多用など、描画負荷の高い手法は避ける ## レスポンシブ - スマホ幅（375px）では色だまりの位置を調整し、色が偏りすぎないようにする ## 出力形式 - [使用技術]で、HTMLとCSSを1セット出力 - 色をCSS変数で定義し、差し替え方をコメントで説明する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。