FxFiltersJS Demos
Download Back To CSSScript.Com
Use FxFilterJS to apply advanced visual effects like liquid glass and noise with simple CSS custom properties.
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);