CSS Visual ToolsLesson 82Free preview
Glassmorphism Generator
This lesson is part of Web Developer Tools · All levels
Summary
The glassmorphism generator helps create blurry glass effects with a semi-transparent background and blurry backdrop-filters. This effect is usually combined with a bright thin border and a soft shadow so that the cards can be seen floating above the background. Make sure the contrast of the text remains adequate because a transparent background can lower the readability.
Key points
- Backdrop-filter: blur() filter the content behind the elements
- The card background uses a semi-transparent color with a low alpha.
- The thin, bright border strengthens the glass edge
- Soft shadows help separate the cards from the background
- Provide background colors for unsupported browsers
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.