Glass Surface
A glass surface component with blur and distortion effects.
Scroll Down
Install
Use Open-UI CLI or Shadcn CLI to install the component.
Open-UI CLI
Shadcn CLI
Usage
| Prop | Default | Description | Type |
|---|---|---|---|
| children | — | Content inside the glass surface. | ReactNode |
| width | 200 | Width of the surface (number in px or CSS string). | number | string |
| height | 80 | Height of the surface (number in px or CSS string). | number | string |
| borderRadius | 20 | Border radius in pixels. | number |
| borderWidth | 0.07 | Relative border/edge width for the displacement effect (e.g. 0.07). | number |
| brightness | 50 | Brightness value for the glass effect. | number |
| opacity | 0.93 | Opacity of the glass layer (0–1). | number |
| blur | 11 | Backdrop blur amount in pixels. | number |
| displace | 0 | Displacement amount for the distortion effect. | number |
| backgroundOpacity | 0 | Opacity of the inner background layer. | number |
| saturation | 1 | Color saturation of the effect. | number |
| distortionScale | -180 | Scale of the SVG displacement map (negative values invert). | number |
| redOffset | 0 | Red channel offset for displacement mapping. | number |
| greenOffset | 10 | Green channel offset for displacement mapping. | number |
| blueOffset | 20 | Blue channel offset for displacement mapping. | number |
| xChannel | R | Color channel used for horizontal displacement (R, G, or B). | 'R' | 'G' | 'B' |
| yChannel | G | Color channel used for vertical displacement (R, G, or B). | 'R' | 'G' | 'B' |
| mixBlendMode | difference | CSS mix-blend-mode for compositing (e.g. difference, overlay). | string |
| className | — | Additional CSS class for the root container. | string |
| contentClassName | — | Additional CSS class for the inner content wrapper. | string |
| style | — | Inline styles for the root element. | CSSProperties |