CSS Text Mask animation | HTML, CSS & JavaScript

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

body {
  background: #111;
  color: #fff;
  padding: 30px;
}

h2 {
  margin-bottom: 10px;
}

.section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
  background: #1a1a1a;
  padding: 20px;
  border-radius: 12px;
}

/* LEFT PREVIEW */
.preview {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e0e0e0;
  border-radius: 10px;
  height: 200px;
}

/* ===== EMBOSS STYLES ===== */

/* 1. Classic */
.emboss {
  font-size: 40px;
  color: #e0e0e0;
  text-shadow:
    -2px -2px 3px #ffffff,
     2px  2px 3px #a3a3a3;
}

/* 2. Inset */
.inset {
  font-size: 40px;
  color: #b8b8b8;
  text-shadow:
     2px  2px 3px #ffffff,
    -2px -2px 3px #888888;
}

/* 3. Neumorphism */
.neumorph {
  font-size: 40px;
  color: #e0e0e0;
  text-shadow:
    5px 5px 10px #babecc,
   -5px -5px 10px #ffffff;
}

/* 4. Strong 3D */
.strong {
  font-size: 40px;
  color: #ddd;
  text-shadow:
    1px 1px 0 #bbb,
    2px 2px 0 #999,
    3px 3px 0 #777,
    4px 4px 5px rgba(0,0,0,0.3);
}

/* 5. Glow Emboss */
.glow {
  font-size: 40px;
  color: #e0e0e0;
  text-shadow:
    -2px -2px 3px #fff,
     2px  2px 5px rgba(0,0,0,0.5),
     0 0 10px #00f0ff;
}

/* 6. Hover Press Effect */
.press {
  font-size: 40px;
  color: #e0e0e0;
  text-shadow:
    -2px -2px 3px #fff,
     2px  2px 3px #999;
  transition: 0.3s;
}

.press:hover {
  text-shadow:
     2px  2px 3px #fff,
    -2px -2px 3px #777;
}

/* Responsive */
@media(max-width: 768px){
  .section {
    grid-template-columns: 1fr;
  }
}

- CSS Text Mask animation

Live Preview