Glasssystem

Frosted Midnight

63
🔥 Certified BangerThis prompt produces genuinely distinct output

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.

dark modetranslucentblurcool tones

Added February 11, 2026 by unslop.dev

Example output

Frosted card

â—†

Crystal Cache

Edge network layer

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

View code
<div style="padding: 2rem; background: linear-gradient(135deg, #0f172a, #1e1b4b, #0f172a); min-height: 12rem;">
  <div style="background: rgba(15,23,42,0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(148,163,184,0.1); border-radius: 0.75rem; padding: 1.5rem; max-width: 22rem; box-shadow: 0 4px 24px rgba(0,0,0,0.2), 0 0 20px rgba(96,165,250,0.05);">
    <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
      <div style="width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: rgba(96,165,250,0.15); border: 1px solid rgba(96,165,250,0.2); display: flex; align-items: center; justify-content: center;">
        <span style="color: #60a5fa; font-size: 1rem;">â—†</span>
      </div>
      <div>
        <h3 style="font-family: 'Inter', -apple-system, sans-serif; font-size: 1rem; font-weight: 600; color: #f1f5f9; margin: 0;">Crystal Cache</h3>
        <p style="font-family: 'Inter', sans-serif; font-size: 0.75rem; color: #64748b; margin: 0.125rem 0 0 0;">Edge network layer</p>
      </div>
    </div>
    <p style="font-family: 'Inter', sans-serif; font-size: 0.875rem; color: #94a3b8; line-height: 1.6; margin: 0 0 1.25rem 0;">Distributed caching at the edge. Sub-millisecond reads with automatic invalidation and regional replication.</p>
    <div style="display: flex; gap: 0.5rem;">
      <button style="background: rgba(96,165,250,0.15); border: 1px solid rgba(96,165,250,0.25); color: #60a5fa; border-radius: 0.5rem; padding: 0.5rem 1rem; font-size: 0.8125rem; font-family: 'Inter', sans-serif; cursor: pointer;">Deploy</button>
      <button style="background: rgba(148,163,184,0.08); border: 1px solid rgba(148,163,184,0.12); color: #94a3b8; border-radius: 0.5rem; padding: 0.5rem 1rem; font-size: 0.8125rem; font-family: 'Inter', sans-serif; cursor: pointer;">Docs</button>
    </div>
  </div>
</div>

Stats panel

Requests
2.4M
↑ 12.3%
Latency
4.2ms
↓ 8.1%
Uptime
99.97%
30d window
View code
<div style="padding: 2rem; background: linear-gradient(135deg, #0f172a, #1e1b4b, #0f172a);">
  <div style="display: flex; gap: 0.75rem; max-width: 36rem;">
    <div style="flex: 1; background: rgba(15,23,42,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(148,163,184,0.08); border-radius: 0.75rem; padding: 1.25rem;">
      <div style="font-family: 'Inter', sans-serif; font-size: 0.6875rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem;">Requests</div>
      <div style="font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 300; color: #f1f5f9;">2.4M</div>
      <div style="font-family: 'Inter', sans-serif; font-size: 0.75rem; color: #60a5fa; margin-top: 0.375rem;">↑ 12.3%</div>
    </div>
    <div style="flex: 1; background: rgba(15,23,42,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(148,163,184,0.08); border-radius: 0.75rem; padding: 1.25rem;">
      <div style="font-family: 'Inter', sans-serif; font-size: 0.6875rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem;">Latency</div>
      <div style="font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 300; color: #f1f5f9;">4.2<span style="font-size: 0.875rem; color: #64748b;">ms</span></div>
      <div style="font-family: 'Inter', sans-serif; font-size: 0.75rem; color: #22c55e; margin-top: 0.375rem;">↓ 8.1%</div>
    </div>
    <div style="flex: 1; background: rgba(15,23,42,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(148,163,184,0.08); border-radius: 0.75rem; padding: 1.25rem;">
      <div style="font-family: 'Inter', sans-serif; font-size: 0.6875rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem;">Uptime</div>
      <div style="font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 300; color: #f1f5f9;">99.97<span style="font-size: 0.875rem; color: #64748b;">%</span></div>
      <div style="font-family: 'Inter', sans-serif; font-size: 0.75rem; color: #64748b; margin-top: 0.375rem;">30d window</div>
    </div>
  </div>
</div>

Login form

Welcome back

Sign in to continue

