| Author: | berkaytumal |
|---|---|
| Views Total: | 0 views |
| Official Page: | Go to website |
| Last Update: | June 26, 2025 |
| License: | MIT |
Preview:
Description:
FxFilterJS is a JavaScript library that uses SVG filters and canvas-based textures to create modern UI effects like frosted glass, liquid glass distortions, chromatic aberration, and procedural noise patterns through CSS declarations.
Features:
- CSS-Driven Effects: All effects are controlled via the
--fx-filterCSS custom property. - Chainable Filters: Combine multiple effects like
blur(),noise(), andliquid-glass()in a single declaration. - Built-in Advanced Effects: Includes
liquid-glassfor distortion andnoisefor canvas-based texture generation. - Extensible API: Add your own custom effects with the
FxFilter.add()method by defining new SVG filter primitives. - Zero-Config Usage: For basic effects, just include the script and set the CSS variable. The library handles the rest.
See it in action:
How to use it:
1. Download FxFilterJS package and load the ‘FxFilter.js’ script in the document.
2. Once the script is included, you can apply filters directly in your CSS. The library listens for the --fx-filter custom property.
.my-element {
--fx-filter: blur(5px) noise(0, 0.8, 0.15);
}
.glass-card {
--fx-filter: blur(2px) liquid-glass(1.5, 8, 0.8) saturate(1.3);
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
}
3. Available effects:
noise(saturation, intensity, opacity): Creates a noise texture.saturation: 0is grayscale,intensitycontrols its strength, andopacityhandles its transparency. I’ve found that a low opacity, like0.1, works best for subtle grain.liquid-glass(refraction, offset, chromatic): Generates a distorted glass effect.refractioncontrols the distortion level,offsetaffects the edge smoothness, and the optionalchromaticparameter (0-1) adds a color-splitting aberration effect.
noise() + blur()
Raw--fx-filter: blur(20px) noise(.5, 1, .1);noise() + blur()
Dark--fx-filter: blur(20px) noise(.5, 1, .1) color-overlay(black,.3);noise() + blur()
Light--fx-filter: blur(20px) noise(.5, 1, .1) color-overlay(white,.3);liquid-glass() + blur()
Raw--fx-filter: blur(4px) liquid-glass(2, 10) saturate(1.25);liquid-glass() + blur()
Dark--fx-filter: blur(4px) liquid-glass(2, 10) saturate(1.25) color-overlay(black,.3) contrast(1.25);liquid-glass() + blur()
Light--fx-filter: blur(4px) liquid-glass(2, 10) saturate(1.25) color-overlay(white,.3) contrast(1.25);liquid-glass() + blur()
Chroma Raw--fx-filter: blur(4px) liquid-glass(2, 10, 1) saturate(1.25);liquid-glass() + blur()
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--fx-filter: blur(4px) liquid-glass(2, 10, 1) saturate(1.25) color-overlay(white,.3) contrast(1.25);
4. The FxFilter.add() API allows creating custom effects using SVG filter primitives:
// Custom brightness effect
FxFilter.add("brightness", (element, value = 1.5) => {
return `
`;
});
// Usage in CSS
// --fx-filter: brightness(1.2) blur(3px);
