Glass Effects

Frosted glass cards, navbars, modals, buttons and layered glass — ready to copy.

15 effects
Frosted Light
Glass component

Frosted Light

Classic frosted glass on a gradient background — translucent white with blur.

lightDetails
Frosted Dark
Glass component

Frosted Dark

Dark glass panel with deep blur — ideal for overlays on rich backgrounds.

darkDetails
Tinted Purple
Glass component

Tinted Purple

Colored glass tint — a purple hue frosted panel with matching border glow.

tintedDetails
Tinted Cyan
Glass component

Tinted Cyan

Cyan-tinted frosted glass panel — electric and vivid.

tintedDetails
Glass Navbar
Glass component

Glass Navbar

Sticky frosted navbar with blur and hairline border — a SaaS staple.

componentDetails
Glass Modal
Glass component

Glass Modal

Full glassmorphism modal overlay with blurred backdrop and gradient border.

componentDetails
Glass Button
Glass component

Glass Button

Frosted glass button with hover highlight effect.

interactiveDetails
Glass Input
Glass component

Glass Input

Floating glass input field with focus ring and translucent fill.

interactiveDetails
Highlight Card
Glass component

Highlight Card

Glass card with a bright inner top highlight simulating refracted light.

cardDetails
Glass Tag/Badge
Glass component

Glass Tag/Badge

Compact frosted badge / tag — perfect for labels on dark backgrounds.

componentDetails
Glass Sidebar
Glass component

Glass Sidebar

Vertical frosted sidebar panel with translucent items and hover state.

layoutDetails
Gradient Border Glass
Glass component

Gradient Border Glass

Glass card wrapped in a vivid gradient border using padding technique.

cardDetails
Glass Notification
Glass component

Glass Notification

Floating frosted notification toast — perfect for alerts and messages.

componentDetails
Glass Tooltip
Glass component

Glass Tooltip

Frosted tooltip that appears on hover — with a subtle arrow using CSS.

componentDetails
Layered Glass
Glass component

Layered Glass

Stacked glass panels at different opacity levels to simulate depth.

advancedDetails