CSS Glassmorphism and Neumorphism with Box Shadow

Glassmorphism and neumorphism are the two most-shared CSS design trends of the past few years. Both rely heavily on box-shadow. Here is how each works and the exact CSS to build them.

What Is Glassmorphism

Glassmorphism simulates frosted glass. Cards appear as translucent sheets of tinted glass with blurred backgrounds behind them. Key properties: semi-transparent background, backdrop-filter blur, and a subtle box-shadow for depth.

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  padding: 32px;
}

The box-shadow here grounds the card against the blurred background. Without it, the transparent card has no spatial anchor and looks undefined.

Performance note: backdrop-filter can cause significant slowdowns on iOS Safari. See the warnings section below before shipping.

Glassmorphism on Dark Backgrounds

The classic glassmorphism uses a dark gradient or image background with white-tinted glass cards. Complete example:

.glass-container {
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  padding: 60px 40px;
  min-height: 300px;
}

.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}

The inset top shadow creates a subtle top-edge highlight, simulating light reflecting off the glass surface.

Sell Custom Apparel — We Handle Printing & Free Shipping

What Is Neumorphism

Neumorphism (soft UI) simulates physical surfaces. Elements look extruded or embossed from the background rather than layered on top of it. This requires two shadows — one dark (shadow side) and one light (highlight side) — on a background-matching surface.

/* Both element and container must share the same background color */
body {
  background: #e0e5ec;
}

.neu-card {
  background: #e0e5ec;
  border-radius: 16px;
  box-shadow:
    6px 6px 12px #b8bec7,   /* dark shadow — bottom-right */
    -6px -6px 12px #ffffff; /* light shadow — top-left */
}

The element and container must have identical background colors. The two shadows create the illusion that the element is the same material as the surface — just raised from it.

Neumorphism Pressed State

Neumorphic buttons have two states: raised (default) and pressed (active). Pressed reverses the shadow direction using inset shadows.

.neu-button {
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow:
    5px 5px 10px #b8bec7,
    -5px -5px 10px #ffffff;
  border: none;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

.neu-button:active {
  box-shadow:
    inset 4px 4px 8px #b8bec7,
    inset -4px -4px 8px #ffffff;
}

The active state replaces outer shadows with matching inset shadows. The element appears to sink into the surface on click.

Performance and Accessibility Warnings

Glassmorphism and backdrop-filter: backdrop-filter triggers GPU compositing and can cause significant performance issues on iOS Safari, particularly on older devices. Use a solid fallback:

@supports not (backdrop-filter: blur(1px)) {
  .glass-card {
    background: rgba(20, 20, 40, 0.85);
  }
}

Neumorphism and contrast: Neumorphic UIs have famously poor accessibility contrast. The light-on-light shadow style often fails WCAG AA requirements. If your project requires accessibility compliance, neumorphism needs significant adjustments.

Both trends: Work only in their intended light conditions. Glassmorphism requires a rich background. Neumorphism requires a specific background color match. Neither translates well to arbitrary color themes.

Frequently Asked Questions

What is the difference between glassmorphism and neumorphism?

Glassmorphism creates frosted glass transparency using backdrop-filter and semi-transparent backgrounds. Neumorphism creates extruded-from-surface effects using dual light and dark shadows on a background-matching element. They are visually and technically distinct.

Can I combine glassmorphism and neumorphism?

They are aesthetically incompatible. Glassmorphism is about transparency and blur. Neumorphism is about solid surface extrusion. Combining them produces incoherent results. Pick one style per UI.

Why does my neumorphic design look flat?

The element and container background colors must match exactly. Any mismatch breaks the effect. Also ensure the dark and light shadows are symmetrically opposite — same blur, same distance, opposite directions.