UI Recipe
Glass Morphism
Frosted glass effects using backdrop-filter: blur() and
semi-transparent backgrounds. All examples use the site's existing
dark theme.
The Recipe
Every glass element on this site follows the same pattern:
Variations
Adjusting blur strength and opacity creates different glass intensities.
blur(6px)
Subtle frosted tint — good for backgrounds behind text.
blur(12px)
The site header uses this — distinct glass with good readability.
blur(20px)
Thick frosted look — works for overlays and modals.
With Gradient Border
A border-image or pseudo-element gradient adds a neon
edge.
Gradient Glass
The border is a linear-gradient on the outer wrapper.
The inner div contains the glass background and content. This
creates a glowing neon frame without affecting the glass layer.
outer { background: linear-gradient(135deg, #b06dff, #7a2fff, #d2a9ff); }
inner { background: rgba(22, 10, 41, 0.7);
backdrop-filter: blur(14px); }
Layered Depth
Stacking glass layers with different blurs creates spatial depth.
Layer 1 (back): blur(6px) opacity 0.6 Layer 2 (mid): blur(12px) opacity 0.7 Layer 3 (front): blur(20px) opacity 0.8
Live on This Site
The header nav at the top of this page is glass morphism. Here it is in isolation:
.site-header { background: rgba(22, 10, 41, 0.82); border: 1px solid rgba(203, 157, 255, 0.3); backdrop-filter: blur(12px); box-shadow: 0 10px 26px rgba(26, 8, 47, 0.5); }