12 free glassmorphism components

A hero with glassy floating UI cards that drift continuously and shift on mouse-parallax depth around a staggered centre headline.

A frosted-glass button with a spring-animated light sweeping across its text and border.

A frosted hero backed by twin counter-rotating conic gradients, with flowing gradient text and an animated gradient-border stat card.

A frosted glass navbar floating over a colourful gradient hero backdrop, using backdrop blur and translucent borders for a modern overlay header.

The image sits behind a frosted-glass caption card.

A dark, glassy card accordion.

A frosted-glass alert over a subtle gradient.

Glassmorphic buttons over a gradient backdrop.

A frosted glassmorphism card over a soft gradient.

Glassmorphic tooltips with a frosted, semi-transparent backdrop. Reach for these on rich, image-heavy or colourful interfaces where a solid tooltip would feel heavy, letting the blurred surface sit softly over whatever content lies behind it.

A glassmorphic navigation bar that sticks to the top of the viewport with a frosted, translucent backdrop. Well suited to modern landing pages and product sites where the content beneath should show through subtly. The blurred background keeps links readable as the page scrolls.

Glassmorphic toast notifications with a frosted, semi-transparent panel. Choose these when you want lightweight alerts that sit elegantly over colourful or image-rich backgrounds. The blurred glass treatment lets the content behind show softly through each toast.