<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glass</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="ribbon"></div>
    <div class="cards">
        Glassmorphism
      </div>
</body>
</html>
body {
  overflow: hidden;
  font-family: "Poppins", sans-serif;
  background:  linear-gradient(
    69.94deg,
    #362691 4.79%,
    #251a68 33.4%,
    #21175e 48.64%,
    rgba(33, 23, 94, 0.995163) 68.15%,
    rgba(54, 38, 145, 0.98) 101.77%
  ); 
  height: 100vh;
  width: 100vw;
}

/* to make the linear gradient back-ribbon */
.ribbon {
  z-index: -5;
  position: absolute;
  background: linear-gradient(
    180.69deg,
    #4e3399 10.95%,
    #f153b2 58.86%,
    #4e3399 99.4%
  );

  height: 100vh;
  width: 287px;
  top: 0;
  right: 50%;
  transform: translateX(50%);
}

/* to make the card */
.cards {
  width: 500px;
  height: 300px;
  background: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    101.96deg,
    rgba(249, 249, 249, 0.261) -0.52%,
    rgba(249, 249, 249, 0.0775668) 88.4%,
    rgba(249, 249, 249, 0.058) 100.25%
  );
  backdrop-filter: blur(20px); /* this may be not supported in other browsers */
  border-radius: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: sans-serif, monospace;
  font-size: 27px;
  font-weight: 500;
  font-style: italic;
  text-transform: uppercase;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.