View code
<div style="padding: 3rem; background: linear-gradient(135deg, #0f172a, #1e1b4b, #0f172a); display: flex; justify-content: center;">
  <div style="background: rgba(15,23,42,0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(148,163,184,0.1); border-radius: 1rem; padding: 2rem; width: 20rem; box-shadow: 0 8px 32px rgba(0,0,0,0.3);">
    <h2 style="font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 300; color: #f1f5f9; margin: 0 0 0.25rem 0; text-align: center;">Welcome back</h2>
    <p style="font-family: 'Inter', sans-serif; font-size: 0.8125rem; color: #64748b; margin: 0 0 1.5rem 0; text-align: center;">Sign in to continue</p>
    <div style="margin-bottom: 1rem;">
      <input type="email" placeholder="Email" style="width: 100%; background: rgba(15,23,42,0.4); border: 1px solid rgba(148,163,184,0.15); border-radius: 0.5rem; padding: 0.625rem 0.875rem; font-size: 0.875rem; color: #f1f5f9; outline: none; font-family: 'Inter', sans-serif; box-sizing: border-box;" />
    </div>
    <div style="margin-bottom: 1.5rem;">
      <input type="password" placeholder="Password" style="width: 100%; background: rgba(15,23,42,0.4); border: 1px solid rgba(148,163,184,0.15); border-radius: 0.5rem; padding: 0.625rem 0.875rem; font-size: 0.875rem; color: #f1f5f9; outline: none; font-family: 'Inter', sans-serif; box-sizing: border-box;" />
    </div>
    <button style="width: 100%; background: rgba(96,165,250,0.2); border: 1px solid rgba(96,165,250,0.3); color: #60a5fa; border-radius: 0.5rem; padding: 0.625rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; font-family: 'Inter', sans-serif; box-sizing: border-box;">Sign In</button>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI in a frosted midnight style — dark glass morphism. Everything happens on a deep midnight canvas with frosted, translucent panels floating above it. Cool blues, subtle white glows, and the shimmering depth of ice on a winter window. This is glass morphism's sophisticated, dark-mode sibling.

VISUAL RULES:
- Background: Deep midnight gradient. `background: linear-gradient(135deg, #0f172a, #1e1b4b, #0f172a)`. This gradient MUST show through the frosted panels — it creates the depth effect.
- Panel surface: Translucent dark. `background: rgba(15,23,42,0.6)` with `backdrop-filter: blur(16px)`. Border: `1px solid rgba(148,163,184,0.12)`. This is the core glass effect — dark, frosted, with the gradient visible behind.
- Highlight: Cool blue (#60a5fa) for primary actions, links, focus states. Icy white (#e2e8f0) for emphasis.
- Glow: Subtle blue glow on key elements: `box-shadow: 0 0 20px rgba(96,165,250,0.1)`. Very restrained — like moonlight on frost.
- Text: White (#f1f5f9) for headings. Blue-gray (#94a3b8) for body. Dim (#64748b) for metadata. All cool-toned.
- Typography: Clean sans-serif. `font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif`. Light weights (300-400) for large text. Regular (400) for body. The type should feel ethereal.
- Border radius: Moderate. 12px (rounded-xl) on panels. 8px on buttons. This is softer than typical glass morphism.
- Spacing: Generous. p-6 in panels. gap-4 in content. The frosted panels need visual room to breathe.

SPECIFIC PATTERNS:
- Cards: `background: rgba(15,23,42,0.6); backdrop-filter: blur(16px); border: 1px solid rgba(148,163,184,0.1)`. Rounded-xl, p-6. Subtle blue shadow.
- Buttons primary: `background: rgba(96,165,250,0.2); border: 1px solid rgba(96,165,250,0.3)`. Blue text. Hover: bg increases to 0.3, subtle glow.
- Buttons secondary: `background: rgba(148,163,184,0.08); border: 1px solid rgba(148,163,184,0.12)`. Gray text.
- Inputs: `background: rgba(15,23,42,0.4); border: 1px solid rgba(148,163,184,0.15)`. Rounded-lg. Focus: border-blue-400/30 with blue glow.
- Dividers: `background: rgba(148,163,184,0.1)`. 1px height. Subtle.
- Status dots: Small (6px) with glow matching their color. Blue for active, green for success, red for error.

ANTI-PATTERNS:
- No opaque backgrounds on panels. Everything must be translucent.
- No warm colors. No orange, yellow, terracotta, gold. Cool tones only.
- No sharp corners (border-radius: 0). Minimum 8px.
- No thick borders. Maximum 1px, and always at low opacity.
- No heavy shadows. Only subtle glows in blue or white.
- No light mode. This aesthetic requires darkness.

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.

✦ 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.

♦

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.

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.

Glass

Glass Morphism

🔥62system

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