skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

glass-dark-ui

Build dark-mode glassmorphism interfaces with frosted panels and masked gradient borders.

5.7k|685|Updated Feb 3, 2026
Search Tags:#CSS#glassmorphism#Tailwind#backdrop-filter#gradient border#UI Design#Dark mode
One-click install
npx skills add https://github.com/MengTo/Skills --skill glass-dark-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: glass-dark-ui
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/glass-dark-ui
Command: npx skills add https://github.com/MengTo/Skills --skill glass-dark-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Dark glassmorphism UIs often suffer from poor contrast, muddy blur layers, and inconsistent border treatments. This Skill provides a proven token system, CSS patterns, and a checklist for building readable dark glass interfaces with frosted surfaces and gradient glow borders.

Core Features & Use Cases

  • Dark UI Token System: Predefined CSS custom properties for backgrounds, glass fills, text colors, and accents that you tune per brand.
  • Glass Panel & Border Patterns: Copy-ready CSS for backdrop-filter frosted panels and a pseudo-element masked gradient border (.border-gradient::before), plus a Tailwind usage example.
  • Dark Mode Checklist: Contrast minimums, glow restraint, focus ring visibility, and a solid-background fallback for environments without blur support.
  • Use Case: When asked to "create a dark glass hero section with glowing border cards" or "convert this bright UI to dark glassmorphism without losing contrast," the Skill supplies the exact tokens, patterns, and validation steps.

Quick Start

Use the glass-dark-ui skill to build a dark frosted glass hero section with gradient border cards in HTML and CSS.

Frequently Asked Questions about glass-dark-ui

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

FAQPage Schema
How do I create a glassmorphism card in CSS?▼

Apply a semi-transparent dark background, backdrop-filter: blur(18px) saturate(140%), a large border-radius, and a subtle inset highlight shadow. The Skill provides a complete .glass-panel pattern with these values ready to copy.

How to add a gradient border to a glass card in CSS?▼

Use a ::before pseudo-element with padding: 1px, a linear-gradient background, and a mask-composite trick so only the border ring shows the gradient. The Skill's .border-gradient pattern implements this with pointer-events disabled.

Can I use glassmorphism with Tailwind CSS?▼

Yes. Combine Tailwind utilities like bg-slate-950/45, backdrop-blur-xl, rounded-3xl, and custom shadow values with the border-gradient class. The Skill includes a complete Tailwind HTML example for a frosted panel.

Why is my dark glass UI hard to read?▼

Low contrast usually comes from text below #cbd5e1 on dark glass, pure black overlays over blur, or excessive glow. Keep body text light, use deep navy alpha fills, and limit glow radius to preserve readability.

Does backdrop-filter blur work in all browsers?▼

No, some environments lack backdrop-filter support. Provide a fallback with a stronger solid background such as a higher-opacity glass fill variable so panels remain readable without the blur effect.

Related Skills

Explore More Design & Creative Skills→
nazlicancaglarnazlicancaglar

visual-design-system

Translate brand visual identity into tokenized CSS custom properties and design tokens.

Community
Advanced
GovTechSGGovTechSG
18

sgds-blocks

Compose SGDS page layouts using reusable UI blocks with sgds-templates.

Official
Intermediate
moughamirmoughamir

tailwindcss-accessibility

Implement WCAG 2.2 accessibility patterns in Tailwind interfaces with ARIA attributes.

Community
Basic
tylerwindtylerwind
47

ui-neumorphic-design

Apply dual shadows, soft highlights, and typography rules for neumorphic UI styling.

Community
Basic