背景コード生成用
放射状のサンバースト背景
中心から光が広がるような、にぎやかな集中線。
用途・説明
1点から放射状に帯が広がる、サンバースト（集中線）の背景を作成します。セールやキャンペーンの告知、新商品の発表、当選のお知らせなど、注目を集めたい場面に向いています。淡い2色で組むので、派手になりすぎず文字も読みやすく保てます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいフロントエンドエンジニアです。 以下の条件で「放射状のサンバースト背景」を持つセクションを実装してください。 ## 仕様 - 2色の帯を交互に並べる：#CFE0FF の9%の淡い色と、#CFE0FF の20%の淡い色 - 帯の数：24本（1本あたり 15度） - 中心：セクションの中央、やや下（50% 60%） ## 実装方法 - repeating-conic-gradient を使う。画像やSVGは使わない - 中心に、白から透明への radial-gradient を重ねて、中央の文字のまわりを明るくする - セクションからはみ出した部分は overflow: hidden で切る ## 読みやすさ - 見出しは #1B2A44、補足文は #5F6D84 - 文字は中心に置き、白いぼかしの上に重なるようにする - サンプルとして、ラベル・見出し・ボタンを含むセクションを1つ用意する ## レスポンシブ・その他 - セクションの上下の余白：PC 96px / スマホ 64px - 帯がゆっくり回転するアニメーションの例も併記する（60秒で1回転。prefers-reduced-motion で無効化） - 印刷時（@media print）は背景を非表示にする ## 出力形式 - [使用技術]のコードを1つ出力 - 2色・帯の角度・中心の位置をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。