Glasssystem

Glass Morphism

62
🔥 Certified BangerThis prompt produces genuinely distinct output

Generates UI with frosted-glass surfaces, backdrop blur, translucent layers, and soft gradients — depth created through transparency, not shadows. Light, airy, and dimensional.

cardsmodalsoverlaystranslucent

Added February 8, 2026 by unslop.dev

Example output

Glass card on gradient

♦

Cloud Storage

2.4 GB of 10 GB used

Your files are synced across all devices. Upgrade your plan for more storage and priority support.

View code
<div style="padding: 3rem; background: linear-gradient(135deg, #e0e7ff, #fce7f3, #dbeafe); min-height: 20rem; display: flex; align-items: center; justify-content: center;">
  <div style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); padding: 2rem; max-width: 22rem;">
    <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem;">
      <div style="width: 2.5rem; height: 2.5rem; border-radius: 12px; background: rgba(139, 92, 246, 0.15); display: flex; align-items: center; justify-content: center; font-size: 1.125rem;">&#9830;</div>
      <div>
        <h3 style="font-size: 1rem; font-weight: 600; color: #111827; margin: 0;">Cloud Storage</h3>
        <p style="font-size: 0.75rem; color: #6b7280; margin: 0;">2.4 GB of 10 GB used</p>
      </div>
    </div>
    <div style="background: rgba(255, 255, 255, 0.4); border-radius: 9999px; height: 0.5rem; margin-bottom: 1.25rem; overflow: hidden;">
      <div style="background: linear-gradient(90deg, #8b5cf6, #3b82f6); height: 100%; width: 24%; border-radius: 9999px;"></div>
    </div>
    <p style="font-size: 0.8125rem; color: #4b5563; line-height: 1.6; margin: 0 0 1.5rem 0;">Your files are synced across all devices. Upgrade your plan for more storage and priority support.</p>
    <div style="display: flex; gap: 0.75rem;">
      <button style="background: rgba(139, 92, 246, 0.9); color: white; border: none; border-radius: 12px; padding: 0.625rem 1.25rem; font-size: 0.8125rem; font-weight: 500; cursor: pointer;">Upgrade Plan</button>
      <button style="background: rgba(255, 255, 255, 0.5); color: #374151; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 12px; padding: 0.625rem 1.25rem; font-size: 0.8125rem; font-weight: 500; cursor: pointer;">Manage Files</button>
    </div>
  </div>
</div>

Modal dialog overlay

Confirm Changes

×

You're about to update your workspace settings. This will affect all team members currently in this project. Are you sure you want to continue?

What will change

Default branch protection, merge requirements, and notification preferences for 12 members.

View code
<div style="padding: 3rem; background: linear-gradient(135deg, #c7d2fe, #e9d5ff, #fbcfe8); min-height: 24rem; display: flex; align-items: center; justify-content: center; position: relative;">
  <div style="position: absolute; inset: 0; background: rgba(0, 0, 0, 0.1);"></div>
  <div style="background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); padding: 2rem; max-width: 26rem; width: 100%; position: relative; z-index: 1;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;">
      <h2 style="font-size: 1.125rem; font-weight: 600; color: #111827; margin: 0;">Confirm Changes</h2>
      <div style="width: 2rem; height: 2rem; border-radius: 8px; background: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.875rem; color: #6b7280;">&times;</div>
    </div>
    <p style="font-size: 0.8125rem; color: #4b5563; line-height: 1.6; margin: 0 0 1.5rem 0;">You're about to update your workspace settings. This will affect all team members currently in this project. Are you sure you want to continue?</p>
    <div style="background: rgba(139, 92, 246, 0.08); border: 1px solid rgba(139, 92, 246, 0.15); border-radius: 12px; padding: 0.875rem; margin-bottom: 1.5rem;">
      <p style="font-size: 0.75rem; font-weight: 500; color: #7c3aed; margin: 0 0 0.25rem 0;">What will change</p>
      <p style="font-size: 0.8125rem; color: #4b5563; margin: 0;">Default branch protection, merge requirements, and notification preferences for 12 members.</p>
    </div>
    <div style="display: flex; gap: 0.75rem; justify-content: flex-end;">
      <button style="background: rgba(255, 255, 255, 0.5); color: #374151; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 12px; padding: 0.625rem 1.25rem; font-size: 0.8125rem; font-weight: 500; cursor: pointer;">Cancel</button>
      <button style="background: rgba(139, 92, 246, 0.9); color: white; border: none; border-radius: 12px; padding: 0.625rem 1.25rem; font-size: 0.8125rem; font-weight: 500; cursor: pointer;">Apply Changes</button>
    </div>
  </div>
</div>

Navigation bar

Page content appears behind the frosted glass navigation.

