← 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

Traditional design creates depth by stacking shadows under elements. Glassmorphism creates depth through transparency — you can see what's behind the element through it. This makes the interface feel spatial and layered in a way that shadows alone can't achieve.

02

The background is part of the design

Glassmorphism doesn't work without a strong background. The gradient, image, or blur behind the glass elements isn't decoration — it's what makes the glass effect visible. The background and the UI are designed together, not separately.

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
01Open your Claude project
02Click 'Add files' in the Project Knowledge panel
03Drop in SKILL.md and DESIGN.md
04Start a new chat in the project — Claude follows the spec
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 — Cursor references both files per request
★ 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

Two files. That's it.

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

↓ SKILL.MD↓ DESIGN.MD