Glass Effects

Vanduo glass effects provide an opt-in frosted surface system built with backdrop-filter, translucent layers, highlight sheen, and accessibility fallbacks.

Hero Surface

GlassSurface

Use .vd-glass for frosted surfaces over rich backgrounds, then add size and behavior modifiers as needed. 

<div class="vd-glass vd-glass-lg vd-glass-tinted vd-glass-floating">
  <h4>GlassSurface</h4>
  <p>Use <code>.vd-glass</code> for frosted surfaces over rich backgrounds,
     then add size and behavior modifiers as needed.</p>
  <button class="vd-btn vd-btn-primary">Primary Action</button>
  <button class="vd-btn vd-btn-outline">Secondary</button>
</div>
Why Distinctions Can Look Subtle

Blur and opacity are context-dependent. Smooth or homogeneous backgrounds can hide what each class changes.

  • .vd-glass-md matches base .vd-glass, so they are intentionally equivalent.
  • .vd-glass-floating is primarily an interaction state, so static examples can under-sell it.
  • Use textured backdrops and side-by-side comparisons to make blur, tint, and contrast differences obvious.
Visual Diagnostics Controls

Switch backdrop modes and force floating hover state to inspect class differences under the same conditions.

Size Variants
.vd-glass-smblur 6px, saturate 1.4, opacity 0.55
BaselineNo glass filter
GlassLower blur, lighter opacity

Look for sharper background detail and a lighter frosted layer.

.vd-glass-mdblur 12px, saturate 1.8, opacity 0.65
BaselineNo glass filter
GlassFramework default profile

Equivalent to .vd-glass default; use it for explicit readability.

.vd-glass-lgblur 20px, saturate 2.0, opacity 0.72
BaselineNo glass filter
GlassSofter and richer blend

Background texture softens while color bleed feels denser.

.vd-glass-xlblur 28px, saturate 2.2, opacity 0.78
BaselineNo glass filter
GlassStrongest soft-focus panel

Strongest frosted depth; best for hero overlays and modal foregrounds.

<!-- Size variants: sm / md / lg / xl -->
<div class="vd-glass vd-glass-sm">…</div>
<div class="vd-glass vd-glass-md">…</div>  <!-- == .vd-glass -->
<div class="vd-glass vd-glass-lg">…</div>
<div class="vd-glass vd-glass-xl">…</div>
Modifiers
.vd-glass-tintedAdds tint gradient overlay
Base glassNeutral translucent layer
Tinted glassAdds primary tone wash

Watch for color cast shift while blur and depth remain similar.

.vd-glass-floatingLift + shadow on hover/focus
Base glassResting state
Floating glassUse control to force hover preview

State-driven modifier; turn on Force floating hover to preview motion cue.

.vd-glass-contrastHigher opacity + stronger border
Base glassDefault legibility
Contrast glassBetter text separation

Use on busy imagery where stronger edge and body contrast improves readability. 

<!-- Modifiers -->
<div class="vd-glass vd-glass-tinted">…</div>     <!-- tint wash -->
<div class="vd-glass vd-glass-floating">…</div>   <!-- lift on hover -->
<div class="vd-glass vd-glass-contrast">…</div>   <!-- stronger border -->
Glass Tokens
TokenPurposeDefault
--vd-glass-blurBackdrop blur amount12px
--vd-glass-saturateBackdrop saturation boost1.8
--vd-glass-bg-opacityGlass opacity base0.65
--vd-glass-bg-lightLight translucent surfacergba(255,255,255,var(--vd-glass-bg-opacity))
--vd-glass-bg-darkDark translucent surfacergba(30,30,30,var(--vd-glass-bg-opacity))
--vd-glass-border-lightGlass edge strokergba(255,255,255,var(--vd-glass-border-alpha))
--vd-glass-highlight-alphaSpecular sheen intensity0.25
--vd-glass-shadowDepth shadow for floating glass0 8px 32px rgba(0,0,0,0.12)
--vd-glass-noise-opacityNoise grain overlay strength0.03
Component Integration
Vanduo
Card Glass
Apply .vd-card-glass for elevated frosted cards.
Toast Glass
Use .vd-toast-glass for floating notifications.

