<!DOCTYPE html>
<html>
<head>
<title>Piano layout</title>
</head>
<body>

<div class="piano-title">
    <h1>Studio Piano</h1>
    <p>HTML + CSS keyboard</p>
  </div>

<div class="white-key"><span>C</span></div>
    <div class="white-key"><span>D</span></div>
    <div class="white-key"><span>E</span></div>
    <div class="white-key"><span>F</span></div>
    <div class="white-key"><span>G</span></div>
    <div class="white-key"><span>A</span></div>
    <div class="white-key"><span>B</span></div>

<div class="black-key black-1"></div>
    <div class="black-key black-2"></div>

</div>

</body>
</html>

```css
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

background:
    radial-gradient(
      circle at 50% 25%,
      #2a2d34 0%,
      #16181d 45%,
      #090a0d 100%
    );

font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;
}

/* =========================
   WRAPPER
========================= */

.piano-wrap {
  width: min(94vw, 1100px);
  text-align: center;
}

/* =========================
   TITLE
========================= */

.piano-title {
  margin-bottom: 28px;
  color: white;
}

.piano-title h1 {
  margin: 0;

font-size:
    clamp(24px, 4vw, 42px);

font-weight: 500;
  letter-spacing: -1px;
}

.piano-title p {
  margin: 8px 0 0;

font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;

color:
    rgba(255,255,255,0.4);
}

/* =========================
   PIANO BODY
========================= */

.piano {
  position: relative;

width: 100%;
  aspect-ratio: 15 / 4.4;

display: flex;

padding:
    34px 24px 22px;

border-radius: 24px;

background:
    linear-gradient(
      180deg,
      #23262c 0%,
      #17191e 60%,
      #0d0f12 100%
    );

border:
    1px solid rgba(255,255,255,0.09);

box-shadow:
    0 35px 70px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -3px 8px rgba(0,0,0,0.75);
}

/* subtle top strip */

.piano::before {
  content: "";

position: absolute;

left: 28px;
  right: 28px;
  top: 16px;

height: 6px;

border-radius: 10px;

background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.08),
      transparent
    );
}

/* =========================
   WHITE KEYS
========================= */

.white-key {
  position: relative;

flex: 1;

height: 100%;

background:
    linear-gradient(
      90deg,
      #dfe2e5 0%,
      #ffffff 14%,
      #f8f8f8 52%,
      #e5e7e9 100%
    );

border:
    1px solid #b7bbc0;

border-top: none;

border-radius:
    0 0 7px 7px;

box-shadow:
    inset 0 -7px 10px rgba(0,0,0,0.08),
    inset 2px 0 2px rgba(255,255,255,0.9),
    0 5px 0 #a8acb1,
    0 9px 13px rgba(0,0,0,0.3);

transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    filter 0.1s ease;

z-index: 1;
}

/* labels */

.white-key span {
  position: absolute;

left: 50%;
  bottom: 14px;

transform:
    translateX(-50%);

font-size: 11px;
  font-weight: 600;

color:
    rgba(30,35,40,0.4);

user-select: none;
}

/* press effect */

.white-key:hover {
  filter: brightness(0.97);

transform:
    translateY(3px);

box-shadow:
    inset 0 -4px 7px rgba(0,0,0,0.12),
    inset 2px 0 2px rgba(255,255,255,0.8),
    0 2px 0 #a8acb1,
    0 5px 8px rgba(0,0,0,0.25);
}

/* =========================
   BLACK KEYS
========================= */

.black-key {
  position: absolute;

top: 34px;

width: 4.1%;
  height: 56%;

border-radius:
    0 0 6px 6px;

background:
    linear-gradient(
      90deg,
      #0a0a0b 0%,
      #282a2e 17%,
      #101114 50%,
      #24262a 82%,
      #050506 100%
    );

border:
    1px solid #050506;

box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.11),
    inset 0 -10px 13px rgba(0,0,0,0.75),
    0 6px 0 #020203,
    0 10px 12px rgba(0,0,0,0.48);

z-index: 5;

transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

/* black key shine */

.black-key::after {
  content: "";

position: absolute;

left: 16%;
  right: 16%;
  top: 5px;

height: 45%;

border-radius: 3px;

background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08),
      transparent
    );
}

/* black key press */

.black-key:hover {
  transform:
    translateY(4px);

box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.08),
    inset 0 -7px 10px rgba(0,0,0,0.8),
    0 2px 0 #020203,
    0 5px 8px rgba(0,0,0,0.4);
}

/* =========================
   BLACK KEY POSITIONS
========================= */

/* first octave */

.black-1 {
  left: 8.2%;
}

.black-2 {
  left: 14.7%;
}

.black-4 {
  left: 27.8%;
}

.black-5 {
  left: 34.4%;
}

.black-6 {
  left: 41%;
}

/* second octave */

.black-8 {
  left: 54.1%;
}

.black-9 {
  left: 60.7%;
}

.black-11 {
  left: 73.8%;
}

.black-12 {
  left: 80.4%;
}

.black-13 {
  left: 87%;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 700px) {

.piano {
    padding:
      25px 12px 16px;

border-radius: 16px;
  }

.black-key {
    top: 25px;
  }

.white-key span {
    font-size: 9px;
    bottom: 8px;
  }
}
```

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground