ngx-liquid-glazz

Real iOS-style "Liquid Glass" for Angular — actual refraction via an SVG displacement filter (feTurbulence + feGaussianBlur + feDisplacementMap), layered with a frost/tint pass and specular edge highlights. Not another backdrop-filter: blur() glassmorphism wrapper — the backdrop actually bends.

There was no Angular package for this effect (the space was React-only). This is a single standalone directive: works on cards, buttons, navbars — anything.

Install

npm install ngx-liquid-glazz

Import the base stylesheet once, globally (angular.json styles array, or a global @import):

@import 'ngx-liquid-glazz/styles';

Quickstart

import { Component } from '@angular/core';
import { LiquidGlassDirective } from 'ngx-liquid-glazz';

@Component({
  selector: 'app-card',
  standalone: true,
  imports: [LiquidGlassDirective],
  template: `
    <div liquidGlass [displacementScale]="90" [blur]="4" class="card">
      <h2>Frosted &amp; refracted</h2>
      <p>Real glass, not just blur.</p>
    </div>
  `,
  styles: `
    .card {
      padding: 2rem;
      border-radius: 24px;
    }
  `,
})
export class CardComponent {}

That's it — no module, no providers required. The directive reacts to input changes live, so binding sliders or state to any input updates the glass in real time.

Inputs

| Input | Type | Default | Description | | --------------------- | --------- | --------------------------- | ------------------------------------------------------------- | | displacementScale | number | 70 | Refraction strength — maps to the SVG feDisplacementMap scale. | | blur | number | 3 | Frost blur, in px. | | saturation | number | 180 | Backdrop saturation, in percent. | | brightness | number | 1.08 | Backdrop brightness multiplier. | | tint | string | 'rgba(255,255,255,0.04)' | Tint color layered over the refracted backdrop. | | radius | string | '24px' | Corner radius. | | specular | boolean | true | Toggles the specular edge-highlight inset shadows. |

App-wide defaults

Override the built-in defaults once for the whole app with provideLiquidGlassConfig(). Directive inputs still take precedence over whatever's configured here.

import { bootstrapApplication } from '@angular/platform-browser';
import { provideLiquidGlassConfig } from 'ngx-liquid-glazz';

bootstrapApplication(AppComponent, {
  providers: [
    provideLiquidGlassConfig({
      blur: 6,
      tint: 'rgba(0,0,0,0.08)',
    }),
  ],
});

Precedence: directive input > provideLiquidGlassConfig() > built-in default.

Browser support

The refraction (backdrop-filter: url(#svg-filter)) is a Chromium-only feature today.

| Browser | Result | | ---------------- | ---------------------------------------------------- | | Chrome / Edge | Full effect — real refraction + frost + specular. | | Safari / Firefox | Graceful fallback to blur(14px) saturate(180%) — still a premium frosted-glass look, never broken. |

Angular version support

| ngx-liquid-glazz | Angular | | ------------------ | -------------- | | 0.1.x | 17.1 – 22.x |

• Standalone-only — no NgModule.
• Zoneless-ready — the directive updates purely through effect() writing CSS custom properties; it never depends on Zone.js change detection.
• OnPush-safe — DOM updates aren't gated on change detection at all, so it's a natural fit for Angular 22's OnPush-by-default and zoneless-by-default apps.

SSR

Works out of the box with Angular SSR (ng new --ssr). All DOM work happens inside afterNextRender(), so the directive no-ops cleanly on the server and picks up on hydration.

How it works

• A root-provided service injects a single SVG <filter> (per distinct displacementScale value in use) into document.body, ref-counted across directive instances.
• The directive applies backdrop-filter: url(#the-filter) blur(...) saturate(...) brightness(...) to a ::before layer, a tint to ::after, and specular highlights via inset box-shadow — all driven by CSS custom properties (--lg-blur, --lg-tint, etc.) so runtime input changes update instantly with zero re-render cost.
• It never restructures your host element's content — apply it to anything.

License

MIT