CSS fill-opacity Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Page layout */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  background: #f7f8fa;
  color: #111827;
}

/* SVG container appearance */
svg {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06);
}

/* Common rectangle styles */
rect {
  stroke: #0f172a;
  stroke-width: 2;
  fill: #2563eb; /* base fill color */
  transition: fill-opacity 0.2s ease;
}

/* Different fill-opacity values */
.fill-opaque {
  fill-opacity: 1; /* fully opaque */
}

.fill-semi {
  fill-opacity: 0.6; /* semi-transparent */
}

.fill-transparent {
  fill-opacity: 0.2; /* mostly transparent */
}

/* Hover to demonstrate interaction */
rect:hover {
  fill-opacity: 0.85;
  cursor: pointer;
}

.caption {
  font-size: 14px;
  color: #374151;
}
</style></head><body><h1>SVG fill-opacity example</h1>
  <svg width="400" height="120" viewBox="0 0 400 120" aria-hidden="true">
    <rect class="fill-opaque" x="10" y="10" width="110" height="100" rx="8" />
    <rect class="fill-semi" x="145" y="10" width="110" height="100" rx="8" />
    <rect class="fill-transparent" x="280" y="10" width="110" height="100" rx="8" />
  </svg>
  <p class="caption">Left: fill-opacity: 1; Middle: fill-opacity: 0.6; Right: fill-opacity: 0.2</p></body></html>