グラデーション
gradient
gradient パラメーターは、画像の上に色のグラデーションを描画します。最も一般的な用途はスクリムです。画像全体を暗くすることなく、一方の端に暗いグラデーションを敷いて、重ねたテキストを読みやすくします。
2〜16色をカンマ区切りで受け取ります。16進数値または CSSカラーキーワード で指定します。
8桁の形式ではアルファ値が先頭に来ます（AARRGGBB）。 CSSではアルファ値が末尾に来るため、これがこのパラメーターで最も多い間違いです。cc000000 は不透明度80%の黒で、スクリムにはこちらを使用します。000000cc は透明な黒であり、何も起きていないように見えます。
色が2色未満の場合、16色を超える場合、解析できない色が含まれる場合、リスト全体が無視され、関連するパラメーターも読み取られません。
透明度は保持されます
オーバーレイは画像自身の透明度を保持します。透明なピクセルはグラデーションの色を帯びることなく、透明なままです。これはCSSとは意図的に異なる挙動で、切り抜き画像の背景を塗りつぶすことなくグラデーションを描画できるようにするためです。
関連パラメーター
| パラメーター | 制御する内容 |
|---|---|
gradient-type | 線形か放射状か |
gradient-angle | 線形グラデーションの方向 |
gradient-stops | 各色の位置 |
gradient-cs と gradient-hue | 色の補間方法 |
gradient-mode | 画像に対して使用するブレンドモード |
gradient-alpha | オーバーレイ全体の不透明度 |
gradient-mask | 上から描画する代わりに画像をフェードアウトさせます |
放射状の形状は gradient-radial-shape、gradient-radial-size、gradient-radial-x、gradient-radial-y で指定します。
動画での利用
Video API は動画の出力、および動画から生成した静止画やGIFに gradient を描画します。動画では gradient-mode=normal のみが描画され、sat や blur などの色調整はグラデーションの下ではなく上に適用されます。また mark-gradient は動画の出力では描画されますが、静止画では描画されません。スプライトシートではこのパラメーターは無視されます。