CSS all Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Basic page styles */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f7fafc;
  color: #0f172a;
  padding: 32px;
  line-height: 1.4;
}

.wrapper {
  max-width: 880px;
  margin: 0 auto;
}

.row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.example {
  background: #fff;
  border: 1px solid #e6e9ee;
  padding: 16px;
  border-radius: 8px;
  width: 260px;
  box-shadow: 0 2px 6px rgba(11, 15, 25, 0.03);
}

.example p {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #334155;
}

/* Default button shows browser's built-in styling */
button {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  cursor: pointer;
}

/* all: unset removes all inherited and user-agent styles, making it a blank slate */
.btn-unset {
  all: unset;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, #06b6d4, #0891b2);
  color: #fff;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

/* all: initial resets properties to their initial values defined in the spec */
.btn-initial {
  all: initial;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, #f97316, #ea580c);
  color: #fff;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

/* small responsive tweak */
@media (max-width: 640px) {
  .row {
    flex-direction: column;
  }
  .example {
    width: 100%;
  }
}</style></head><body><div class='wrapper'>
      <h1>CSS all property  -  examples</h1>

      <div class='row'>
        <div class='example'>
          <p>Default button (browser styles)</p>
          <button>Default</button>
        </div>

        <div class='example'>
          <p>Button with all: unset (removes default button styles)</p>
          <button class='btn-unset'>Unstyled</button>
        </div>

        <div class='example'>
          <p>Button with all: initial (resets properties to initial values)</p>
          <button class='btn-initial'>Initial</button>
        </div>
      </div>
    </div></body></html>