https://github.com/itsdevdom/ui-components-with-blur-experiment
[EXPERIMENT] Using a blur effect for the visual design of UI components.
https://github.com/itsdevdom/ui-components-with-blur-experiment
acrylic blur css ui visual
Last synced: 5 months ago
JSON representation
[EXPERIMENT] Using a blur effect for the visual design of UI components.
- Host: GitHub
- URL: https://github.com/itsdevdom/ui-components-with-blur-experiment
- Owner: itsdevdom
- License: mit
- Created: 2019-10-25T22:20:58.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2020-11-10T17:43:51.000Z (over 5 years ago)
- Last Synced: 2025-08-11T10:49:20.130Z (8 months ago)
- Topics: acrylic, blur, css, ui, visual
- Language: CSS
- Homepage:
- Size: 20.2 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ui-components-with-blur-experiment
Using a blur effect for the visual design of UI components.
## Code
Using the **[CSS backdrop-filter property](https://developer.mozilla.org/de/docs/Web/CSS/backdrop-filter)**, we can add a blur effect behind
semi-transparent areas, such as panels or buttons.
For example:
```css
.my-class {
backdrop-filter: blur(5px);
}
```
> Please be aware of the **[limited browser support](https://caniuse.com/#feat=css-backdrop-filter)**. It is possible to do a compatibility
> check with fallback styling (aka "progressive enhancement") by using the
> **[`@supports()`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)** CSS rule!
## Preview
This example includes both light and dark buttons as an example:
