skills.rest
guideops
guideopsCOMMUNITY
Explore all skills by this author →
GitHub

glassmorphism

Implement glassmorphism effects on UI elements with color and typography guidelines.

Updated Jun 23, 2026
Search Tags:#typography#design system#color theory#UI design#glassmorphism
One-click install
npx skills add https://github.com/guideops/agentic-shared --skill glassmorphism-guideops
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: glassmorphism
Source: https://github.com/guideops/agentic-shared/tree/main/skills/awesome-design-skills/styles/glassmorphism
Command: npx skills add https://github.com/guideops/agentic-shared --skill glassmorphism-guideops

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill empowers designers to implement a modern, visually engaging glassmorphism effect in their work, enhancing the depth and elegance of interfaces.

Core Features & Use Cases

  • Implement Glassmorphism: Apply the glassmorphism effect to UI elements for depth and modern aesthetics.
  • Customize Colors & Fonts: Utilize a comprehensive color palette and typography guidelines for consistency.
  • Responsive Design: Ensure the glassmorphism effect is visually appealing across various devices and resolutions.
  • Use Case: Enhance the user experience of a mobile app's login screen with a glassmorphism overlay for a sleek look.

Quick Start

Create a glassmorphism effect on a button in your design using the provided color tokens and typography.

Frequently Asked Questions about glassmorphism

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

FAQPage Schema
How do I implement glassmorphism design in my UI elements?▼

To implement glassmorphism design, this Skill provides specific color tokens, typography guidelines, and best practices to create depth and modern aesthetics in your UI elements. It includes guidance for responsive design and accessibility.

What color and typography guidelines are needed for glassmorphism?▼

Glassmorphism requires a comprehensive color palette and specific typography guidelines to maintain consistency. This Skill provides predefined color tokens and font rules to ensure your UI elements achieve the desired depth and elegant visual style.

Does glassmorphism UI design work responsively across different devices?▼

Yes, glassmorphism UI design can work responsively across various devices and resolutions. This Skill includes specific design considerations to ensure the visual effect remains appealing and functional on different screen sizes.

Can I apply glassmorphism to a mobile app login screen?▼

Yes, you can apply glassmorphism to a mobile app login screen to achieve a sleek look. The Skill outlines use cases like adding a glassmorphism overlay to enhance the user experience of mobile interfaces.

Do I need prior design experience to use this glassmorphism guide?▼

Yes, you need familiarity with design tools and principles to use this glassmorphism guide effectively. The Skill assumes you already understand basic UI design concepts before applying its color, typography, and accessibility best practices.

What are the accessibility limitations of glassmorphism in design systems?▼

Glassmorphism can present accessibility limitations due to its translucent layers and contrast levels. This Skill provides best practices for accessibility to ensure your depth effects do not compromise usability for users navigating your interface.

Related Skills

Explore More Design & Creative Skills→
mintuzmintuz
21

web-design

Guide UI design decisions with principles for layout, typography, color, and spacing.

Community
Basic
majesticlabs-devmajesticlabs-dev
47

frontend-design

Create distinctive frontend interfaces with typography, color, and motion guidelines.

Official
Advanced
booklib-aibooklib-ai
35

refactoring-ui

Apply Refactoring UI principles to improve visual hierarchy in UI designs.

Official
Intermediate
GatsbyhateyouGatsbyhateyou

glassmorphism

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

Community
Basic