CSS inset Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Simple demo of the CSS inset property (shorthand, longhand, block/inline) */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f3f4f6;
  color: #0f172a;
  padding: 28px;
}

.demo {
  max-width: 720px;
  margin: 18px auto;
}

h2 {
  font-size: 16px;
  margin: 0 0 10px;
  color: #0f172a;
  font-weight: 600;
}

.frame {
  position: relative;
  height: 140px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid #e6e9ee;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(2, 6, 23, 0.03);
}

.box {
  position: absolute; /* inset only works on positioned elements */
  color: #ffffff;
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Shorthand: top/bottom = 24px, left/right = 40px */
.box-shorthand {
  inset: 24px 40px;
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
}

/* Longhand: equivalent to setting top/right/bottom/left individually */
.box-longhand {
  top: 16px;
  right: 24px;
  bottom: 16px;
  left: 48px;
  background: linear-gradient(135deg, #ef4444, #f97316);
}

/* inset-block and inset-inline control block (top/bottom) and inline (left/right) axes */
.box-inline {
  inset-block: 20px 20px;   /* top:20px; bottom:20px */
  inset-inline: 40px;       /* left:40px; right:40px */
  background: linear-gradient(135deg, #10b981, #06b6d4);
}
</style></head><body><div class="demo">
    <h2>Inset  -  shorthand</h2>
    <div class="frame">
      <div class="box box-shorthand">inset: 24px 40px;</div>
    </div>
  </div>

  <div class="demo">
    <h2>Inset  -  longhand</h2>
    <div class="frame">
      <div class="box box-longhand">top: 16px; right: 24px; bottom: 16px; left: 48px;</div>
    </div>
  </div>

  <div class="demo">
    <h2>Inset  -  block & inline</h2>
    <div class="frame">
      <div class="box box-inline">inset-block: 20px 20px; inset-inline: 40px;</div>
    </div>
  </div></body></html>