This glassmorphism ui kit uses the Glass effect in Figma on cards, fields, the navbar and the modal, over a deep blue and violet gradient with soft glowing shapes.

What is included

• White and glass buttons with ghost and danger variants in five states and three sizes
• Glass text fields, textarea, select menu, checkbox, radio, toggle and slider
• Content, stat and profile cards, four tinted alerts, a toast and a modal
• A navbar, a command palette and a settings list on frosted panels
• Tabs, breadcrumb, pagination, avatars and an accordion

Where to use it

Use it for music and media apps, finance dashboards, landing pages and mobile screens that sit over rich backgrounds.

Design notes

Glass fills are 12 to 14 percent white with a 14 px frost, a thin light border and a soft shadow. The glow shapes use a layer blur of 400 so colors blend without edges. Text is white and light lilac. Test contrast on your own backgrounds, because glass changes with what sits behind it. The kit needs a Figma version that has the Glass effect.

Built for editing

Spacing sits on a 4 point grid and layers have clear names. Fonts are free on Google Fonts (Inter) and every color is a fill you can change in the fill panel. Text sizes stay at 12, 14, 16, 20 and 36 px, so the scale is easy to follow.

How to use it

Copy the kit with the copy button and paste it into Figma with Ctrl+V or Cmd+V. The layers keep their auto layout, so you can edit text, colors and spacing. Install the free Google Fonts first so the text looks the same.