spotlight

by deadlyicon

HTML

<div class="Spotlight"></div>

SASS

body
  background-image: url("https://www.laspilitas.com/images/grid24_24/10506/images/native-plants/bouquet.jpg")
  background-position: contain
.Spotlight
  position: fixed
  top: 0
  left: 0
  bottom: 0
  right: 0
  --shadow: rgba(0, 0, 0, 0.85)
  background-color: var(--shadow)

  /* clip-path: content-box inset(100px 50px) */
  /* clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 50) */
  clip-path: path("M0,0 L0,100 L100,100 L100,0 L0,0")

  /* border-radius: 50% */
  /* --size: calc(min(100vh, 100vw) - 40px) */
  /* top: calc((100vh - var(--size)) / 2) */
  /* left: calc((100vw - var(--size)) / 2) */
  /* height: var(--size) */
  /* width: var(--size) */
  /* --bleed: calc(max(100vh, 100vw) - (var(--size) / 2)) */
  /* --blur: calc(var(--size) * 0.04) */
  // IS THERE ANYWAY TO USE TWO box-shadow WITHOUT A LINE BETWEEN THEM?
  // box-shadow: inset 0 0 var(--blur) var(--blur) var(--shadow), 0 0 0 var(--bleed, 100vw) var(--shadow)