CSS過濾器產生器

CSS 過濾器產生器是 CSS 過濾器屬性的視覺化編輯器。您移動每個過濾器功能(模糊、亮度、對比度、飽和度、灰階、棕褐色、反轉、色調旋轉和不透明度)的滑桿,並即時觀看效果應用於預覽,然後複製其產生的精確 CSS。

濾鏡屬性直接在瀏覽器中應用模糊、顏色移位和對比度調整等圖形效果，無需影像編輯器。 多個功能可以鏈結在一個聲明中並按順序應用，這就是老式、溫暖和戲劇性等照片風格的構建方式。 此工具為您管理該鏈並僅輸出您實際更改的功能，保持 CSS 清潔。

一切都發生在您的瀏覽器中。 從復古或灰階等預設開始，微調每個功能，然後複製聲明。 沒有帳戶，沒有上傳，一旦頁面載入，它就會繼續離線工作。

過濾器按寫入的順序應用,順序會改變結果:灰階然後棕褐色與棕褐色然後灰階不同,因為第一個刪除了第二個會染色的顏色。值得知道的陷阱是結構性的而不是視覺性的。任何具有過濾器(除了沒有過濾器)的元素都會成為其固定且絕對定位的後代的包含塊,因此過濾父級內的下拉式或模態將將自己定位到該父級而不是視口。它還創建了一個新的堆疊上下文,可以打破以前有效的 z 指數排序。如果過濾器以看起來與外觀無關的方式破壞佈局,這幾乎總是原因。大多數瀏覽器中的過濾器都是 GPU 加速的,但大型元件上的大模糊半徑仍然很昂貴。