https://github.com/anassmdi/ngx-glassy-effect
Liquid Glassy effect directive for Angular.
https://github.com/anassmdi/ngx-glassy-effect
angular glassmorphism liquid-glass
Last synced: about 2 hours ago
JSON representation
Liquid Glassy effect directive for Angular.
- Host: GitHub
- URL: https://github.com/anassmdi/ngx-glassy-effect
- Owner: anassmdi
- Created: 2026-06-09T04:22:14.000Z (27 days ago)
- Default Branch: main
- Last Pushed: 2026-06-27T19:04:10.000Z (8 days ago)
- Last Synced: 2026-06-27T19:08:51.268Z (8 days ago)
- Topics: angular, glassmorphism, liquid-glass
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ngx-glassy-effect
- Size: 18.1 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-angular - ngx-glassy-effect - An Angular directive that applies a glassy effect to your HTML elements. (Third Party Components / Visual Effects)
- awesome-angular - ngx-glassy-effect - An Angular directive that applies a glassy effect to your HTML elements. (Third Party Components / Visual Effects)
README
# NGX Glassy Effect
[](https://npmjs.org/ngx-glassy-effect)
[](/LICENSE)
This project is an Angular directive that applies a glassy effect to your html elements.
## Installation
```shell
npm install ngx-glassy-effect --save
```
## Setup
```ts
import { Component } from '@angular/core';
import { GlassyEffect } from 'ngx-glassy-effect';
@Component({
selector: 'app-root',
imports: [GlassyEffect], // Imported as directive into your standalone component
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
}
```
```html
Hello - Bonjour - مرحبا
```
> Tip 1 **: If your div (.content for example) text is white & the background behind the div is light, give your div a semi-transparent background, like rgba(0, 0, 0, 0.35), to keep your text visible & readable, all without losing the glassy effect.
```css
/* Tip 1 */
.content {
/* ... */
color: white;
background-color: rgb(52 52 52 / 0.2);
}
```
> Tip 2 : If the default borders aren't working for you, you can just remove [showBorder] or make it 'false', & give the element of ngxGlassyEffect the border you like using css.
```css
/* Tip 2 */
.content {
/* ... */
border: turquoise 2px solid;
}
```
## Demo
#### First demo that shows how it reflects so well with any border-radius & any size of the box you're applying it to.
> The source code of the demo is in '/projects/glassy-effect-test'
#### [Version 2.0.0 update] Another demo with a real-life example, it shows how close the reflection gets to the real apple's ios liquid glass.
> Note : in this example, the 'lensRange' has been set to 60, since the container has smaller width/height
## Configuration
- If you wish to customize the inputs values, here's a full description of all the variables :
| Input | Type | Default | Description |
|--------------------|-----------------------|-----------|-----------------------------------------------------------------------------------------------------|
| bezel | number | 10 | The width of the refractive edge bevel in pixels. |
| scale | number | 50 | The intensity of the glass refraction distortion map. |
| blur | number | 1.5 | The backdrop blur intensity factor applied to the substrate. |
| profile | 'circle' / 'squircle' | 'squircle | The geometric falloff curve used to generate the edge normals. |
| showBorder | boolean | false | Dynamically injects an anti-aliased pseudo-border running a dynamic light-angle alignment gradient. |
| lensRange | number | 100 | The spatial scope/influence bounding box of the border lens effect. |
| reflectionMidpoint | number | 0.2 | The turning midpoint ratio where edge glare achieves peak reflection values. |
## Contribute
- Contributions, bug reports, and structural feature requests are welcome! Feel free to open an issue or submit a pull request on the official GitHub repository.
## Author
- Anassmdi
- GitHub: @anassmdi
- NPM Package: ngx-glassy-effect