CSS Backdrop-Filter Enhance Web Design with Blur & Filters

backdrop-filter = none | <filter-value-list>

<filter-value-list> = [ <filter-function> | <url> ]+

<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>

<url> = url(<string> <url-modifier>*) | <src()>

<blur()> = blur(<length>? )

<brightness()> = brightness([<number> | <percentage>]? )

<contrast()> = contrast([<number> | <percentage>]? )

<drop-shadow()> = drop-shadow([<color>? && <length>{2,3}] )

<grayscale()> = grayscale([<number> | <percentage>]? )

<hue-rotate()> = hue-rotate([<angle> | <zero>]? )

<invert()> = invert([<number> | <percentage>]? )

<opacity()> = opacity([<number> | <percentage>]? )

<sepia()> = sepia([<number> | <percentage>]? )

<saturate()> = saturate([<number> | <percentage>]? )

.box {
  background-color: rgba(255, 255, 255, 0.3); /* Semi-transparent background */
  backdrop-filter: blur(10px); /* Apply a blur effect to the backdrop */
}

body {
  background-image: url("anemones.jpg"); /* Background image */
}

html, body {
  height: 100%;
  width: 100%;
}

.container {
  background-size: cover;
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.box {
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(10px)</p>
  </div>
</div>

.foreground {
  backdrop-filter: brightness(50%); /* Apply a brightness effect to the backdrop */
  padding: 20px;
}

.foreground {
  backdrop-filter: contrast(150%); /* Apply a contrast effect to the backdrop */
  padding: 20px;
}

.foreground {
  backdrop-filter: grayscale(100%); /* Apply a grayscale effect to the backdrop */
  padding: 20px;
}

.foreground {
  backdrop-filter: hue-rotate(90deg); /* Apply a hue rotate effect to the backdrop */
  padding: 20px;
}

.foreground {
  backdrop-filter: invert(100%); /* Apply an invert effect to the backdrop */
  padding: 20px;
}

.foreground {
  backdrop-filter: opacity(50%); /* Apply an opacity effect to the backdrop */
  padding: 20px;
}

.foreground {
  backdrop-filter: sepia(100%); /* Apply a sepia effect to the backdrop */
  padding: 20px;
}

.foreground {
  backdrop-filter: saturate(200%); /* Apply a saturate effect to the backdrop */
  padding: 20px;
}

.foreground {
  backdrop-filter: blur(5px) brightness(120%) sepia(50%); /* Apply multiple effects to the backdrop */
  padding: 20px;
}