CSS倒影漸變是一種常見的設計技巧，可以為網頁元素帶來立體感和深度感。通過設置元素的倒影，可以讓頁面更具立體感，同時也可以加強視覺效果。

.box {
width: 200px;
height: 200px;
background: #FFF;
padding: 20px;
border: 1px solid #DDD;
position: relative;
}
.box:after {
content: "";
position: absolute;
bottom: -20px;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(to top, rgba(255, 255, 255, 0.8), transparent);
filter: blur(2px);
transform: scaleY(-1); 
}

以上是創(chuàng)建倒影漸變的基本代碼，其中.box是需要添加倒影的元素，通過設置絕對定位和偽元素:after實現(xiàn)倒影效果。設置content屬性為空字符串可以讓偽元素:after在頁面上不占空間。

其中bottom屬性設置為負數可以讓倒影偏移原來的位置，達到倒影效果。同時設置left和right屬性為0，可以讓倒影與原元素等寬。設置height屬性為20px，表示倒影的高度，可以根據需要進行調節(jié)。background屬性設置漸變背景色，使用linear-gradient函數定義背景色漸變方向和起止顏色值。這里采用從底部到頂部的漸變方向，起始顏色為rgba(255, 255, 255, 0.8)，表示白色半透明，結束顏色為transparent，表示透明。

使用filter:blur()函數可以添加高斯模糊效果，讓倒影更加真實。transform: scaleY(-1)函數可以將倒影進行翻轉，實現(xiàn)真正的倒影效果。

總的來說，CSS倒影漸變是一種常用的設計技巧，可以為網頁元素增添更多的維度感。通過簡單的代碼調整，就可以輕松實現(xiàn)倒影漸變效果。