skills.rest
wzyxdwll
wzyxdwllCOMMUNITY
Explore all skills by this author →
GitHub

glassmorphism

Implement glassmorphism UI patterns with CSS backdrop-filter and tokens.css variables.

14|1|Updated May 6, 2026
Search Tags:#transparency#glassmorphism#ui-design#design-system#css-tokens#blur
One-click install
npx skills add https://github.com/wzyxdwll/ccgx-workflow --skill glassmorphism-wzyxdwll
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: glassmorphism
Source: https://github.com/wzyxdwll/ccgx-workflow/tree/main/templates/skills/domains/frontend-design/glassmorphism
Command: npx skills add https://github.com/wzyxdwll/ccgx-workflow --skill glassmorphism-wzyxdwll

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Glassmorphism design provides a visually rich, semi-transparent UI layer with blur and depth, enabling modern interfaces while maintaining readability and consistency across components.

Core Features & Use Cases

  • Four core elements: transparency, blur, border, and shadow to achieve frosted-glass effects.
  • CSS tokens and theming using tokens.css to ensure consistent visuals across themes.
  • Use cases include cards, modals, nav bars, and overlays that require depth without sacrificing legibility.

Quick Start

Create a glassmorphism card using the provided tokens.css and sample CSS from the Glassmorphism Design Spec.

Frequently Asked Questions about glassmorphism

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create glassmorphism UI components with CSS blur and transparency?▼

Glassmorphism UI components use four core elements: transparency, blur, border, and shadow to achieve frosted-glass effects. You can implement them quickly using CSS backdrop-filter with rgba or hsla color tokens.

What is the best way to maintain consistency for glassmorphism cards across different web themes?▼

To maintain consistency for glassmorphism surfaces across themes, use tokens.css variables. These design tokens ensure your blur, transparency, and shadow values remain visually coherent across different theme configurations.

Can I use glassmorphism design patterns in React, Vue, and Svelte projects?▼

Yes, glassmorphism design patterns are applicable across React, Vue, Svelte, and plain HTML/CSS projects. The implementation relies on standard CSS backdrop-filter and color tokens, making it compatible with any web framework.

Does glassmorphism CSS work with accessibility and browser compatibility guidelines?▼

Yes, implementing glassmorphism with CSS backdrop-filter follows accessibility and browser compatibility guidelines. Using rgba and hsla color tokens ensures text legibility is maintained over frosted-glass surfaces.

When should I use glassmorphism for modals and navbars instead of solid surfaces?▼

Use glassmorphism for modals, nav bars, and overlays when you need visual depth without sacrificing content legibility. The semi-transparent blur effect creates distinct surface layers while keeping underlying content readable.

Why do I need tokens.css variables to build a frosted-glass effect?▼

You need tokens.css variables to build frosted-glass effects because they provide cross-theme consistency for your rgba and hsla color values. This ensures your transparency and blur settings remain uniform across all UI components.

Related Skills

Explore More Design & Creative Skills→
333-333-333333-333-333

corporate-colors

Define corporate color palettes with Catppuccin warm tones for web and mobile theming.

Community
Advanced
broomvabroomva
3

arcan-glass

Implement glassmorphism and dark-first themes with OKLCh tokens for Next.js and Tailwind CSS v4.

Community
Intermediate
GeneralJerelGeneralJerel

Glassmorphism Design Style

Create frosted-glass UI surfaces with backdrop blur and translucent backgrounds.

Community
Intermediate
guilhermemarketingguilhermemarketing
59

progressive-blur

Create layered CSS progressive blur effects with backdrop-filter masks.

Community
Intermediate