CSS 灰色濾鏡是一種可以添加到圖像或元素中的效果，使其變成灰色的濾鏡效果。這一效果可以用于網站設計中的各種情形，如當需要弱化圖像時，突出文字等等。

元素 {
filter: grayscale(100%);
}

以上代碼可以將任何元素加上一個灰色濾鏡效果。在這個例子中，我們設置了為 100% 的灰度，這表示圖像或元素變為黑白，因為其在紅、綠、藍三個顏色通道中都被減弱到了最小。

將灰度調整為 50% 可以使圖像或元素保留一些彩色，因此仍然可讀。

元素 {
filter: grayscale(50%);
}

我們也可以在同一行中組合多個濾鏡效果，以更好地自定義元素的外觀。

元素 {
filter: grayscale(100%) opacity(50%);
}

以上代碼為元素應用了兩個濾鏡效果，第一個將其變為黑白，第二個降低了其不透明度。

在某些情況下，我們可能需要將濾鏡效果應用于特定的圖片或其他元素，可以使用以下方式給它們添加類名，并在 CSS 中進行樣式定義：

.grayscale {
filter: grayscale(100%);
}

使用上述示例中的代碼，我們可以將特定的圖像添加灰色濾鏡效果，而不會影響其他圖像或元素。

可以通過更改數值來自定義濾鏡的強度和效果。 CSS 灰色濾鏡是修改元素外觀的一種好方法，尤其是在需要一些減弱或粗糙處理的情況下。