CSS background-color Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Container */
.example {
  max-width: 720px;
  margin: 40px auto;
  padding: 20px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #111;
}

/* Box base styles */
.box {
  padding: 12px 16px;
  border-radius: 6px;
  margin: 12px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Examples of background-color using different value types */
.box.default {
  background-color: #f5f5f5; /* hex value */
}

.box.named {
  background-color: lightblue; /* named color */
}

.box.hex {
  background-color: #ffcc00; /* hex value */
}

.box.rgba {
  background-color: rgba(255, 0, 0, 0.12); /* rgba value with alpha */
}

/* Button with a solid background color */
.btn {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  background-color: hsl(200, 90%, 50%); /* HSL value */
  color: #fff;
  cursor: pointer;
}

.btn:active {
  transform: translateY(1px);
}</style></head><body><div class="example">
  <h1>CSS background-color examples</h1>

  <div class="box default">Default background (light gray)</div>

  <div class="box named">Named color: lightblue</div>

  <div class="box hex">Hex color: #ffcc00</div>

  <div class="box rgba">RGBA color: rgba(255, 0, 0, 0.12)</div>

  <button class="btn">Solid background button</button>
</div></body></html>