react-ios-liquid-glass/src/components/glass-box/style.css

react-ios-liquid-glass is a lightweight React + TypeScript library that helps you easily replicate the elegant iOS liquid glass effect (also known as glassmorphism). With built‑in support for blur, transparency, and smooth transitions, this package allows

root {
    --liquid-glass-border-radius: 20px;
    --liquid-glass-brightness: 1.1;
    --liquid-glass-blur: 10px;
}

.liquid-glass__container {
    border-radius: var(--liquid-glass-border-radius);
    overflow: hidden;
    filter: drop-shadow(-1px -1px 10px #00000099);
    backdrop-filter: blur(var(--liquid-glass-blur)) brightness(var(--liquid-glass-brightness)) url("#displacementFilter");
}

.liquid-glass__container::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--liquid-glass-border-radius);
    box-shadow: inset -2px -2px 1px rgba(255, 255, 255, 0.294), inset 2px 2px 5px white;
}