<div class="square light"><span class="piece black">♜</span></div>
    <div class="square dark"><span class="piece black">♞</span></div>
    <div class="square light"><span class="piece black">♝</span></div>
    <div class="square dark"><span class="piece black">♛</span></div>
    <div class="square light"><span class="piece black">♚</span></div>
    <div class="square dark"><span class="piece black">♝</span></div>
    <div class="square light"><span class="piece black">♞</span></div>
    <div class="square dark"><span class="piece black">♜</span></div>

<div class="square dark"><span class="piece black">♟</span></div>
    <div class="square light"><span class="piece black">♟</span></div>
    <div class="square dark"><span class="piece black">♟</span></div>
    <div class="square light"><span class="piece black">♟</span></div>
    <div class="square dark"><span class="piece black">♟</span></div>
    <div class="square light"><span class="piece black">♟</span></div>
    <div class="square dark"><span class="piece black">♟</span></div>
    <div class="square light"><span class="piece black">♟</span></div>

<div class="square light"></div>
    <div class="square dark"></div>
    <div class="square light"></div>
    <div class="square dark"></div>
    <div class="square light"></div>
    <div class="square dark"></div>
    <div class="square light"></div>
    <div class="square dark"></div>

<div class="square dark"></div>
    <div class="square light"></div>
    <div class="square dark"></div>
    <div class="square light"></div>
    <div class="square dark"></div>
    <div class="square light"></div>
    <div class="square dark"></div>
    <div class="square light"></div>

<div class="square light"></div>
    <div class="square dark"></div>
    <div class="square light"></div>
    <div class="square dark"></div>
    <div class="square light"></div>
    <div class="square dark"></div>
    <div class="square light"></div>
    <div class="square dark"></div>

<div class="square dark"></div>
    <div class="square light"></div>
    <div class="square dark"></div>
    <div class="square light"></div>
    <div class="square dark"></div>
    <div class="square light"></div>
    <div class="square dark"></div>
    <div class="square light"></div>

<div class="square light"><span class="piece white">♙</span></div>
    <div class="square dark"><span class="piece white">♙</span></div>
    <div class="square light"><span class="piece white">♙</span></div>
    <div class="square dark"><span class="piece white">♙</span></div>
    <div class="square light"><span class="piece white">♙</span></div>
    <div class="square dark"><span class="piece white">♙</span></div>
    <div class="square light"><span class="piece white">♙</span></div>
    <div class="square dark"><span class="piece white">♙</span></div>

<div class="square dark"><span class="piece white">♖</span></div>
    <div class="square light"><span class="piece white">♘</span></div>
    <div class="square dark"><span class="piece white">♗</span></div>
    <div class="square light"><span class="piece white">♕</span></div>
    <div class="square dark"><span class="piece white">♔</span></div>
    <div class="square light"><span class="piece white">♗</span></div>
    <div class="square dark"><span class="piece white">♘</span></div>
    <div class="square light"><span class="piece white">♖</span></div>

</div>

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;

display: flex;
  align-items: center;
  justify-content: center;

background:
    radial-gradient(
      circle at top,
      #1f2937,
      #0f172a 55%,
      #020617
    );

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

/* ==============================
   OUTER CONTAINER
============================== */

.chess-shell {
  padding: 18px;

border-radius: 28px;

background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.09),
      rgba(255,255,255,0.025)
    );

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

box-shadow:
    0 30px 80px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.08);

backdrop-filter:
    blur(18px);
}

/* ==============================
   BOARD
============================== */

.board {
  width: min(82vw, 620px);
  aspect-ratio: 1;

display: grid;

grid-template-columns:
    repeat(8, 1fr);

grid-template-rows:
    repeat(8, 1fr);

overflow: hidden;

border-radius: 18px;

box-shadow:
    0 18px 45px rgba(0,0,0,0.45);
}

/* ==============================
   SQUARES
============================== */

.square {
  position: relative;

display: flex;
  align-items: center;
  justify-content: center;

transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.light {
  background:
    linear-gradient(
      145deg,
      #e7ecf3,
      #cfd6df
    );
}

.dark {
  background:
    linear-gradient(
      145deg,
      #526173,
      #364152
    );
}

/* Hover effect */

.square:hover {
  z-index: 3;

transform:
    scale(1.06);

filter:
    brightness(1.12);

box-shadow:
    inset 0 0 0 3px
    rgba(99,102,241,0.55);
}

/* ==============================
   PIECES
============================== */

.piece {
  font-family:
    "Times New Roman",
    serif;

font-size:
    clamp(30px, 7vw, 58px);

line-height: 1;

cursor: default;

user-select: none;

transition:
    transform 0.2s ease,
    text-shadow 0.2s ease;
}

.square:hover .piece {
  transform:
    translateY(-4px)
    scale(1.08);
}

/* White pieces */

.white {
  color: #ffffff;

text-shadow:
    0 2px 0 #cbd5e1,
    0 5px 8px rgba(0,0,0,0.4),
    0 0 3px rgba(255,255,255,0.7);
}

/* Black pieces */

.black {
  color: #111827;

text-shadow:
    0 2px 0 rgba(255,255,255,0.15),
    0 5px 8px rgba(0,0,0,0.4);
}

/* ==============================
   SUBTLE BOARD SHINE
============================== */

.board::after {
  content: "";

position: absolute;

inset: 0;

pointer-events: none;

background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.08),
      transparent 32%,
      transparent 68%,
      rgba(255,255,255,0.035)
    );
}

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