Glassmorphism & Neumorphism Generator Guide: Soft UI CSS

Glassmorphism — Frosted Glass Effect

Glassmorphism creates the illusion of a frosted glass panel floating above a background — used prominently in Apple's macOS, iOS, and Windows 11 design languages.

The core CSS:

.glass-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%); /* Safari */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

The Four Properties

backdrop-filter: blur() — blurs everything behind the element. Values: 4–24px for subtle to heavy frost.

background: rgba() — semi-transparent fill that tints the blurred background. Light backgrounds use rgba(255, 255, 255, 0.1–0.3), dark themes use rgba(15, 15, 15, 0.3–0.5).

border — thin, semi-transparent border catches light and defines the glass edge. Without it, the card blurs into its background.

box-shadow — ambient shadow for depth. Combined with an inset highlight on the top edge creates the backlit glass effect.

Adding Noise Grain for Texture

Flat glass looks artificial. Real frosted glass has grain. Add it with SVG noise:

.glass-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,..."); /* SVG noise */
    opacity: 0.04;
    border-radius: inherit;
    pointer-events: none;
}

Noise at 2–5% opacity adds physical texture without distracting from content.

Browser Compatibility

Always include both -webkit-backdrop-filter and backdrop-filter. For Firefox pre-103, backdrop-filter has no fallback — design the card to be legible without the blur effect.

/* Fallback for unsupported browsers */
@supports not (backdrop-filter: blur(1px)) {
    .glass-card {
        background: rgba(255, 255, 255, 0.85);
    }
}

Neumorphism — Soft Tactile Surfaces

Neumorphism simulates extruded or recessed surfaces by casting dual box shadows — one light (highlight) and one dark (shadow) — in opposite directions from a base background color:

/* Raised / convex element */
.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 */
}

/* Pressed / concave element */
.neu-pressed {
    background: #e0e5ec;
    box-shadow:
        inset 6px 6px 12px #b8bec7,
        inset -6px -6px 12px #ffffff;
}

The Shadow Math

The dark shadow is typically 20–30% darker than the background. The light shadow is 20–30% lighter. Both shadows originate from the same corner — top-left light source casting bottom-right dark shadow and top-left light shadow.

/* Background: #e0e5ec */
/* Dark shadow: darken by 20% → #b8bec7 */
/* Light shadow: lighten by 20% → #ffffff */

Shadow Shapes

Tailwind CSS Export

Our generator outputs both raw CSS3 and Tailwind utility classes:

<!-- Glassmorphism card in Tailwind -->
<div class="bg-white/15 backdrop-blur-xl border border-white/20 rounded-2xl shadow-lg">
    Content here
</div>

<!-- Neumorphism in Tailwind (requires custom shadows in tailwind.config) -->
<div class="bg-[#e0e5ec] rounded-2xl shadow-[6px_6px_12px_#b8bec7,-6px_-6px_12px_#ffffff]">
    Content here
</div>

Accessibility Pitfalls

Glassmorphism contrast failure

A frosted glass panel over a colorful gradient can have inadequate contrast between text and the glass background — especially when the background shifts behind a moving element. Always:

• Fix the text/glass background contrast at the lightest point of the underlying gradient
• Test with our Contrast Checker — minimum 4.5:1 for normal text
• Add a subtle dark text shadow for additional legibility margin

Neumorphism contrast failure

Neumorphism's light-on-light palette is its biggest problem: the subtle shadow differences that define interactive states are often invisible to users with low contrast sensitivity or in bright ambient light. WCAG's minimum 3:1 ratio for UI components is difficult to achieve with pure neumorphism.

Solutions:

• Use neumorphism for decorative non-interactive elements only
• Add clear color-based focus rings for interactive elements
• Use neumorphism as an accent style, not the entire design language

Document your design system's glass and neumorphism tokens in our Markdown Editor, and format the generated CSS with our CSS Formatter before adding to your codebase.