HTML5漸變盒子是一種非常流行的Web設計方式，廣泛應用于網頁背景和裝飾性設計。它通過利用CSS和HTML5中的漸變特性，可以為網頁增添更加豐富的視覺效果。下面我們來介紹一下如何編寫HTML5漸變盒子的代碼。

.gradient-box {
width: 300px;
height: 200px;
background: linear-gradient(to bottom, #fff, #000);
}

這段代碼可以創建一個寬為300px，高為200px的漸變盒子，其中包含了一個從上到下的線性漸變效果。具體解析如下：

1. 選擇器：.gradient-box，表示對class為gradient-box的元素生效
2. 寬度和高度：width和height分別代表盒子的寬度和高度，可以根據設計需要進行自定義
3. 漸變效果：background屬性用于設置盒子的背景顏色和漸變效果。這里采用了linear-gradient函數，to bottom表示漸變方向從上往下，#fff和#000表示漸變起點和終點顏色，可以根據需求進行顏色自定義。

以上就是一個簡單的HTML5漸變盒子代碼示例，通過調整參數，可以實現更多不同的漸變效果，比如徑向漸變、角度漸變等。