CSS グラデーション 作成
CSSのグラデーションは背景画像の一種です。左から右へ赤から青に変わるグラデーションは background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%); 、白から黒への円形なら background: radial-gradient(circle at center, #ffffff 0%, #000000 100%); と書きます。
使い方
- プリセットを選ぶか初期状態から始めて、線形か円形かを選びます。
- 線形の場合はスライダーか数値欄で角度を決めます。0度は上向き、90度は右、180度は下、270度は左です。円形の場合は circle か ellipse と、中心の位置を選びます。
- カラーストップを編集します。カラーボックスかHEXコードで色を変え、位置を0〜100%で指定します。ストップは6個まで追加でき、削除も可能です。「均等に配置」で間隔をそろえられます。
- 「CSSをコピー」を押します。1行目は古いブラウザ向けの単色、2行目がグラデーションです。
計算方法
線形グラデーションは1本の線に沿って色を混ぜます。角度はその線の向きで、上から時計回りの度数です。0deg は下から上、90deg は左から右へ進みます。各カラーストップは色と線上の位置の組で、ブラウザが隣り合うストップの間をなめらかにつなぎます。
円形グラデーションは中心から外側へ色を混ぜます。形は円（circle）か、ボックスに合わせて伸びる楕円（ellipse）で、「at top left」などのキーワードで中心を動かします。位置0%が中心、100%がいちばん遠い端です。
CSSを書き出す前にストップを位置順に並べ替えるので、編集した順番は関係ありません。2つのストップを同じ位置に置くと、色が混ざらずくっきりした境目になります。位置は小数第2位で丸めます。
色は3桁、6桁、8桁のHEXが使えます。8桁の最後の2桁はアルファ値なので、#11182700 は完全な透明です。透明へのフェードはプレビューで市松模様の上に表示されます。
角度の早見表
| 角度 | 向き | キーワードで書くと |
|---|---|---|
| 0deg | 下から上 | to top |
| 90deg | 左から右 | to right |
| 180deg | 上から下 | to bottom |
| 270deg | 右から左 | to left |
| 135deg | 左上から右下 | to bottom right（おおよそ） |
よくある質問
1行目が単色なのはなぜですか？
グラデーションに対応していない環境向けのフォールバックです。2行目を理解できるブラウザはそちらを使うので、不要なら1行目は消してかまいません。
135deg はどういう意味ですか？
グラデーションの線が右下を向きます。左上の角から始まって右下で終わります。90deg は左から右、180deg は上から下です。
なめらかではなく、くっきりしたストライプにするには？
2つのストップを同じ位置にします。たとえば赤を50%、青を50%にすると、真ん中にシャープな境目ができます。
透明へフェードさせるには？
最後のストップを #11182700 のような8桁HEXにします。キーワードの transparent へのフェードは古いSafariなどで灰色っぽく見えることがあるので、同じ色のアルファ0のほうが安全です。
conic-gradient には対応していますか？
まだ対応していません。このツールは線形と円形のグラデーションに対応しています。
何かアップロードされますか？
されません。プレビューもCSSもブラウザの中で作っています。