A powerful JavaScript library that brings advanced visual effects to the web using SVG filters and canvas-based textures. Create stunning visual effects like liquid glass, frosted glass, chromatic aberration, and customizable noise patterns with simple CSS declarations. Easily extensible with custom effects using the FxFilter.add() API.
<script src="https://berkaytumal.github.io/FxFilterJS/FxFilter.js"></script>
<!-- Latest version -->
<script src="https://berkaytumal.github.io/FxFilterJS/FxFilter.js"></script>
<!-- Specific version -->
<script src="https://berkaytumal.github.io/FxFilterJS/v1.0.0/FxFilter.js"></script>Download the script and include it directly in your HTML:
<script src="FxFilter.js"></script>After loading, apply effects using CSS custom properties:
.element {
--fx-filter: blur(10px) noise(.25, 1, .1);
}
.liquid-glass {
--fx-filter: blur(2px) contrast(1.2) liquid-glass(2, 10) saturate(1.2);
}
.chromatic-glass {
--fx-filter: blur(2px) liquid-glass(1.5, 8, 0.8) saturate(1.3);
}Creates customizable noise patterns for texture and grain effects.
--fx-filter: noise(saturation, intensity, opacity);Parameters:
saturation(0-1): Controls color saturation (0 = grayscale, 1 = full color)intensity(0-1): Controls noise strengthopacity(0-1): Controls noise transparency
Examples:
/* Subtle grayscale noise */
--fx-filter: noise(0, 0.5, 0.1);
/* Colorful intense noise */
--fx-filter: noise(1, 1, 0.3);Creates smooth, distorted liquid glass effects inspired by modern iOS design with optional chromatic aberration.
--fx-filter: liquid-glass(refraction, offset, chromatic);Parameters:
refraction: Controls the liquid refraction intensityoffset: Controls the size of rounded edgeschromatic(optional): Controls chromatic aberration intensity (0-1)
Examples:
/* Basic liquid glass */
--fx-filter: blur(2px) liquid-glass(2, 10) saturate(1.2);
/* Liquid glass with chromatic aberration */
--fx-filter: blur(2px) liquid-glass(1.5, 8, 0.8) saturate(1.3);To extend FxFilterJS with custom effects:
// Add a simple blur effect
FxFilter.add("custom-blur", (element, strength = 5) => {
return `<feGaussianBlur stdDeviation="${strength}"/>`;
});
// Add a brightness effect
FxFilter.add("brightness", (element, value = 1.5) => {
return `<feComponentTransfer>
<feFuncA type="identity"/>
<feFuncR type="linear" slope="${value}"/>
<feFuncG type="linear" slope="${value}"/>
<feFuncB type="linear" slope="${value}"/>
</feComponentTransfer>`;
});
// Add a color matrix effect
FxFilter.add("sepia", (element, amount = 1) => {
const matrix = `${0.393 * amount} ${0.769 * amount} ${0.189 * amount} 0 0
${0.349 * amount} ${0.686 * amount} ${0.168 * amount} 0 0
${0.272 * amount} ${0.534 * amount} ${0.131 * amount} 0 0
0 0 0 1 0`;
return `<feColorMatrix type="matrix" values="${matrix}"/>`;
});
// Usage in CSS:
// --fx-filter: custom-blur(3) brightness(1.2) sepia(0.8);.frosted-card {
--fx-filter: blur(10px) noise(0, 1, 0.1);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 20px;
backdrop-filter: blur(10px);
}.liquid-glass {
--fx-filter: blur(2px) contrast(1.2) liquid-glass(2, 10) saturate(1.2);
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.25) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.05) 100%);
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.3),
inset 0 -2px 0 rgba(0, 0, 0, 0.3);
border-radius: 20px;
padding: 20px;
}.chromatic-glass {
--fx-filter: blur(2px) liquid-glass(1.5, 8, 0.8) saturate(1.3);
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.05) 100%);
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.3),
inset 0 -2px 0 rgba(0, 0, 0, 0.3);
border-radius: 20px;
padding: 20px;
}.complex-effect {
--fx-filter: blur(5px) noise(0.5, 0.8, 0.2) liquid-glass(1, 6, 0.4);
}- The prefix for all CSS variables is
--fx-filter. - Effects can be combined by chaining them in the CSS variable value.
- The library automatically processes elements with
--fx-filterCSS variables. - No need to call any methods for basic usage—just set the CSS variables on your element.
Contributions are most welcome! Feel free to submit issues and pull requests to help improve FxFilterJS.
- Fork the repository.
- Create a new branch for your feature or bugfix.
- Submit a pull request when your code is ready.
This project is licensed under the MIT License - see the LICENSE file for details.
For any inquiries or feedback, feel free to reach out!
