Why We Chose Glassmorphism (And How to Implement It Accessibly)

What is Glassmorphism?

Glassmorphism is a design trend featuring:

Transparency: Semi-transparent backgrounds (like frosted glass)
Backdrop blur: Blurring of content behind elements
Subtle borders: Thin lines defining edges
Layered depth: Multiple transparent layers create depth

💡 Visual Example

On Neorgon's hub, every tool card uses glassmorphism:

background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(12px);

The starfield and orbs behind the cards blur through, creating that "glass" effect.

Why We Chose It

1. Aesthetic Differentiation

Most developer tools look the same-dark mode, solid cards, neon accents. Glassmorphism makes Neorgon memorable.

2. Visual Hierarchy

Transparency naturally communicates layering:

Background (starfield) - furthest back
Tool cards - middle layer
Search/search results - top layer

3. It Scales

With 31 tools having different accent colors, glassmorphism creates visual unity while letting each tool's personality show through.

CSS Implementation

Basic Glass Card

CSS

.glass-card {
  /* Semi-transparent background */
  background: rgba(255,255,255,.03);

  /* Subtle border */
  border: 1px solid rgba(255,255,255,.08);

  /* Backdrop blur effect */
  backdrop-filter: blur(12px);

  /* Rounded corners */
  border-radius: 16px;
}

Hover Enhancement

CSS Hover State

.glass-card:hover {
  /* Slightly more opaque on hover */
  background: rgba(255,255,255,.06);

  /* More visible border */
  border-color: rgba(255,255,255,.15);

  /* Subtle glow - matches category color */
  box-shadow: 0 8px 32px rgba(176,21,176,.15);
}

Accessibility Challenges

1. Color Contrast

Problem: Text on transparent backgrounds can fail WCAG AA contrast ratios.

Solution: Solid Text, Transparent Cards

/* Cards are transparent, but text is solid */
.glass-card {
  background: rgba(255,255,255,.03); /* Glass effect */
}

.card-content {
  color: #f0f4ff; /* Pure white, always 4.5:1 contrast */
  background: transparent; /* But container is glass */
}

2. Reduced Motion

Problem: Glass with animation can cause dizziness.

Solution: Remove Glass on Reduced Motion

@media (prefers-reduced-motion: reduce) {
  .glass-card {
    /* Remove transparency */
    background: rgba(0,9,18,.95);

    /* Remove blur */
    backdrop-filter: none;

    /* Keep subtle border for definition */
    border-color: rgba(255,255,255,.15);
  }
}

3. Performance

Problem: backdrop-filter is GPU-intensive and can drop frames.

Solution: Use Where It Matters

/* Only use on interactive elements */
.site-card { backdrop-filter: blur(12px); }
.button { backdrop-filter: none; } /* Skip on buttons */

/* Disable on mobile for better scrolling */
@media (max-width: 768px) {
  .site-card { backdrop-filter: none; }
  .site-card { background: rgba(255,255,255,.08); }
}

4. Browser Support

Problem: backdrop-filter doesn't work in Firefox without flags.

Solution: Graceful Degradation

.glass-card {
  background: rgba(255,255,255,.08); /* Fallback: darker */
  backdrop-filter: blur(12px); /* Progressive enhancement */
}

@supports (backdrop-filter: blur(12px)) {
  .glass-card {
    background: rgba(255,255,255,.03); /* Lighter with blur */
  }
}

Color Strategy

We use a 4-tier color system for glassmorphism:

CSS Variables

:root {
  --bg: #000912;               /* Pure black background */
  --surface: rgba(255,255,255,.03); /* Glass cards */
  --surface-hover: rgba(255,255,255,.06); /* Glass hover */
  --text-primary: #f0f4ff;     /* Pure white text */
  --text-secondary: #8fa0c0;   /* Muted text */
  --border: rgba(255,255,255,.08); /* Card borders */
  --border-glow: rgba(255,255,255,.15); /* Hover borders */
  --accent: #B015B0;           /* Purple accent */
}

Accent Colors for Tools

Each tool category uses glassmorphism with different tint colors:

Planning (Green): Pathfinder, Skill Map
Productivity (Orange): Slides, OG Studio
Learning (Cyan): Agent Lore, Anatomy
Fun (Red): Memes, Decision Wheel

Subtle Enhancements

Gradient Borders

Linear Gradient Effect

.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 16px;
  padding: 1px; /* Creates border */
  background: linear-gradient(135deg,
    rgba(176,21,176,.35) 0%,
    rgba(61,0,128,.35) 50%,
    rgba(8,0,16,.35) 100%
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

Common Pitfalls

❌ Mistake 1: Too Much Transparency

/* ❌ Background almost invisible */
background: rgba(255,255,255,.01);

Fix: Use semantic levels (0.03 for normal, 0.06 for hover, 0.12 for active)

❌ Mistake 2: No Fallback

/* ❌ Glass on white background = invisible */
body { background: #fff; }
.card { backdrop-filter: blur(12px); }

Fix: Always use dark background with glass on dark

❌ Mistake 3: Overusing Blur

/* ❌ Applying to everything */
* { backdrop-filter: blur(12px); }

Fix: Only blur interactive elements, keep static content solid

The Accessibility Checklist

Before deploying glassmorphism:

✅ Text contrast ratio ≥ 4.5:1 (test with WebAIM)
✅ Works with prefers-reduced-motion enabled
✅ Fallback for Firefox (40% market share)
✅ No performance jank on mobile (test with 6x CPU throttle)
✅ Content readable without blur (disabling backdrop-filter shouldn't break layout)
✅ Test with keyboard navigation (focus rings visible on glass)

Neorgon Engineering

Building open-source tools for real problems. No paywalls, no signup, no nonsense.