Oversized Number — Playground

{CF} CodeFronts Back to CSS Hero Sections Oversized Number Pure CSS

Edit any tab — preview updates live

.hs-num {
  position: relative;
  width: 100%;
  min-height: clamp(220px, 28vh, 100vh);
  padding: clamp(20px, 4vh, 80px) clamp(16px, 4vw, 40px);
  background: #0e0e16;
  display: flex; align-items: center; justify-content: center;
  font-family: system-ui, sans-serif; color: #f0eeff;
  overflow: hidden;
}
.hs-num-bg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(140px, 36vw, 480px);
  font-weight: 900; letter-spacing: -0.05em;
  line-height: 0.85;
  color: transparent;
  background: linear-gradient(180deg, rgba(124,108,255,0.16), rgba(167,139,250,0.04));
  -webkit-background-clip: text; background-clip: text;
  pointer-events: none; user-select: none;
}
.hs-num-c {
  position: relative; z-index: 1;
  max-width: 600px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hs-num-eye {
  font-family: monospace; font-size: clamp(9px, 1.3vw, 11px);
  letter-spacing: 0.16em; color: #a78bfa; text-transform: uppercase;
}
.hs-num h1 {
  margin: 0; font-size: clamp(20px, 4.5vw, 50px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
}
.hs-num p { margin: 0; font-size: clamp(11px, 1.5vw, 15px); color: #b8b6d4; line-height: 1.5; }
.hs-num-cta {
  padding: 9px 20px; border-radius: 7px;
  background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff;
  font-size: clamp(11px, 1.5vw, 14px); font-weight: 700;
  text-decoration: none; margin-top: 4px;
  transition: filter 0.15s;
}
.hs-num-cta:hover { filter: brightness(1.12); }

Live preview Ready