Create Advanced Liquid Glass & Noise Effects with FxFilterJS

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-filter CSS custom property.
• Chainable Filters: Combine multiple effects like blur(), noise(), and liquid-glass() in a single declaration.
• Built-in Advanced Effects: Includes liquid-glass for distortion and noise for 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.

<script src="FxFilter.js"></script>

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: 0 is grayscale, intensity controls its strength, and opacity handles its transparency. I’ve found that a low opacity, like 0.1, works best for subtle grain.
• liquid-glass(refraction, offset, chromatic): Generates a distorted glass effect. refraction controls the distortion level, offset affects the edge smoothness, and the optional chromatic parameter (0-1) adds a color-splitting aberration effect.

<div class="glass-card" style="--fx-filter: blur(20px) noise(.5, 1, .1);">
  <span>noise() + blur()<br><small>Raw</small></span>
  <code>--fx-filter: blur(20px) noise(.5, 1, .1);</code>
</div>

<div class="glass-card" style="--fx-filter: blur(20px) noise(.5, 1, .1) color-overlay(black,.3);">
  <span>noise() + blur()<br><small>Dark</small></span>
  <code>--fx-filter: blur(20px) noise(.5, 1, .1) color-overlay(black,.3);</code>
</div>

<div class="glass-card" style="--fx-filter: blur(20px) noise(.5, 1, .1) color-overlay(white,.3);">
  <span>noise() + blur()<br><small>Light</small></span>
  <code>--fx-filter: blur(20px) noise(.5, 1, .1) color-overlay(white,.3);</code>
</div>

<!-- Row 2: liquid-glass() + blur() -->
<div class="glass-card" style="--fx-filter: blur(4px) liquid-glass(2, 10) saturate(1.25);">
  <span>liquid-glass() + blur()<br><small>Raw</small></span>
  <code>--fx-filter: blur(4px) liquid-glass(2, 10) saturate(1.25);</code>
</div>

<div class="glass-card"
  style="--fx-filter: blur(4px) liquid-glass(2, 10) saturate(1.25) color-overlay(black,.3) contrast(1.25);">
  <span>liquid-glass() + blur()<br><small>Dark</small></span>
  <code>--fx-filter: blur(4px) liquid-glass(2, 10) saturate(1.25) color-overlay(black,.3) contrast(1.25);</code>
</div>

<div class="glass-card"
  style="--fx-filter: blur(4px) liquid-glass(2, 10) saturate(1.25) color-overlay(white,.3) contrast(1.25);">
  <span>liquid-glass() + blur()<br><small>Light</small></span>
  <code>--fx-filter: blur(4px) liquid-glass(2, 10) saturate(1.25) color-overlay(white,.3) contrast(1.25);</code>
</div>

<div class="glass-card" style="--fx-filter: blur(4px) liquid-glass(2, 10, 1) saturate(1.25);">
  <span>liquid-glass() + blur()<br><small>Chroma Raw</small></span>
  <code>--fx-filter: blur(4px) liquid-glass(2, 10, 1) saturate(1.25);</code>
</div>

<div class="glass-card"
  style="--fx-filter: blur(4px) liquid-glass(2, 10, 1) saturate(1.25) color-overlay(black,.3) contrast(1.25);">
  <span>liquid-glass() + blur()<br><small>Chroma Dark</small></span>
  <code>--fx-filter: blur(4px) liquid-glass(2, 10, 1) saturate(1.25) color-overlay(black,.3) contrast(1.25);</code>
</div>

<div class="glass-card"
  style="--fx-filter: blur(4px) liquid-glass(2, 10, 1) saturate(1.25) color-overlay(white,.3) contrast(1.25);">
  <span>liquid-glass() + blur()<br><small>Chroma Light</small></span>
  <code>--fx-filter: blur(4px) liquid-glass(2, 10, 1) saturate(1.25) color-overlay(white,.3) contrast(1.25);</code>
</div>

4. The FxFilter.add() API allows creating custom effects using SVG filter primitives:

// Custom brightness effect
FxFilter.add("brightness", (element, value = 1.5) => {
  return `<feComponentTransfer>
    <feFuncR type="linear" slope="${value}"/>
    <feFuncG type="linear" slope="${value}"/>
    <feFuncB type="linear" slope="${value}"/>
  </feComponentTransfer>`;
});
// Usage in CSS
// --fx-filter: brightness(1.2) blur(3px);

The post Create Advanced Liquid Glass & Noise Effects with FxFilterJS appeared first on CSS Script.