← Back to Skills / Marketplace / glassmorphism
SKL · 02● FREE

Glassmorphism.

The frosted glass effect from iPhone notifications and Apple Vision Pro — layered, transparent, and immediately premium.

● Live preview · Glassmorphism demo
● This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

This is the frosted glass look — the same effect you see on iPhone notifications, the macOS menu bar, Apple Vision Pro, and every premium iOS app in the last three years. Elements look like sheets of frosted glass layered on top of each other, slightly transparent, with a soft blur behind them. It creates an immediate sense of depth and modernity that's very hard to achieve any other way. When someone looks at your app built with this skill and says "wait, how did you make it look like that?" — this is why.

● Looks Like
iPhone Control CenterApple Vision Pro UImacOS menu barSpotify overlaysPremium crypto dashboardsArc Browser
02 · Best For / Avoid If
＋ Best For
+Mobile-first apps and anything targeting iOS users
+Music, media, and entertainment apps
+Premium dashboards where the design is part of the product
+Anything with a strong background image or gradient underneath the UI
+Consumer apps targeting design-conscious audiences
× Avoid If
×Your app has a lot of text to read — the reduced contrast makes long-form reading uncomfortable
×You need to be WCAG accessibility compliant (low contrast is an inherent challenge)
×You're building something on a plain white background — glassmorphism needs a rich background to work against
×Your interface has dozens of small elements — too much glass creates visual chaos
03 · Design Philosophy
01

Depth without shadows

Glassmorphism creates depth through transparency — you can see what is behind the element through it. This gives the interface a spatial, layered quality that feels genuinely three-dimensional.

02

The background is part of the design

Glassmorphism requires a strong background. The gradient, image, or blur behind the glass elements is what makes the glass effect visible. The background and the UI are designed together.

03

Restraint makes it premium

The temptation with glassmorphism is to make everything glass. The skill works by using it selectively — key cards, modals, navbars, and overlays. Elements that ground the design (like solid text sections) stay opaque. The contrast between glass and solid is what makes the glass feel special.

04 · Use With Claude / Cursor
Claude
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build — Claude applies it automatically
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — mention the skill name to invoke it automatically
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
White background kills it
This style only works with a gradient, image, or dark/colored background. If you start with a white background the glass effect is invisible.
! WARNING
Too much glass
If every element is glass the depth collapses — everything looks like the same layer. Keep some elements solid.
! WARNING
Unreadable text
The transparency that makes glass look good also reduces text contrast. Ask Claude to add a subtle dark overlay or increase text weight if body text feels hard to read.
! WARNING
Browser performance
Heavy use of backdrop-filter blur can slow down the browser on older devices. Keep the number of glass elements reasonable.
● 07 · Download

Beautiful designs in minutes.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

↓ SKILL.MD↓ DESIGN.MD