skills.rest
Catsofsuffering
CatsofsufferingCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

glassmorphism

Provide CSS tokens and patterns for frosted-glass UI components.

5|1|Updated Apr 8, 2026
Search Tags:#ui#accessibility#css#tokens#glassmorphism#design-system#backdrop-filter
One-click install
npx skills add https://github.com/Catsofsuffering/CCGS --skill glassmorphism-catsofsuffering
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: glassmorphism
Source: https://github.com/Catsofsuffering/CCGS/tree/main/templates/skills/domains/frontend-design/glassmorphism
Command: npx skills add https://github.com/Catsofsuffering/CCGS --skill glassmorphism-catsofsuffering

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a concise design system and CSS token reference for building consistent frosted-glass UI components, reducing time spent tuning blur, transparency, borders, shadows, and cross-browser fallbacks while ensuring accessibility.

Core Features & Use Cases

  • Design tokens and CSS: Centralized variables for backgrounds, blur levels, borders, radii, and shadows to keep theming consistent.
  • Component patterns: Ready examples and guidance for cards, navbars, modals, and buttons that use layered depth and translucency.
  • Browser compatibility and fallbacks: Recommendations for -webkit-backdrop-filter, @supports fallbacks for older Firefox, and practical fallback backgrounds.
  • Accessibility guidance: Contrast ratio targets, prefers-reduced-transparency and prefers-contrast media query patterns to accommodate users and maintain legibility.
  • Use case: Standardize a dashboard or marketing site to use cohesive glass components across light and dark themes while preserving performance and accessibility.

Quick Start

Import references/tokens.css into your project and apply the .glass-card class to an element to create a frosted-glass card using the recommended blur, border, and shadow tokens.

Frequently Asked Questions about glassmorphism

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

FAQPage Schema
How do I create accessible frosted-glass UI components with CSS?▼

Accessible frosted-glass UI components require consistent blur, transparency, border, and shadow CSS tokens combined with prefers-reduced-transparency media queries and contrast ratio targets to maintain text legibility.

What are the recommended CSS tokens for glassmorphism design systems?▼

Recommended CSS tokens for glassmorphism design systems include centralized variables for background alpha levels, backdrop-filter blur amounts, border radii, and shadow depths to keep component theming consistent across light and dark modes.

How do I handle backdrop-filter browser compatibility and fallbacks for glass cards?▼

Backdrop-filter browser compatibility requires -webkit-backdrop-filter prefixes and @supports fallbacks for older Firefox versions, applying practical solid fallback backgrounds to maintain layout integrity.

Does glassmorphism work for both desktop and mobile component libraries?▼

Glassmorphism works for desktop and mobile component libraries by applying frosted-glass patterns to cards, navbars, modals, and buttons, using layered depth and translucency that adapt across different screen scales.

Why does frosted-glass transparency cause accessibility issues and how do I fix it?▼

Frosted-glass transparency causes accessibility issues when background images reduce text contrast, fixed by applying prefers-contrast media query patterns and adjusting alpha transparency levels to meet legibility targets.

What is the best way to standardize glass UI components across light and dark themes?▼

Standardizing glass UI components across light and dark themes involves importing centralized CSS token references for blur and shadow variables, then applying consistent frosted-glass classes to dashboard and marketing site elements.

Related Skills

Explore More Design & Creative Skills→
grasberggrasberg
3

tailwind-patterns

Adopt a CSS-first Tailwind v4 approach with token-driven theming and container queries.

Community
Intermediate
GatsbyhateyouGatsbyhateyou

glassmorphism

Generate frosted glass UI elements with adjustable blur and transparency using Tailwind CSS.

Community
Basic
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-reduced-motion

Detect CSS animations and transitions lacking prefers-reduced-motion media query coverage.

Community
Intermediate
thompson0012thompson0012
28

liquid-glass-design

Implement Apple-like liquid glass UI effects using CSS and SVG refraction.

Community
Advanced