Mastering Modern CSS: Glassmorphism, Container Queries, and Dark Mode

1. The Anatomy of Glassmorphism

True glassmorphism relies on four harmonious visual layers:

• Translucency: Semi-transparent background color (`rgba(17, 22, 37, 0.75)`).
• Backdrop Filter Blur: `backdrop-filter: blur(12px)` to soften objects passing behind the container.
• Subtle Border Highlight: A thin 1px border with slight white or glowing opacity (`rgba(255, 255, 255, 0.08)`).
• Elevation Shadow & Glow: Soft drop shadow combined with an accent radial glow on hover.

/* Standard Production Glassmorphism Card */
.glass-card {
  background: rgba(17, 22, 37, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(99, 102, 241, 0.2);
}

2. Modern Dark Mode Architecture

When building dark mode design systems, avoid harsh pure black (`#000000`) surfaces which create eye fatigue and visual vibration against bright text. Instead, use deep blue-tinted dark slates (`#0a0d14` and `#111625`).

By declaring color-scheme: dark light on `:root`, browser default form controls, scrollbars, and select popups automatically switch to dark mode native renders:

:root {
  color-scheme: dark light;
  --bg-main: #0a0d14;
  --text-main: #f8fafc;
}

[data-theme="light"] {
  color-scheme: light;
  --bg-main: #f8fafc;
  --text-main: #0f172a;
}

3. Container Queries for Modular Components

Instead of relying solely on viewport media queries (`@media (max-width: 768px)`), container queries evaluate layout constraints based on the parent component's width:

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .article-card {
    display: flex;
    flex-direction: row;
  }
}