CSS漸變下劃線是一種非常流行的網頁設計風格。它為文字添加了一條逐漸變化的下劃線，使得網頁文字更具視覺效果和吸引力。要制作CSS漸變下劃線的效果，我們需要用到CSS中的linear-gradient屬性。

.text {
background-size: 100% 2px; /*下劃線高度為2px*/
background-image: linear-gradient(to right, #ff0000 0%, #ff0000 50%, #0000ff 50%, #0000ff 100%); /*漸變色為紅藍*/
background-position: bottom; /*背景位置在文字下方*/
background-repeat: no-repeat; /*背景不重復*/
}

如上所示的CSS代碼實現了一個紅藍漸變的下劃線。我們通過設置background-size屬性指定下劃線高度為2px，并使用linear-gradient屬性設置漸變色。其中，to right表示漸變從左往右進行，#ff0000和#0000ff分別為紅色和藍色的RGB數值，0%和100%表示漸變的起點和終點，而50%則表示漸變從紅色到藍色的轉換點。

另外，我們還需設置background-position屬性使下劃線位置在文字下方，同時使用background-repeat屬性將背景圖片不重復。最終實現了一個流暢的CSS漸變下劃線效果。

總體來說，CSS漸變下劃線是一個非常實用的設計技巧，可以快速提升網站文本的視覺效果和交互體驗。我們可以根據自己的需求修改對應的顏色和漸變方向，達到更加豐富多彩的效果。