CSS グラデーション作成（レイヤー・繰り返し）

線形・放射状・円錐状のグラデーションを最大 4 枚重ねて背景を作り、background-image の CSS を出力します。半透明のレイヤーで光やメッシュのような効果を作ったり、繰り返しでストライプやリングを作ったりでき、画像は PNG として保存できます。

使い方

1. 「プリセット」のタイルか既定の状態から始めます。「レイヤー」で編集するレイヤーを選び、「種類」「角度」「繰り返し」を設定します。
2. 放射状・円錐状のレイヤーでは、プレビューをクリックまたはドラッグして中心を移動し、「形」と「サイズ」を選びます。
3. 「カラーストップ」のバーをクリックするとストップが追加され、円をドラッグすると移動します。選択したストップの色、「不透明度」「位置」「中間点」は下で調整します。
4. 「レイヤーを追加」を押して半透明のレイヤーを上に重ねます。順序を入れ替えたり「非表示にする」で見比べたりできます。
5. CSS の横の「コピー」を押すか、「PNGのサイズ」を選んで「PNGで保存」を押します。

計算方法と補足

• 出力は background-image の宣言 1 つで、レイヤーは CSS の順序どおり上から下へ描かれます。半透明の色は rgb(r g b / a) の形で書き出されます。
• 中間点は、2 つのストップの色が半分ずつ混ざる位置を動かす CSS のトランジションヒントです。繰り返しは repeating-linear-gradient のように、最初のストップから最後のストップまでの区間を敷き詰めます。
• 角度と放射状のサイズキーワードは CSS Images 3 に従い、色の混合はブラウザーの既定と同じ sRGB で行います。PNG も同じ規則でブラウザー内に描画します。
• レイヤーとストップの内容はこのブラウザーに保存されます。

よくある質問

CSS で複数のグラデーションを重ねるにはどうしますか。

background-image にカンマ区切りで並べます。最初に書いたものが一番上に描かれるので、上のレイヤーには透明度が必要です。CSS 欄はその形式で書き出します。

ストライプの背景はどう作りますか。

「繰り返し」をオンにし、同じ色のストップ 2 つを同じ位置に置くと境界がくっきりします。プリセットの「ストライプ」から始めると早いです。

グラデーションの中間色が濁って見えます。どうすればよいですか。

「中間点」をオンにして混ざる位置を動かすか、中央に好みの色のストップを追加してください。補色同士を混ぜると灰色になります。

プレビューと PNG は違うことがありますか。

プレビューはブラウザーが CSS から描き、PNG は同じ規則で計算して描きます。丸めの差を除いて一致します。