FxFiltersJS Demos
Showcasing custom CSS filters with SVG & Canvas using FxFiltersJS
noise() + blur()
Raw
Raw
--fx-filter: blur(20px) noise(.5, 1, .1);
noise() + blur()
Dark
Dark
--fx-filter: blur(20px) noise(.5, 1, .1) color-overlay(black,.3);
noise() + blur()
Light
Light
--fx-filter: blur(20px) noise(.5, 1, .1) color-overlay(white,.3);
liquid-glass() + blur()
Raw
Raw
--fx-filter: blur(4px) liquid-glass(2, 10) saturate(1.25);
liquid-glass() + blur()
Dark
Dark
--fx-filter: blur(4px) liquid-glass(2, 10) saturate(1.25) color-overlay(black,.3) contrast(1.25);
liquid-glass() + blur()
Light
Light
--fx-filter: blur(4px) liquid-glass(2, 10) saturate(1.25) color-overlay(white,.3) contrast(1.25);
liquid-glass() + blur()
Chroma Raw
Chroma Raw
--fx-filter: blur(4px) liquid-glass(2, 10, 1) saturate(1.25);
liquid-glass() + blur()
Chroma Dark
Chroma Dark
--fx-filter: blur(4px) liquid-glass(2, 10, 1) saturate(1.25) color-overlay(black,.3) contrast(1.25);
liquid-glass() + blur()
Chroma Light
Chroma Light
--fx-filter: blur(4px) liquid-glass(2, 10, 1) saturate(1.25) color-overlay(white,.3) contrast(1.25);
About: Each card demonstrates a custom CSS filter effect powered by
FxFiltersJS.
FxFiltersJS lets you write advanced filter chains using SVG and Canvas for next-level UI effects.
FxFiltersJS lets you write advanced filter chains using SVG and Canvas for next-level UI effects.