Hero sections
24 variants
Liquid Glass
A glass surface that refracts the content behind it, with a curved rim, color fringing and a frosted fallback for every browser.
Bend the
light.
Installation
Run the following command
npx shadcn@latest add @aceternity/liquid-glassExamples
App Chrome
3D Globe
WebGL
Mesh gradients
Shaders
Keyboard
Interactive
Product heroes
12 variants
SaaS heroes
8 variants
Discover
Hero Section
NewLaunch week is live
Ship your product into orbit.
Orbit plans, builds and launches your releases in one place, so your team spends less time on process and more time on the product.
Free for teams up to 5. No credit card needed.
Browser support
The refraction uses an SVG filter as backdrop-filter, which only Chromium browsers (Chrome, Edge, Arc) support. Safari and Firefox show frosted glass. When the user prefers reduced transparency, the glass is opaque.
Props
| Prop | Type | Default | Description | Required |
|---|---|---|---|---|
children | React.ReactNode | - | Content rendered on top of the glass. | No |
className | string | - | Extra classes for the glass surface. Set its size here. | No |
contentClassName | string | - | When set, wraps children in a div with these classes. | No |
radius | number | 999 | Corner radius in px. The default gives a pill or a circle. | No |
bevelDepth | number | 14 | Width of the curved rim that bends the light, in px. | No |
scale | number | 48 | Strength of the refraction, in px. | No |
aberration | number | 4 | Spread of the color fringe at the rim, in px. 0 turns it off. | No |
frost | number | 0.4 | Blur applied after the refraction, in px. | No |
tint | number | 0.12 | Opacity of the white body tint, from 0 to 1. | No |
All other div props (style, onClick, aria-*, ...) pass through to the surface.
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
