ng-glass

ng-glass is a modern Angular library for creating beautiful glassmorphism and liquid glass UI effects using a simple directive or ready-to-use components.

It is built with latest Angular (signals + standalone APIs) and supports global configuration, presets, and advanced visual controls.

👉 Live Demo →

✨ Features

• 🧊 Glassmorphism effects (glass, frosted, acrylic)
• 💧 iOS-style liquid glass effect
• 🌍 Global configuration (set once, use everywhere)
• 🎨 Presets (ios, fluent, material)
• ⚡ Built with Angular signals
• 🧩 Standalone & lightweight
• 🎛 Highly customizable
• 📦 Zero dependencies

📦 Installation

npm install ng-glass

Import the base stylesheet once in your global styles.css (or angular.json):

@import 'ng-glass/ng-glass.css';

🚀 Quick Start

<div ngGlass></div>

🧊 ngGlass Directive

Apply glass effects to any element.

Inputs

| Input | Description | Default | | -------------- | ----------------------------------------------- | -------------- | | effectType | 'glass' \| 'frosted' \| 'acrylic' \| 'liquid' | 'glass' | | blur | Blur intensity | 10 | | opacity | Glass opacity | 0.15 | | borderRadius | Border radius (px) | 10 | | borderWidth | Border width (px) | 1 | | borderStyle | Border style (solid, dashed, none, …) | 'solid' | | borderColor | Border color | 'rgba(255,255,255,0.2)' | | shadow | Box shadow | default shadow | | gradient | Background gradient | default | | intensity | Scale entire effect | 1 | | overflow | CSS overflow (hidden, visible, …) | 'hidden' | | lightX | Light position X (%) (liquid) | 30 | | lightY | Light position Y (%) (liquid) | 30 |

💡 Examples

Basic

<div ngGlass></div>

Acrylic

<div ngGlass effectType="acrylic" [blur]="20"></div>

Liquid Glass (iOS-style)

<div ngGlass effectType="liquid"></div>

Interactive Liquid Effect

<div ngGlass effectType="liquid" [lightX]="80" [lightY]="20"></div>

🌍 Global Configuration

Set default styles once for your entire app.

import { provideNgGlassConfig } from 'ng-glass';

bootstrapApplication(AppComponent, {
  providers: [
    provideNgGlassConfig({
      effectType: 'liquid',
      blur: 25,
      borderRadius: 16
    })
  ]
});

Now you can simply use:

<div ngGlass></div>

🎨 Presets

Quickly apply pre-designed styles:

provideNgGlassConfig({
  preset: 'ios'
});

Available presets:

• ios → Liquid glass (Apple-style)
• fluent → Acrylic (Windows style)
• material → Soft glass (Material-inspired)

🧩 ng-glass-card Component

A ready-to-use glass card component with content projection.

<ng-glass-card>
  <div card-header>Header</div>
  <div card-body>Content</div>
  <div card-footer>Footer</div>
</ng-glass-card>

🎯 Advanced Example

<div
  ngGlass
  effectType="liquid"
  [blur]="30"
  [intensity]="1.5"
  [lightX]="70"
  [lightY]="30">
</div>

🎨 CSS Customisation

Every visual property is a CSS custom property — no inline styles, no !important fights. Override anything in your stylesheet:

.my-panel {
  --ng-glass-backdrop:      blur(24px) saturate(200%);
  --ng-glass-background:    linear-gradient(135deg, rgba(0,0,200,0.15), rgba(0,0,200,0.05));
  --ng-glass-border-radius: 20px;
  --ng-glass-border-width:  2px;
  --ng-glass-border-style:  dashed;
  --ng-glass-border-color:  rgba(100, 149, 237, 0.4);
  --ng-glass-shadow:        0 8px 32px rgba(0, 0, 0, 0.3);
  --ng-glass-overflow:      visible;  /* opt-out of overflow:hidden */
  --ng-glass-transition:    none;     /* opt-out of transitions */
}

/* Card-specific overrides */
ng-glass-card.my-card {
  --ng-glass-card-padding:        2rem;
  --ng-glass-card-divider-color:  rgba(100, 149, 237, 0.25);
  --ng-glass-card-divider-width:  2px;
  --ng-glass-card-divider-style:  dashed;
}

| CSS Variable | Controls | Default | | -------------------------------- | ------------------------------------- | ------------------------ | | --ng-glass-backdrop | backdrop-filter | blur(10px) saturate(150%)| | --ng-glass-background | Background gradient | linear-gradient(...) | | --ng-glass-border-radius | Border radius | 10px | | --ng-glass-border-width | Border width | 1px | | --ng-glass-border-style | Border style | solid | | --ng-glass-border-color | Border color | rgba(255,255,255,0.2) | | --ng-glass-shadow | Box shadow | 0 4px 30px rgba(0,0,0,.1)| | --ng-glass-overflow | overflow (set visible to opt-out) | hidden | | --ng-glass-transition | CSS transition (set none to opt-out)| background 0.3s ease... | | --ng-glass-card-padding | Card inner padding | 1.5rem | | --ng-glass-card-divider-color | Header/footer divider color | inherits border-color | | --ng-glass-card-divider-width | Header/footer divider width | inherits border-width | | --ng-glass-card-divider-style | Header/footer divider style | inherits border-style |

🧠 Notes

• Works best on elements with background content behind them
• Requires browser support for backdrop-filter
• For best results, use on modern browsers

📄 License

MIT