<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./index.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Glassmorphism" />
    <meta
      name="keywords"
      content="glassmorphism,UIUX"
    />
    <meta name="author" content="emmaccen" />
    <title>Glass Morphism</title>
  </head>
  <body>
    <div class="landingContainer">
      <div class="centered">
        <h1 class="title">Improving The Globe With Technology</h1>
      </div>
      <div class="glassContainer">
        <div class="cover"></div>
      </div>
    </div>
  </body>
</html>
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.landingContainer {
  /* span the entire desktop height : height: 100vh;*/
  height: 100vh;
  font-family: helvetica;
  /* set a gradient background with 3 colours https://coolors.co/ */
  background: linear-gradient(
    to right,
    rgba(32, 191, 85),
    rgba(32, 164, 243),
    rgba(11, 79, 108)
  );
}

.centered {
  /* center content */
  display: flex;
  justify-content: center;
  align-items: center;
  /* so it takes up its containers height (landingContainer)*/
  height: inherit;
}

.title {
  color: cornflower;
  /* cover the entire page width : font-size: 10vw;*/
  font-size: 10vw;
  text-align: center;
}

/* The real deal  starts here*/
.glassContainer {
  position: absolute;
  /* center content */
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  width: 100%;
  height: 100%;
}
.cover {
  transition: 0.5s all ease;
  height: 70%;
  width: 70%;
  background-color: rgba(255, 206, 55, 0.25);
  /* box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */
  box-shadow: 0 8px 32px 0 rgba(31, 255, 135, 0.37);
  /* For the fog-like glass effect */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 20px;
}

/* responsiveness */

@media (max-width: 650px) {
  .cover {
    height: 30%;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.