Backgrounds & Visuals
Faceted Glass
CSS shapes creating a faceted glass pattern with hover effects.
patternglassfacetedcssshapes
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #1c1917 | Background color |
gridCols | number | 6 | Grid columns |
gridRows | number | 6 | Grid rows |
gap | string | 0.5rem | Grid gap |
rotation | number | -12 | Grid rotation angle |
scale | number | 1.25 | Grid scale |
facetBgColor | string | rgba(255, 255, 255, 0.03) | Facet background color |
facetBorderColor | string | rgba(255, 255, 255, 0.05) | Facet border color |
facetInitialOpacity | number | 0.3 | Initial facet opacity |
facetHoverOpacity | number | 0.6 | Hover facet opacity |
facetHoverBgColor | string | rgba(255, 255, 255, 0.1) | Hover facet background color |
facetHoverScale | number | 1.05 | Hover facet scale |
blurAmount | string | xl | Blur amount |
className | string | Additional CSS classes |