https://github.com/miguelitodev/glass-effect
Discover the charm of the slightly blurred glass effect using HTML and CSS! 😎✨
https://github.com/miguelitodev/glass-effect
blur css glass-effect html
Last synced: 3 months ago
JSON representation
Discover the charm of the slightly blurred glass effect using HTML and CSS! 😎✨
- Host: GitHub
- URL: https://github.com/miguelitodev/glass-effect
- Owner: miguelitodev
- Created: 2024-05-09T10:49:12.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-05-09T11:12:40.000Z (about 1 year ago)
- Last Synced: 2025-02-23T21:05:26.296Z (3 months ago)
- Topics: blur, css, glass-effect, html
- Language: CSS
- Homepage: https://miguelitodev.github.io/glass-effect/index.html
- Size: 692 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Glassy Blur Effect Project ✨
Welcome to the Glassy Blur Effect project! This project explores creating a sleek and stylish glassy blur effect using HTML and CSS. 🌟
## Project Overview 🚀
The main goal of this project is to demonstrate how to achieve a glassy blur effect using simple HTML and CSS techniques. The project provides a minimalist example of how to implement this effect, making it easy for developers to integrate it into their own projects. 💻
## Code Explanation 🎨
In the project, the glassy blur effect is achieved using the following CSS code snippet:
```css
.glass {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0)
);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
```
Explanation of the code:
- `background`: Applies a linear gradient background to create a translucent effect. The gradient starts from 135 degrees and consists of two colors: `rgba(255, 255, 255, 0.1)` (slightly opaque white) and `rgba(255, 255, 255, 0)` (fully transparent white). 🌈
- `backdrop-filter`: Applies a blur filter to the element and its contents. This creates the blurred effect that simulates glass. 🔍
- `-webkit-backdrop-filter`: Similar to `backdrop-filter`, but specifically for WebKit browsers such as Chrome and Safari. 🖥️
- `border-radius`: Rounds the corners of the element to give it a smoother appearance. 🎈
- `border`: Adds a thin solid border around the element with a slight opacity to enhance the glassy effect. 🌊
- `box-shadow`: Applies a shadow effect to the element to create depth and realism. ☁️
Feel free to explore and customize the code to fit your project's needs! 🎉