CSS frosted glass effect

What is ground glass effect?

  • Frosted glass effect with blurred background
  • Space objects float on multiple levels
  • Bright colours accentuate blurred transparency
  • Translucent objects have a fine boundary of light

Two, how to achieve?

.example{
    background: rgba(255.255.255.0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 25px;
    box-shadow:inset 0 0 6px rgba(255.255.255.0.2);
}
Copy the code

Three, compatibility problem?

1. If it is just a simple background, background-attachment: fixed with filter: blur() can be used for simulation;

2. For fireFox, you can use Moz-Element () with filter: blur() for a complex background with frosted glass.

3. If the above effects are not compatible, you can return to the translucent effect by setting background: RGBA (255, 255, 255, 0.5).