AutoGineer
Generated banner for Glass Dark UI
Generated logo for Glass Dark UI

Glass Dark UI

Meng ToCommunityCreated by Meng To

  • Skill
  • Guidelines
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

Build dark-mode glassmorphism interfaces with readable contrast, frosted surfaces, and gradient borders using a pseudo-element mask. Use when asked for glass cards, frosted dark hero sections, blur panels, or dark UI systems with gradient/glow borders.
— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach to building premium dark-mode glassmorphism interfaces. It focuses on achieving high-contrast, readable designs using CSS backdrop filters, custom gradient border masks, and specific design tokens. The skill includes patterns for both standard CSS and Tailwind CSS, ensuring consistent application of frosted effects, depth, and glow across various UI components like cards, hero sections, and navigation bars.

What it does

  • Defines CSS tokens for consistent dark-mode glass surfaces.
  • Provides a reusable CSS pattern for frosted glass panels with backdrop-filter.
  • Implements a pseudo-element mask technique for gradient borders.
  • Offers a Tailwind CSS implementation for rapid component styling.
  • Includes a checklist for maintaining readability and contrast in dark UI.
  • Provides fallback strategies for environments without blur support.

When to use it

  • When building dark-mode dashboards or hero sections.
  • When you need to create glass-style cards with glowing borders.
  • When converting a bright UI to a premium dark glassmorphism aesthetic.
  • When you need to ensure accessibility and contrast in frosted UI elements.

Advantages

  • Ensures consistent visual language across UI components.
  • Uses modern CSS techniques for high-fidelity frosted effects.
  • Provides clear guidance on maintaining text readability on dark glass.
  • Includes both raw CSS and utility-first Tailwind patterns.

Usage examples

“Create a dark glass hero section with glowing border cards.”
The agent generates a layout using the glass-panel and border-gradient patterns, ensuring the hero section has a frosted background and the cards feature the requested glow.
“Add a border gradient glow to my existing frosted modal.”
The agent applies the .border-gradient pseudo-element mask to the modal component, maintaining the existing blur effects while adding the specified gradient border.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/mengto/glass-dark-ui/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip glass-dark-ui.zip -d .agents/skills

Documentation by Meng To

Glass Dark UI Skill

Workflow

  1. Confirm environment (HTML/CSS, Tailwind, or React) and target surface (hero, dashboard, modal, card).

  2. Define dark UI tokens first (background, glass fill, border glow, primary text, muted text).

  3. Build frosted panels with backdrop-filter, transparent dark fill, and subtle inner highlight.

  4. Apply the masked gradient border (.border-gradient::before) to key surfaces.

  5. Add restrained depth (shadow + glow) and clear hover/focus states.

  6. Validate contrast and mobile behavior before finalizing.

Base Tokens

Use these as defaults and tune per brand.

:root {
  --bg-0: #020617;
  --bg-1: #0b1220;
  --glass-fill: rgba(15, 23, 42, 0.45);
  --glass-fill-strong: rgba(15, 23, 42, 0.62);
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --accent: #60a5fa;
}

Glass Panel Pattern

.glass-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  background-color: var(--glass-fill);
  border-radius: 24px;
  box-shadow: 0 20px 48px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

Border Gradient Pattern

.border-gradient {
  position: relative;
}

.border-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background: linear-gradient(
    145deg,
    rgba(148, 163, 184, 0.28) 0%,
    rgba(96, 165, 250, 0.36) 45%,
    rgba(168, 85, 247, 0.3) 70%,
    rgba(148, 163, 184, 0.18) 100%
  );
  pointer-events: none;
}

Tailwind Usage Pattern

<section class="relative rounded-3xl border-gradient bg-slate-950/45 backdrop-blur-xl p-8 shadow-[0_20px_48px_rgba(2,6,23,0.45),inset_0_1px_0_rgba(255,255,255,0.12)]">
  <h2 class="text-slate-100 text-2xl font-semibold">Frosted Panel</h2>
  <p class="text-slate-400 mt-2">Dark glass card with masked gradient border.</p>
</section>

Dark Mode Checklist

  • Keep body text at least #cbd5e1 on dark glass surfaces.

  • Avoid pure black overlays over blur; use deep navy/charcoal alpha instead.

  • Limit glow radius/intensity to preserve readability.

  • Ensure focus rings are visible (outline or bright border state).

  • Add fallback for non-blur environments: stronger solid background (--glass-fill-strong).

Common Requests This Skill Should Handle

  • "Create a dark glass hero section with glowing border cards."

  • "Convert this bright UI to dark glassmorphism without losing contrast."

  • "Add border gradient glow to a frosted navbar/card/modal."

  • "Make my dark dashboard feel premium with glass panels and subtle depth."

Files

demo/PROMPT.md

Glass Dark UI Demo Prompts

Minimal prompt

Use $glass-dark-ui to create a polished standalone HTML example that clearly demonstrates the skill.

Recreate the demo

Use $glass-dark-ui to build a responsive reference demo for this capability:

Build dark-mode glassmorphism interfaces with readable contrast, frosted surfaces, and gradient borders using a pseudo-element mask. Use when asked for glass cards, frosted dark hero sections, blur panels, or dark UI systems with gradient/glow borders.

Direction

Compare the treatment across a hero surface, compact control, and detail card.

Use an art-directed composition with one clear focal point, restrained supporting copy, and enough surrounding interface to show how the technique behaves in a real product or landing page.

Canonical example

  • Show the treatment on a large Depth without noise surface, one compact metric card, and one control.

  • Use the same edge, shadow, blur, or masking logic consistently across all three scales.

Deliverable

  • Create demo/index.html as a standalone document.

  • Keep CSS and JavaScript inline.

  • Put any required images, fonts, models, textures, or vendor files in demo/assets/.

  • Do not add a framework, package manager, build step, or node_modules.

  • Add controls only when they help inspect or replay the technique.

Acceptance checks

  • Keep the demo responsive from 390px through 1440px.

  • Use semantic HTML, visible focus states, and reduced-motion handling.

  • Keep all HTML, CSS, and JavaScript inside demo/index.html.

  • Use only relative local asset paths.

  • Preserve readable contrast at the softest and strongest treatment levels.

  • Avoid clipping focus rings or interactive content.

Remix prompt

Use $glass-dark-ui and keep the same implementation contract, but change the subject, copy, palette, and content hierarchy. Preserve the core technique, accessibility behavior, responsive rules, and performance constraints demonstrated by the reference.

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/glass-dark-ui · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To or Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download glass-dark-ui.zip