Glass

Extended Module

Glassmorphism utilities — frosted blur surfaces with intensity levels, color tints, and border-glow hover effects. Move your mouse across each stage to see the parallax. Click ↺ to randomise the background photo.

gleam-glass.css backdrop-filter random photo bg auto dark mode

<!-- Intensity levels (no .gleam needed) -->
<div class="glass-low">Subtle frosted</div>
<div class="glass-medium">Medium blur</div>
<div class="glass-heavy">Heavy blur</div>

<!-- Color tints -->
<div class="glass-medium glass-purple">Purple tint</div>

<!-- Hover border glow -->
<div class="glass-medium glass-border-glow">Glows on hover</div>

Intensity Levels

glass-low

blur: 4px

glass-medium

blur: 10px

glass-high

blur: 16px

glass-heavy

blur: 24px

Color Tints

default

white tint

glass-dark

dark tint

glass-blue

blue tint

glass-purple

purple tint

glass-border-glow

hover me

Glass Card UI Pattern

Pro Plan

$29/mo

<div class="glass-high glass-border-glow gleam entrance-rise">
  Pricing card content
</div>