solid-glass/src/styles/solid-glass.css

A lightweight glass effect library for web apps, supporting React and Vue.

.solid-glass {
  position: relative;
  isolation: isolate;
}

.solid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--lg-border-radius, 28px);
  box-shadow: inset var(--lg-shadow-offset, 0) var(--lg-shadow-offset, 0) var(--lg-shadow-blur, 7px) var(--lg-shadow-spread, 0px) var(--lg-shadow-color, rgba(255, 255, 255, 0.7));
  background-color: rgba(var(--lg-tint-color, 255, 255, 255), var(--lg-tint-opacity, 0.04));
}

.solid-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--lg-border-radius, 28px);
  backdrop-filter: blur(var(--lg-frost-blur, 2px));
  -webkit-backdrop-filter: blur(var(--lg-frost-blur, 2px));
  filter: var(--lg-filter-id);
  -webkit-filter: var(--lg-filter-id);
  isolation: isolate;
}