Modal Glass

The .vd-modal-glass variant applies frosted glass styling to modal surfaces. 
<nav class="vd-navbar vd-navbar-glass">…</nav>
<div class="vd-card vd-card-glass">…</div>
<div class="vd-toast vd-toast-glass">…</div>
<button class="vd-fab vd-fab-glass"><i class="ph ph-plus"></i></button>
<div class="vd-modal vd-modal-glass">…</div>
Accessibility
  • Glass classes include prefers-reduced-transparency: reduce fallbacks that disable blur and return to solid surfaces.
  • Floating interactions respect prefers-reduced-motion: reduce.
  • Use .vd-glass-contrast on busy backgrounds to improve text legibility.
  • Keep body text contrast above WCAG AA by testing overlays in both light and dark themes.
Theming

Override glass tokens per app, theme, or component scope. 

:root {
  --vd-glass-blur: 14px;
  --vd-glass-bg-opacity: 0.7;
  --vd-glass-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
}

.marketing-hero .vd-glass {
  --vd-glass-tint: rgba(34, 184, 207, 0.18);
}
Scroll-Activated Glass

Two complementary APIs let you activate glass effects on scroll rather than at page-load time. The framework handles all the observer/listener logic — no custom JavaScript required beyond a single wiring call. 

import { ref } from 'vue';
import { useGlass } from "@vanduo-oss/vd3";
import { useNavbarGlassScroll } from "@vanduo-oss/vd3";

// Generic scroll-activated glass (data-glass-scroll)
const root = ref<HTMLElement | null>(null);
useGlass(root);   // IntersectionObserver toggles .is-glass-active; cleanup on unmount

// Navbar scroll-activated glass (.vd-navbar-glass)
const navRef = ref<HTMLElement | null>(null);
const isScrolled = useNavbarGlassScroll(navRef);
// <nav ref="navRef" class="vd-navbar vd-navbar-fixed vd-navbar-glass" :class="{ 'vd-navbar-scrolled': isScrolled }">
.vd-navbar-glass — Navbar scroll activation

Add .vd-navbar-glass to any .vd-navbar-fixed or .vd-navbar-sticky. The navbar starts fully transparent and gains the frosted glass surface once the user scrolls past its height (or a custom threshold set with data-scroll-threshold). The .vd-navbar-scrolled class is toggled automatically by the framework. 

<nav class="vd-navbar vd-navbar-fixed vd-navbar-glass">
  ...
</nav>

<!-- Custom scroll threshold (px) -->
<nav class="vd-navbar vd-navbar-fixed vd-navbar-glass"
     data-scroll-threshold="120">
  ...
</nav>

The docs navbar above is a live example — scroll this page to see the effect.

data-glass-scroll — Generic activation

Any element — sidebar, floating panel, sticky header — can adopt scroll-aware glass by pairing .vd-glass with the data-glass-scroll attribute. The framework uses IntersectionObserver to watch a sentinel element (previous sibling by default, or a CSS selector via data-glass-sentinel) and toggles .is-glass-active automatically.

  • No JavaScript required in your markup
  • Works on any scrollable container, not just the window
  • CSS handles the inactive→active transition via transition
  • Falls back to always-active when no sentinel is found
Live demo
↑ scroll sentinel
Sticky glass panel — activates on scroll

Scroll inside this box to see the glass surface activate once the sentinel element above leaves the viewport. 

<!-- Sentinel: the element whose disappearance triggers glass activation -->
<div id="my-sentinel">...</div>

<!-- Glass element: transparent at rest, frosted once sentinel leaves view -->
<div class="vd-glass"
     data-glass-scroll
     data-glass-sentinel="#my-sentinel">
  Sticky panel content
</div>

<!-- Without explicit sentinel: uses the previous sibling automatically -->
<div id="hero">...</div>
<div class="vd-glass" data-glass-scroll>
  Activates when #hero scrolls out of view
</div>