How to create a glass effect in CSS?

General Discussions
1

How to create a glass effect in CSS?

2

The glass effect is created using the backdrop-filter property with blur(), and a semi-transparent background.

.glass {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 10px;
      }

To learn more about glowing effects, follow the blog given below for more details.

3

Using Box Shadow for Depth: To enhance the glass effect, you can add a subtle box shadow to give depth to the element. This helps create the illusion of transparency and light. Here’s an example:

.glass {

  • background: rgba(255, 255, 255, 0.1);*
  • backdrop-filter: blur(10px);*
  • border-radius: 10px;*
  • box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);* }
4

Incorporating Borders for Contrast: You can also add a light border to emphasize the glass effect further. A border with a low opacity can give a stylish finish. Here’s how you can implement it:

.glass {

  • background: rgba(255, 255, 255, 0.1);*
  • backdrop-filter: blur(10px);*
  • border-radius: 10px;*
  • border: 1px solid rgba(255, 255, 255, 0.2);* }