Apple's Liquid Glass effect for React.
| Card Example | Button Example |
|---|---|
 |
 |
- Proper edgy bending and refraction
- Multiple refraction modes
- Configurable frosty level
- Supports arbitrary child elements
- Configurable paddings
- Correct hover and click effects
- Edges and highlights take on the underlying light like Apple's does
- Configurable chromatic aberration
- Configurable elasticity, to mimic Apple's "liquid" feel
⚠️ NOTE: Safari and Firefox only partially support the effect (displacement will not be visible)
npm install liquid-glass-reactimport LiquidGlass from 'liquid-glass-react'
function App() {
return (
<LiquidGlass>
<div className="p-6">
<h2>Your content here</h2>
<p>This will have the liquid glass effect</p>
</div>
</LiquidGlass>
)
}<LiquidGlass
displacementScale={64}
blurAmount={0.1}
saturation={130}
aberrationIntensity={2}
elasticity={0.35}
cornerRadius={100}
padding="8px 16px"
onClick={() => console.log('Button clicked!')}
>
<span className="text-white font-medium">Click Me</span>
</LiquidGlass>When you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the mouseContainer prop:
function App() {
const containerRef = useRef<HTMLDivElement>(null)
return (
<div ref={containerRef} className="w-full h-screen bg-image">
<LiquidGlass
mouseContainer={containerRef}
elasticity={0.3}
style={{ position: 'fixed', top: '50%', left: '50%' }}
>
<div className="p-6">
<h2>Glass responds to mouse anywhere in the container</h2>
</div>
</LiquidGlass>
</div>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
children |
React.ReactNode |
- | The content to render inside the glass container |
displacementScale |
number |
70 |
Controls the intensity of the displacement effect |
blurAmount |
number |
0.0625 |
Controls the blur/frosting level |
saturation |
number |
140 |
Controls color saturation of the glass effect |
aberrationIntensity |
number |
2 |
Controls chromatic aberration intensity |
elasticity |
number |
0.15 |
Controls the "liquid" elastic feel (0 = rigid, higher = more elastic) |
cornerRadius |
number |
999 |
Border radius in pixels |
className |
string |
"" |
Additional CSS classes |
padding |
string |
- | CSS padding value |
style |
React.CSSProperties |
- | Additional inline styles |
overLight |
boolean |
false |
Whether the glass is over a light background |
onClick |
() => void |
- | Click handler |
mouseContainer |
React.RefObject<HTMLElement | null> | null |
null |
Container element to track mouse movement on (defaults to the glass component itself) |