View code
<div style="background: linear-gradient(135deg, #dbeafe, #e0e7ff, #fce7f3); min-height: 14rem; padding: 0;">
  <nav style="background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 3.5rem;">
    <div style="display: flex; align-items: center; gap: 2rem;">
      <span style="font-size: 1rem; font-weight: 700; color: #111827;">Prism</span>
      <div style="display: flex; gap: 1.5rem;">
        <a style="font-size: 0.8125rem; font-weight: 500; color: #8b5cf6; text-decoration: none;">Dashboard</a>
        <a style="font-size: 0.8125rem; font-weight: 500; color: #4b5563; text-decoration: none;">Projects</a>
        <a style="font-size: 0.8125rem; font-weight: 500; color: #4b5563; text-decoration: none;">Analytics</a>
        <a style="font-size: 0.8125rem; font-weight: 500; color: #4b5563; text-decoration: none;">Settings</a>
      </div>
    </div>
    <div style="display: flex; align-items: center; gap: 1rem;">
      <div style="background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 10px; padding: 0.375rem 0.875rem; display: flex; align-items: center; gap: 0.5rem;">
        <span style="font-size: 0.75rem; color: #9ca3af;">&#128269;</span>
        <span style="font-size: 0.8125rem; color: #9ca3af;">Search...</span>
      </div>
      <div style="width: 2rem; height: 2rem; border-radius: 9999px; background: linear-gradient(135deg, #8b5cf6, #3b82f6); display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 600; color: white;">JD</div>
    </div>
  </nav>
  <div style="padding: 2rem; display: flex; justify-content: center;">
    <p style="font-size: 0.8125rem; color: #4b5563; background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.3); border-radius: 12px; padding: 0.75rem 1.25rem; margin: 0;">Page content appears behind the frosted glass navigation.</p>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI in a glass morphism style — translucent surfaces floating over colorful gradients, frosted and luminous. Every element looks like a pane of frosted glass held up to a soft light. Depth comes from transparency and blur, never from heavy shadows.

VISUAL RULES:
- Page background: Always a colorful gradient. Use `background: linear-gradient(135deg, #e0e7ff, #fce7f3, #dbeafe)` or similar soft purple-to-pink-to-blue. The gradient MUST be visible behind the glass — this is what makes the effect work.
- Glass surfaces: `background: rgba(255, 255, 255, 0.7)` combined with `backdrop-filter: blur(16px)` and `-webkit-backdrop-filter: blur(16px)`. This is the core of the style.
- Borders: 1px solid rgba(255, 255, 255, 0.3) — white at low opacity. Creates a subtle frosted edge. Never thick, never dark.
- Shadows: Soft and large. `box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08)`. The shadow suggests floating, not sitting on a surface.
- Border radius: Large — 16px (rounded-2xl) on cards and containers. 12px on buttons and inputs.
- Colors: Text is dark (gray-900, #111827) for readability against translucent backgrounds. Accent colors are violet-500 (#8b5cf6) or blue-500 (#3b82f6). Used sparingly on buttons, links, icons.
- Typography: Medium weight headings (font-medium or font-semibold). Clean, modern sans-serif. Body text in gray-700 for readability on glass.
- Spacing: Generous. p-6 to p-8 inside glass panels. gap-6 between elements. Airy, not cramped.
- Layering: Glass elements can overlap. Multiple layers of translucent panels create depth. Inner glass elements use `background: rgba(255, 255, 255, 0.4)` for nesting.

SPECIFIC PATTERNS:
- Cards: `background: rgba(255,255,255,0.7); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.08); padding: 2rem;`
- Buttons primary: `background: rgba(139,92,246,0.9); color: white; border: none; border-radius: 12px; backdrop-filter: blur(8px);`
- Buttons secondary: `background: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.4); border-radius: 12px; backdrop-filter: blur(8px);`
- Inputs: `background: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.3); border-radius: 12px;`
- Navigation: Full-width glass bar at top. `background: rgba(255,255,255,0.6); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.3);`
- Modals: Glass panel centered over a backdrop. Slightly higher opacity (0.75-0.85) so content is readable.

ANTI-PATTERNS:
- No opaque backgrounds on cards or panels. Everything must be translucent.
- No thick borders. Max 1px, always white with low opacity.
- No dark mode. This aesthetic requires a light/gradient background to work.
- No solid box-shadows. Shadows are diffused and soft only.
- No flat/solid design. Every surface must show the gradient through it.
- No harsh colors. Everything is soft, muted, pastel-adjacent.

Related prompts

🌱 Solar Output
Live

4.2 kWh

Today's generation — 12% above forecast

0 kWh 6 kWh peak
Glass

Solarpunk Green

🔥80system

Generates UI radiating sustainable optimism — translucent green panels, soft light diffusion, organic data visualization, and the hopeful energy of tech that works with nature, not against it.

â—†

Crystal Cache

Edge network layer

Distributed caching at the edge. Sub-millisecond reads with automatic invalidation and regional replication.

Requests
2.4M
↑ 12.3%
Latency
4.2ms
↓ 8.1%
Uptime
99.97%
30d window
Glass

Frosted Midnight

🔥63system

Generates UI with dark glass morphism — midnight blue and charcoal surfaces, frosted translucent panels, cool blue highlights, and the elegant depth of a winter night sky behind ice.

✦ Now Available

Experience the
Northern Lights

Immersive visual experiences that bring the aurora borealis into your digital space. Crafted with light, color, and movement.

Real-time sync Edge computing Auto-scaling Multi-region Encrypted
Glass

Gradient Aurora

🔥71system

Generates UI with aurora borealis-inspired gradients — iridescent teal-to-purple-to-green washes, translucent panels, ethereal glows, and the mesmerizing quality of northern lights over a dark sky.