Frosted Glass Effect

Preview 1

Preview 2

Effect Customizer:

Gradient Background:

Generated CSS:


  .frosted-glass {
    backdrop-filter: blur(6px) saturate(109%);
    -webkit-backdrop-filter: blur(6px) saturate(109%);
    background-color: #ffffffCC; // color with opacity -> (CC = 80%)
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4);
    background-image: linear-gradient(to top right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
    background-size: cover;
    background-repeat: no-repeat;
  }