Glasssystem
Vapor Gradient
This prompt produces genuinely distinct output
Generates UI with vaporwave-inspired aesthetics — pink-to-purple-to-teal color washes, translucent surfaces, dreamy blur effects, and the surreal digital nostalgia of a 3AM internet deep dive.
vaporwavepink purpletranslucentdreamy
Added February 3, 2026 by unslop.dev
Example output
Vapor hero card
View code
<div style="padding: 3rem; background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); background-size: 200% 200%; position: relative; overflow: hidden;">
<div style="position: absolute; inset: 0; background: radial-gradient(ellipse at 25% 75%, rgba(255,107,157,0.15), transparent 60%), radial-gradient(ellipse at 75% 25%, rgba(139,92,246,0.15), transparent 60%), radial-gradient(ellipse at 50% 50%, rgba(94,234,212,0.1), transparent 50%);"></div>
<div style="position: relative; z-index: 1; background: rgba(15,12,41,0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,107,157,0.1); border-radius: 1rem; padding: 2.5rem; max-width: 24rem; box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 0 30px rgba(255,107,157,0.05);">
<div style="font-family: 'Inter', sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.2em; color: #ff6b9d; margin-bottom: 1rem;">✧ Digital Dreams</div>
<h2 style="font-family: 'Inter', sans-serif; font-size: 2rem; font-weight: 200; margin: 0 0 0.75rem 0; line-height: 1.2;"><span style="background: linear-gradient(135deg, #ff6b9d, #8b5cf6, #5eead4); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Endless Summer</span></h2>
<p style="font-family: 'Inter', sans-serif; font-size: 0.9375rem; color: #94a3b8; line-height: 1.7; margin: 0 0 2rem 0;">Drift through digital landscapes. Every pixel a memory of something that never existed.</p>
<div style="display: flex; gap: 0.75rem;">
<button style="background: linear-gradient(135deg, rgba(255,107,157,0.2), rgba(139,92,246,0.2)); border: 1px solid rgba(255,107,157,0.2); color: #fce7f3; border-radius: 9999px; padding: 0.625rem 1.5rem; font-size: 0.8125rem; font-family: 'Inter', sans-serif; cursor: pointer; box-shadow: 0 0 15px rgba(255,107,157,0.1);">Enter the Void</button>
<button style="background: rgba(148,163,184,0.06); border: 1px solid rgba(148,163,184,0.12); color: #c4b5fd; border-radius: 9999px; padding: 0.625rem 1.5rem; font-size: 0.8125rem; font-family: 'Inter', sans-serif; cursor: pointer;">Remember</button>
</div>
</div>
</div>Floating stat pills
4.2k listeners
128 tracks
∞ loops
View code
<div style="padding: 2rem; background: linear-gradient(135deg, #0f0c29, #302b63); position: relative;">
<div style="position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(139,92,246,0.12), transparent 70%);"></div>
<div style="position: relative; display: flex; gap: 0.75rem; flex-wrap: wrap; max-width: 28rem;">
<div style="background: rgba(255,107,157,0.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,107,157,0.15); border-radius: 9999px; padding: 0.5rem 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
<div style="width: 6px; height: 6px; border-radius: 50%; background: #ff6b9d; box-shadow: 0 0 8px rgba(255,107,157,0.5);"></div>
<span style="font-family: 'Inter', sans-serif; font-size: 0.8125rem; color: #fce7f3;">4.2k listeners</span>
</div>
<div style="background: rgba(139,92,246,0.1); backdrop-filter: blur(8px); border: 1px solid rgba(139,92,246,0.15); border-radius: 9999px; padding: 0.5rem 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
<div style="width: 6px; height: 6px; border-radius: 50%; background: #8b5cf6; box-shadow: 0 0 8px rgba(139,92,246,0.5);"></div>
<span style="font-family: 'Inter', sans-serif; font-size: 0.8125rem; color: #c4b5fd;">128 tracks</span>
</div>
<div style="background: rgba(94,234,212,0.08); backdrop-filter: blur(8px); border: 1px solid rgba(94,234,212,0.12); border-radius: 9999px; padding: 0.5rem 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
<div style="width: 6px; height: 6px; border-radius: 50%; background: #5eead4; box-shadow: 0 0 8px rgba(94,234,212,0.5);"></div>
<span style="font-family: 'Inter', sans-serif; font-size: 0.8125rem; color: #99f6e4;">∞ loops</span>
</div>
</div>
</div>Music player card
Plastic Love
Mariya Takeuchi
2:47
4:29
View code
<div style="padding: 2rem; background: linear-gradient(135deg, #0f0c29, #24243e); position: relative;">
<div style="position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 70%, rgba(255,107,157,0.1), transparent 50%);"></div>
<div style="position: relative; background: rgba(15,12,41,0.5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(139,92,246,0.1); border-radius: 1rem; padding: 1.25rem; max-width: 20rem;">
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
<div style="width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; background: linear-gradient(135deg, #ff6b9d, #8b5cf6); flex-shrink: 0;"></div>
<div>
<h4 style="font-family: 'Inter', sans-serif; font-size: 0.9375rem; font-weight: 500; color: #f8fafc; margin: 0;">Plastic Love</h4>
<p style="font-family: 'Inter', sans-serif; font-size: 0.75rem; color: #c4b5fd; margin: 0.125rem 0 0;">Mariya Takeuchi</p>
</div>
</div>
<div style="height: 3px; background: rgba(139,92,246,0.2); border-radius: 2px; margin-bottom: 0.5rem;">
<div style="width: 62%; height: 100%; background: linear-gradient(90deg, #ff6b9d, #8b5cf6); border-radius: 2px; box-shadow: 0 0 8px rgba(255,107,157,0.3);"></div>
</div>
<div style="display: flex; justify-content: space-between; font-family: 'Inter', sans-serif; font-size: 0.6875rem; color: #94a3b8;">
<span>2:47</span>
<span>4:29</span>
</div>
</div>
</div>System prompt
Copy this into your AI system prompt
You generate UI in a vapor gradient style — vaporwave-inspired digital dreamscapes. Pink, purple, and teal washes over translucent surfaces. The surreal, slightly melancholic beauty of 90s internet aesthetics remixed for the modern web. Everything floats in a haze of color and blur. VISUAL RULES: - Background: Multi-stop gradient in vaporwave colors. `background: linear-gradient(135deg, #0f0c29, #302b63, #24243e)` for dark base. Overlay with: `radial-gradient(ellipse at 20% 80%, rgba(255,107,157,0.2), transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.2), transparent 60%), radial-gradient(ellipse at 50% 50%, rgba(94,234,212,0.15), transparent 60%)`. - Palette: Hot pink (#ff6b9d), electric purple (#8b5cf6), deep violet (#7c3aed), teal (#5eead4), soft cyan (#67e8f9). These blend and overlap — never used as flat fills. - Panel surface: `background: rgba(15,12,41,0.4); backdrop-filter: blur(16px)`. Border: `1px solid rgba(255,107,157,0.12)` or `rgba(139,92,246,0.12)`. Pink or purple-tinted transparency. - Text: White (#f8fafc) for headings. Pinkish white (#fce7f3) for warm emphasis. Slate (#94a3b8) for body. Lavender (#c4b5fd) for secondary. - Typography: `font-family: 'Inter', 'Outfit', -apple-system, sans-serif`. Light weights (200-300) for large headings. Regular (400) for body. The text should feel weightless, floating. - Glow: Pinkish glow on key elements: `box-shadow: 0 0 20px rgba(255,107,157,0.15)`. Purple glow variant: `0 0 20px rgba(139,92,246,0.15)`. - Borders: Ultra-subtle, tinted pink or purple. 1px max. The glow matters more than the edge. - Border radius: Generous. 16px on cards, 12px on elements, 9999px on pills. Soft, dreamy. - Decorative: Gradient text on headings. Subtle grain/noise texture overlay (via CSS filter). Small glowing dots or stars as decorative accent. SPECIFIC PATTERNS: - Cards: Translucent with pink/purple tinted edges. Rounded-2xl. Glow on hover. Content floats in vapor. - Gradient text: `background: linear-gradient(135deg, #ff6b9d, #8b5cf6, #5eead4); -webkit-background-clip: text; -webkit-text-fill-color: transparent`. For hero headings. - Buttons: Glass-style with gradient border. Or gradient fill (pink→purple). Rounded-full or rounded-xl. Soft glow on hover. - Input fields: Dark translucent bg, pink/purple tinted border on focus. Rounded-xl. - Dividers: Gradient line from pink to purple to transparent at edges. - Tags: Tiny, rounded-full, gradient border or gradient fill at low opacity. Like floating colored pills. ANTI-PATTERNS: - No sharp corners. Minimum 12px radius. - No warm earth tones. No brown, tan, terracotta. - No opaque backgrounds on floating panels. Everything must be translucent. - No heavy borders. Maximum 1px. - No serif fonts. Nothing editorial. - No full-brightness neon. Colors should feel dreamy and diffused, not electric.
Related prompts
🌱
Solar Output
Live
4.2 kWh
Today's generation — 12% above forecast
0 kWh
6 kWh peak
Glass
Solarpunk Green
system
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
system
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
system
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.