Green Glassmorphism

aartigoyal
Jan 30, 2026 2
Live Preview

Live Editor

<div class="card">
  <div class="label">LABEL</div>
  <h1>Glassmorphism</h1>

  <div class="icon">
    <div class="dots"></div>
  </div>

  <div class="divider"></div>

  <p>
    Glassmorphism 
  </p>
</div>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:
    radial-gradient(circle at top left,#2e7d32,#0b3d1f);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

/* card */
.card{
  width:340px;
  height:290px;
  padding:28px;
  border-radius:26px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.18),
    rgba(255,255,255,.06)
  );
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:#fff;
  box-shadow:
    0 30px 80px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(255,255,255,.35);
  position:relative;
  overflow:hidden;
  transition:.45s ease;
}

/* hover lift */
.card:hover{
  transform:translateY(-14px) scale(1.02);
  box-shadow:
    0 50px 120px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.55);
}

/* moving shine */
.card::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.25),
    transparent
  );
  transform:translateX(-100%);
  transition:1s;
}

.card:hover::before{
  transform:translateX(100%);
}

/* header */
.label{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  font-size:13px;
  margin-bottom:16px;
}

h1{
  margin:0 0 20px;
  font-size:34px;
  font-weight:600;
}

/* icon box */
.icon{
  width:70px;
  height:70px;
  border-radius:18px;
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  display:grid;
  place-items:center;
  margin-bottom:28px;
}

.dots{
  width:26px;
  height:26px;
  background:
    radial-gradient(circle,#fff 2px,transparent 2px);
  background-size:8px 8px;
  opacity:.6;
}

/* divider */
.divider{
  height:14px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.35),
    rgba(255,255,255,.05)
  );
  margin:26px 0;
}

/* text */
p{
  font-size:13px;
  line-height:1.6;
  opacity:.85;
  text-align:center;
}
Categories

Green Glassmorphism

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
