GlassSurface
Component documentation for GlassSurface.
GlassSurface
Component documentation for GlassSurface.
Basic Usage
GlassSurface
Demo loads on client.
Parameter Tuning (Slider)
GlassSurface Parameter Tuning
Demo loads on client.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
width | string | number | '200px' | Description for width. |
height | string | number | '200px' | Description for height. |
borderRadius | number | 20 | Description for borderRadius. |
borderWidth | number | 0.07 | Description for borderWidth. |
brightness | number | 70 | Description for brightness. |
opacity | number | 0.93 | Description for opacity. |
blur | number | 11 | Description for blur. |
displace | number | 0.5 | Description for displace. |
backgroundOpacity | number | 0 | Description for backgroundOpacity. |
saturation | number | 1 | Description for saturation. |
distortionScale | number | -180 | Description for distortionScale. |
redOffset | number | 0 | Description for redOffset. |
greenOffset | number | 10 | Description for greenOffset. |
blueOffset | number | 20 | Description for blueOffset. |
xChannel | 'R' | 'G' | 'B' | 'R' | X Text |
yChannel | 'R' | 'G' | 'B' | 'G' | Y Text |
mixBlendMode | string | 'difference' | Description for mixBlendMode. |
This component degrades based on browser capabilities (when SVG filter/backdrop-filter is unsupported).
Was this helpful?