Skip to content

Instantly share code, notes, and snippets.

@corypina

corypina/frosted-glass.css

Created August 9, 2021 15:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save corypina/4989b3390dd6a2207a38d161a37c8468 to your computer and use it in GitHub Desktop.
Save corypina/4989b3390dd6a2207a38d161a37c8468 to your computer and use it in GitHub Desktop.
Download ZIP
Frosted glass effect in CSS
Raw
frosted-glass.css
.adaptive-glass {
--glass-lightness: 100%;
background: hsl(0 0% var(--glass-lightness) / 50%);
backdrop-filter: blur(40px);
@media (prefers-color-scheme: dark) {
--glass-lightness: 0%;
}
}
/* Via https://twitter.com/argyleink/status/1423993578787725317 */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment