要实现文字自上而下的颜色渐变效果，可以使用 CSS 的背景渐变（background gradient）和文本渐变（text gradient）的组合。以下是一个示例代码，展示了如何实现文字的自上而下颜色渐变效果：

<div class="gradient-text">
  <h1>Gradient Text</h1>
</div>

.gradient-text {
  background: linear-gradient(to bottom, #ff0000, #0000ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

在上面的示例中，我们首先使用 linear-gradient 函数创建了一个线性渐变背景，其方向为自上而下，起始颜色为红色（#ff0000），结束颜色为蓝色（#0000ff）。

接下来，我们通过设置 -webkit-background-clip 属性为 text，将背景渐变限制为文字区域。

最后，通过设置 -webkit-text-fill-color 属性为 transparent，使文字颜色变为透明，从而展现出背景渐变效果。

请注意，-webkit-background-clip 和 -webkit-text-fill-color 属性是 WebKit 浏览器的私有属性，因此只适用于支持 WebKit 内核的浏览器，如 Chrome 和 Safari。如果需要在其他浏览器上实现相同效果，可能需要使用不同的方法或兼容性方案。