glassmorphism-design-style

name	Glassmorphism Design Style
description	Create stunning frosted glass UI effects with Glassmorphism—a modern design style using backdrop blur, semi-transparent backgrounds, and layered depth. Trigger this skill when designing modern dashboards, premium interfaces, overlay modals, cards on dynamic backgrounds, or contemporary UIs with visual depth.

What Is Glassmorphism?

Glassmorphism is a contemporary design style simulating frosted glass: semi-transparent surfaces with blurred backgrounds visible behind them. It creates visual depth, layering, and a premium aesthetic. Common in modern macOS/iOS, premium web apps, and design-forward products.

Why it works:

• Visual hierarchy: Layers with varying transparency create clear foreground/background relationships
• Premium feel: Frosted glass is elegant and modern
• Depth perception: Blur and transparency suggest layers stacking in 3D space
• Context awareness: Content behind shows through, adding visual richness

Core Design Principles

1. Backdrop Blur Is Essential The backdrop-filter: blur() CSS property is the heart of glassmorphism. Without it, you just have transparent surfaces. Blur amount: 8px–16px (stronger blur = more readability over dynamic backgrounds).

2. Semi-Transparency Over Solid Color Always layer transparency over a background: background: rgba(255, 255, 255, 0.15) (white at 15% opacity). This creates the frosted effect. Opacity typically 10%–25%.

3. Subtle Borders Define Edges A thin, light border (1px white at 20% opacity) separates glass from surroundings. Prevents the element from disappearing into the background.

4. Readability First Dark, dynamic backgrounds require lighter glass. Light backgrounds may need slightly darker glass. Always test text contrast. Minimum 4.5:1 ratio (WCAG AA).

5. Layered Depth Stack elements with slightly different opacity/blur. Foreground elements brighter/sharper, background elements dimmer/blurred.

Visual Language

Core CSS Recipe:

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

Color Palette:

• White glass (light backgrounds): rgba(255, 255, 255, 0.15)
• Frosted white (more opaque): rgba(255, 255, 255, 0.25)
• Dark glass (dark backgrounds): rgba(20, 20, 30, 0.15)
• Border light: rgba(255, 255, 255, 0.2)
• Border dark: rgba(0, 0, 0, 0.15)

Typography Over Glass:

• White text on light glass: ensure sufficient blur/opacity
• Dark text: use drop shadows or text-shadow: 0 2px 8px rgba(0,0,0,0.3)
• Font weight: 500+ (bolder text maintains readability)

Spacing:

• Padding: 16px, 24px, 32px (breathing room inside glass containers)
• Border-radius: 12px–20px (softer edges feel more premium)
• Gap between glass elements: 16px–24px

Shadows (subtle):

• Inner: inset 0 1px 2px rgba(255, 255, 255, 0.2) (subtle highlight at top)
• Outer: 0 4px 16px rgba(0, 0, 0, 0.1) (soft shadow for separation)

Component Patterns

Glass Card

Floating container for content.

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

