CSS3漸變疊加（Gradient Overlay）是一種非常常用的效果，它可以幫助我們實現菜單、標簽、輪播圖等效果。下面我們來看一下如何使用CSS3實現漸變疊加效果。

首先，我們需要使用CSS3的漸變屬性（gradient）。比如我們想要實現從左到右的漸變，就可以使用以下代碼：

background: linear-gradient(to right, #ffffff, #000000);

其中，to right表示從左到右的方向，#ffffff表示起始顏色，#000000表示終止顏色。我們可以根據需求修改這些參數。

接著，我們需要設置一個與元素相同大小的偽元素，并將其放置于元素之上。這個偽元素將會用來放置半透明的黑色遮罩，以達到漸變疊加的效果。下面是相關的代碼：

position: relative;
overflow: hidden;
&::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}

在這段代碼中，我們設置了一個Relative的容器，并將其overflow屬性設置為hidden，這將用來隱藏容器內部的偽元素超出容器范圍的部分。接著，我們設置了一個偽元素，它的content屬性被設置為空，將不會有任何文本顯示。接下來的position:absolute將讓偽元素相對于容器進行絕對定位。我們通過設置top:0和left:0將偽元素的位置設置為容器的左上角，并將其width和height屬性設置為100%以確保偽元素與元素大小相同。接著，我們將偽元素的背景顏色設置為半透明的黑色。最后，我們使用z-index屬性將偽元素置于元素之下.

通過以上的代碼，我們就能夠實現一個簡單的漸變疊加效果。