<div class="box">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, temporibus, aut officia minus sequi quae molestias beatae, qui ipsa mollitia alias accusamus voluptate ratione provident numquam iure quia aliquam tempore possimus consequatur vel. Iure atque enim in?</p>
</div>

<div class="form">

  <label for="background-clip">background-origin:</label>
  <select name="background-origin" id="background-origin">
    <option value="padding-box">padding-box</option>
    <option value="border-box">border-box</option>
    <option value="content-box">content-box</option>
  </select>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  gap: 1rem;
}

.box {
  width: min(100%, 600px);
  background-color: #fff;
  box-shadow: 0 0 10px 1px rgb(0 0 0 / 25%);
  border: 3rem solid rgb(220 20 20 / 38%);
  padding: 3rem;
  display: flex;
  align-items: stretch;
  position: relative;
}

.box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(142 34 190 / 16%);
  z-index: 1;
}

:root {
  --origin: padding-box;
}

.box {
  background: url("https://picsum.photos/800/600?image=12") left top / 100px
      100px no-repeat,
    linear-gradient(45deg, #09f, #90f 25%, #78f 50%, #12adef 75%, #f45) bottom 0
      right 0 / cover no-repeat;
  background-origin: var(--origin);
  background-size: 50% 50%;
}

.box p {
  background-color: rgb(100 188 20 / 16%);
  line-height: 1.6;
  text-align: justify;
  letter-spacing: 0.025em;
  padding: 10px;
  text-shadow: 1px 1px 0 rgb(0 0 0 / 50%);
  z-index: 2;
}

.form {
  padding: 1rem;
  background-color: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(20px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.form select {
  padding: 0.25em 0.5em;
  font-size: inherit;
}

const rootElement = document.documentElement;
const originHander = document.getElementById("background-origin");

originHander.addEventListener("change", (etv) => {
  rootElement.style.setProperty("--origin", etv.target.value);
});