.glass-card h2 {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.glass-card p {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

Glass Navigation Bar

Header with glass effect over a hero image.

.glass-navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(20, 20, 40, 0.15);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 24px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.glass-navbar a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: opacity 150ms ease;
}

.glass-navbar a:hover {
  opacity: 0.8;
}

Glass Button

Interactive button with glass styling and hover effects.

.glass-button {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: white;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 200ms ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.glass-button:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.glass-button:active {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(0.98);
}

Glass Input Field

Form input with frosted effect.

.glass-input {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 12px 16px;
  color: white;
  font-size: 14px;
  transition: all 150ms ease;
}

.glass-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.glass-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

Code Generation Guidance

Use Glassmorphism when:

• Designing modern, premium UIs
• Creating overlays/modals over dynamic/image backgrounds
• Building dashboards with card-based layouts
• Designing contemporary mobile/web apps
• Creating hero sections with content overlays

React patterns:

// Glass card component
function GlassCard({ title, children }) {
  return (
    <div className="glass-card">
      <h2>{title}</h2>
      {children}
    </div>
  );
}

// Apply glass class with inline styles
<div style={{
  background: 'rgba(255, 255, 255, 0.15)',
  backdropFilter: 'blur(12px)',
  border: '1px solid rgba(255, 255, 255, 0.2)',
  borderRadius: '16px',
  padding: '24px'
}}>
  Content here
</div>

Critical CSS Rules:

1. Always include backdrop-filter: blur(12px) — this is the signature effect
2. Pair with semi-transparent background: rgba(255,255,255,0.15) or similar
3. Add border: 1px solid rgba(255,255,255,0.2) for definition
4. Test text readability; add text-shadow if needed
5. Use border-radius: 12px or higher for modern feel

Browser Support:

• backdrop-filter requires Safari 9+, Chrome 76+, Firefox 103+
• Fallback: Apply semi-transparent background without blur for older browsers

@supports not (backdrop-filter: blur(1px)) {
  .glass {
    background: rgba(255, 255, 255, 0.25); /* Slightly more opaque fallback */
  }
}

Accessibility

• Contrast: Always ensure 4.5:1 text-to-background ratio. Use text-shadow or darker backgrounds for light text.
• Focus states: Make focusable elements clear with visible focus ring: outline: 2px solid rgba(255,255,255,0.5)
• Avoid blur overload: Blur over text reduces readability. Use sparingly; prefer blurred backgrounds only.
• Color alone: Don't rely solely on color differences. Use shadows, borders, spacing for distinction.
• Motion: Avoid rapid backdrop-filter changes; use gentle transitions (200ms+).

Examples

Example 1: Glass Modal Over Hero Image

Input: "Create a modal dialog with glass effect that floats over a dynamic background image"

<div style="
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
">
  <div style="
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 32px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  ">
    <h2 style="
      color: white;
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 16px;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    ">
      Join our community
    </h2>
    <p style="
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.6;
      margin-bottom: 24px;
    ">
      Get early access to new features and exclusive updates.
    </p>
    <input
      type="email"
      placeholder="[e-mail]"
      style="
        width: 100%;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        padding: 12px 16px;
        color: white;
        margin-bottom: 16px;
        font-size: 14px;
      "
    />
    <button style="
      width: 100%;
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 8px;
      color: white;
      padding: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 200ms ease;
    ">
      Subscribe
    </button>
  </div>
</div>

Example 2: Glass Dashboard Cards with Metrics

Input: "Design a dashboard with glass cards showing metrics, each with an icon and trend indicator"

export function GlassDashboard() {
  const metrics = [
    { title: 'Revenue', value: '$12,450', trend: '+12%' },
    { title: 'Users', value: '2,340', trend: '+8%' },
    { title: 'Sessions', value: '5,129', trend: '-3%' }
  ];

  return (
    <div style={{
      backgroundImage: 'url("dashboard-bg.jpg")',
      backgroundSize: 'cover',
      minHeight: '100vh',
      padding: '32px'
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
        gap: '24px'
      }}>
        {metrics.map(metric => (
          <div key={metric.title} style={{
            background: 'rgba(255, 255, 255, 0.15)',
            backdropFilter: 'blur(12px)',
            border: '1px solid rgba(255, 255, 255, 0.2)',
            borderRadius: '16px',
            padding: '24px',
            boxShadow: 'inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1)',
            transition: 'all 300ms ease'
          }}>
            <p style={{
              color: 'rgba(255, 255, 255, 0.7)',
              fontSize: '12px',
              fontWeight: '600',
              textTransform: 'uppercase',
              marginBottom: '8px'
            }}>
              {metric.title}
            </p>
            <h3 style={{
              color: 'white',
              fontSize: '28px',
              fontWeight: '700',
              margin: '0 0 12px 0',
              textShadow: '0 2px 8px rgba(0, 0, 0, 0.3)'
            }}>
              {metric.value}
            </h3>
            <p style={{
              color: metric.trend.startsWith('+') ? '#90EE90' : '#FF6B6B',
              fontSize: '14px',
              fontWeight: '600'
            }}>
              {metric.trend}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}