<div class="square"></div>
<div class="square two"></div>

<div class="card-glass">
  <h1>Glassmorphism</h1>
  <div class="divider"></div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </p>
  <svg
    width="40"
    height="32"
    viewBox="0 0 437 257"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      data-v-5a204c34=""
      d="M19.3488 107.435C13.518 113.216 10.7414 120.903 11.019 128.499C10.7407 136.095 13.5172 143.783 19.3487 149.565L108.354 237.81C113.88 243.289 121.107 246.019 128.327 246C135.563 246.03 142.809 243.301 148.347 237.81L237.353 149.565C237.704 149.217 238.044 148.862 238.372 148.501C238.737 148.175 239.094 147.838 239.445 147.49L308.649 78.8772L358.7 128.5L288.848 197.755C277.716 208.791 277.716 226.773 288.848 237.81C299.862 248.73 317.632 248.73 328.646 237.81L417.651 149.565C423.482 143.784 426.259 136.097 425.981 128.501C426.259 120.904 423.483 113.217 417.651 107.435L328.646 19.1899C323.114 13.7051 315.877 10.9752 308.649 11.0002C301.42 10.9756 294.185 13.7055 288.653 19.1899L199.647 107.435C199.296 107.783 198.956 108.138 198.628 108.499C198.263 108.825 197.906 109.162 197.555 109.51L128.351 178.123L78.3004 128.5L148.152 59.2449C159.284 48.2085 159.284 30.2264 148.152 19.1899C137.138 8.27003 119.368 8.27005 108.354 19.1899L19.3488 107.435Z"
      stroke="#FFFCFC"
      stroke-width="22"
    ></path>
  </svg>
</div>

html {
  height: 100%;
}
body {
  height: 100%;
  font-family: "Poppins", sans-serif;
  background: linear-gradient(41deg, #009e69 14%, #4c3bce 94%);
}
.square {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 20px;
  background: linear-gradient(321deg, #8a7295 0%, #c44d5a 2%, #fd271e 100%);
  left: 50%;
  top: 50px;
  margin-left: -300px;
  z-index: 1;
}
.square.two {
  left: 50%;
  top: 400px;
  background: linear-gradient(223deg, #d400ff 0%, #a600ff 94%);
  margin-left: 100px;
  width: 200px;
  height: 200px;
}
.card-glass {
  width: 300px;
  height: 300px;
  background-color: rgba(255, 255, 255, 0.4);
  position: relative;
  z-index: 2;
  backdrop-filter: blur(3px);
  border-radius: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.1);
  top: 100px;
  left: 50%;
  margin-left: -200px;
  display: flex;
  flex-direction: column;
  padding: 50px;
  overflow: hidden;
  color: #fff;
}
.divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}
.card-glass:hover {
  box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.2);
}
.card-glass svg {
  margin: auto;
  transform: scale(2);
}

/* https://eslint.org/docs/2.0.0/rules/no-undef */
/* global VanillaTilt */

/* https://micku7zu.github.io/vanilla-tilt.js */
VanillaTilt.init(document.querySelector(".card-glass"), {
  max: 25,
  speed: 400,
  glare: true,
})