Flux Capacitor
OUTPUT
1.21GW
LIVE PREVIEW
Hover the glass surface to see liquid interaction
AtomixGlass integrates with the Atomix SCSS override system. Set these CSS custom properties to retheme the glass surface across your entire documentation site — no component-level changes required.
Vibrant gradient glass with cyan/violet palette
--glass-backgroundrgba(14, 150, 240, 0.08)--glass-borderrgba(14, 150, 240, 0.22)--glass-backdrop-blurblur(20px)Ultra-dark smoky glass — maximum depth
--glass-backgroundrgba(8, 14, 21, 0.55)--glass-borderrgba(255, 255, 255, 0.07)--glass-backdrop-blurblur(28px)Warm amber glass with fiery glow accents
--glass-backgroundrgba(213, 158, 46, 0.08)--glass-borderrgba(213, 158, 46, 0.28)--glass-backdrop-blurblur(18px)Organic emerald glass — fresh and clean
--glass-backgroundrgba(56, 161, 105, 0.08)--glass-borderrgba(56, 161, 105, 0.25)--glass-backdrop-blurblur(22px)Over-light mode — crisp frosted glass on white
--glass-backgroundrgba(241, 245, 249, 0.6)--glass-borderrgba(226, 232, 240, 0.8)--glass-backdrop-blurblur(30px)--atomix-glass-radiusvar(--atomix-radius-md, 16px)Border radius applied to all glass layers--atomix-glass-transitionall 0.15s ease-outTransition for interactive glass states--atomix-glass-border-width0.09375remBorder gradient layer thickness--glass-backgroundrgba(255,255,255,0.1)Custom glass background — override in your theme--glass-borderrgba(255,255,255,0.15)Custom glass border color--glass-backdrop-blurblur(20px)Backdrop-filter blur value for glass elements--playground-accent#0e96f0Playground accent / highlight color (custom prop)// styles/01-settings/_glass-theme.scss
// Override Atomix glass CSS custom properties to retheme globally
:root {
--glass-background: rgba(14, 150, 240, 0.08);
--glass-border: rgba(14, 150, 240, 0.22);
--glass-backdrop-blur: blur(20px);
--playground-bg-from: #080e15;
--playground-bg-to: #041d33;
--playground-accent: #0e96f0;
}
// Dark-mode glass surface variant
[data-theme="dark"] .c-atomix-glass {
--atomix-glass-radius: 20px;
--atomix-glass-border-width: 0.09375rem;
}