HTML Code

<!DOCTYPE html>

<html>

<head>

  <title>CSS background-color Theme Variables</title>

  <style>

    :root {

      --surface: #ecfdf5;

      --accent: #059669;

      --accent-dark: #047857;

    }

    body {

      font-family: sans-serif;

      padding: 1.5rem;

      background: #f8fafc;

    }

    .panel {

      background-color: var(--surface);

      padding: 1rem;

      border-radius: 0.75rem;

      border: 1px solid #a7f3d0;

      margin-bottom: 1rem;

    }

    .badge {

      display: inline-block;

      padding: 0.35rem 0.75rem;

      border-radius: 999px;

      color: #fff;

      background-color: var(--accent);

      font-weight: 700;

    }

    .button {

      margin-top: 0.75rem;

      padding: 0.65rem 1rem;

      border: none;

      border-radius: 0.55rem;

      color: #fff;

      background-color: var(--accent-dark);

      font-weight: 700;

      cursor: pointer;

    }

  </style>

</head>

<body>

  <h1>Theme Colors</h1>

  <div class="panel">

    <span class="badge">New</span>

    <p>Change <code>--surface</code> and <code>--accent</code> once to update every background.</p>

    <button class="button" type="button">Save</button>

  </div>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS background-color Property - CSS Variables