在CSS語法中用戶代理對漸變gradient語法的解析渲染離不開漸變線。漸變分為線性漸變(linear gradient)和徑向漸變(radial gradient)。
漸變在元素盒模型中background-image屬性生成的對應包含塊區域創建一個漸變圖像。其中線性漸變圖像是根據設置的漸變線的角度、色標等參數來渲染生成。
具體來說，元素的線性漸變線是經過元素盒模型的中心點的直線上的線段。該直線按照指定角度進行傾斜，通過背景圖像(background-image)包含塊區域右上角和左下角作該直線的垂線，兩條垂線與該直線的交點組成的線段即為元素線性漸變圖像的漸變線。
線性漸變圖像中的每一點的顏色與經過該點做漸變線的垂線，垂線與漸變線的交點所擁有的顏色相同。
示例：
為簡明清晰說明，這里采用background-repeat:no-repeat模式。矩形ABCD是元素背景圖像的生成漸變框區域，O為該矩形的對稱中心，直線L為過O點且傾斜角為α的直線，其中α(處於坐標軸一、三象限內)為線性漸變的漸變角度。(注意：定義漸變線方向的角度A(在任何象限中)，0度指向上，正角度表示順時針旋轉，所以實際漸變線角度定義的傾斜角度A為90°-α。)過B、D做直線L的垂線，垂足分別為D1、B1。線段D1B1即為計算機在渲染時，計算生成的漸變線。矩形ABCD內任意一點的顏色與過該點作線段D1B1的垂線所形成的交點的點的顏色相同。譬如D與D1點的顏色值相同。 同理類似，若α處於二四象限，就是以A、C作L的垂線，求線性漸變的漸變線。
starting point-起點;ending point-終點
(1)漸變線是圖像類別background-image , 不是顏色類別background-color。
本示例從視覺上說明了如何根據上述規則計算漸變線。 這顯示了漸變線的起點和終點，以及由背景元素生成的實際漸變："linear-gradient:(45deg，white，black);"。
請注意，盡管起點和終點不在框的外部，但它們的位置恰好位於右側，因此漸變在拐角處為純白色，而在相對拐角處為純黑色。 這是有意的，並且對於線性漸變永遠都是正確的。
注意：
A定義漸變線方向的角度(在任何象限中)，使0度指向上，正角度表示順時針旋轉，
W漸變框的寬度，
H漸變框的高度，
abs() 返回絕對值的函數，
漸變線的長度(起點和終點之間)為：
abs(W*sin(A))+abs(H*cos(A))
漸變的色標通常放置在漸變線的起點和終點之間，但這不是必需的：漸變線在兩個方向上無限延伸。起點和終點僅僅是任意的位置標記，在指定顏色停止時定義0%、0px等位置的起點，而終點定義100%的位置。顏色停止允許在0%之前或100%之后有位置。
線性漸變上任意一點的顏色是找到一條通過該點並且垂直於漸變線的直線來確定的。點的顏色是漸變線在該直線交點的顏色。
線性漸變中漸變線長度公式的證明：
還是根據上面漸變線長度轉化的幾何題來證明。(A在第1象限時證明)
根據題意有：BD=2OD=√(DC²+BC²),其中DC=W,BC=H。
∵ sin∠ODD₁=OD₁/OD
又∵sin∠ODD₁=sin(∠BDC+90°-α)=cos(α-∠BDC)
∴OD₁/OD=cos(α-∠BDC)
OD₁/OD=cosαcos∠BDC+sinαsin∠BDC
即OD₁=OD[cosαcos∠BDC+sinαsin∠BDC]
cos∠BDC=CD/BD,sin∠BDC=BC/BD
OD₁=OD[cosα*CD/BD+sinα*BC/BD]
=0.5Wcosα+0.5Hsinα
而OD₁=0.5D₁B₁
那么D₁B₁=Wcosα+Hsinα
而A=90°-α
即D₁B₁=WsinA+HcosA
徑向漸變是以漸變橢圓(或圓)的對稱中心為起點，以橢圓(或圓)的最外輪廓為終點，按照色標信息繪制的平滑漸變圖像。徑向漸變在效果上看，就是一圈圈的等比例縮放的同心橢圓(或圓)構成。
參考資料：W3C官網線性漸變linear-gradients
https://www.w3.org/TR/css-images-3/#linear-gradients
《CSS+Secret》中文版 P28