Pure CSS iMac 2021

HTML:

<div class="imac">
  <img src="...">
</div>

<div class="imac blue">
  <img src="...">
</div>

<div class="imac purple">
  <img src="...">
</div>

<div class="imac pink">
  <img src="...">
</div>

<!-- using iframe inside `.imac` -->
<div class="imac orange">
  <iframe src="https://kiteretz.com/about/"></iframe>
</div>

<!-- the recommended size of the inner element is 1600x900 -->
<div class="imac yellow">
  <img src="https://via.placeholder.com/1600x900">
</div>

<!-- power off -->
<div class="imac green"></div>

CSS:

.imac {
  --body-width: 50vw;
  --body-border-radius: calc(var(--body-width) * 0.016);
  --bezel-width: calc(var(--body-width) * 0.025);
  --display-height: calc(var(--body-width) * 0.538);
  --front-panel-height: calc(var(--body-width) * 0.125);
  --stand-height: calc(var(--body-width) * 0.1554);
  --stand-width: calc(var(--body-width) * 0.2372);
  --color: #d5d6d8;  
  display: grid;
  grid: var(--bezel-width) 
        var(--display-height) 
        var(--front-panel-height)
        var(--stand-height) 
        / var(--bezel-width) 1fr var(--stand-width) 1fr var(--bezel-width);
  width: var(--body-width);
}

.imac > * {
  background: #fff;
  border-radius: calc(var(--body-width) * 0.002);
  border: calc(var(--body-width) * 0.001) solid #333;
  grid-area: 2 / 2 / 3 / 5;
  place-self: stretch;
}

.imac::before {
  background: 
    radial-gradient(circle,
      #333 calc(100% - 1px), 
      transparent calc(100% - 0.5px)
    ),
    linear-gradient(to bottom, 
      #eeeef0 85.25%, 
      var(--color) 85.25%
    );
  background-repeat: no-repeat;
  background-position: top var(--bezel-width) center, top;
  background-size: 94.8% 78%, 100%;
  border-radius: var(--body-border-radius);
  box-shadow: 0 0 calc(var(--body-width) * 0.001) rgba(0 0 0 / 0.2);
  content: "";
  grid-area: 1 / 1 / 4 / 6;
}

.imac::after {
  background:
    linear-gradient(to bottom, 
      rgba(0 0 0 / 0.125),
      rgba(0 0 0 / 0.05) 55%,
      rgba(0 0 0 / 0.05) 75%,
      rgba(0 0 0 / 0.075) 92%,
      rgba(255 255 255 / 0.3) 96%,
      rgba(0 0 0 / 0.35) 99%
    ),
    linear-gradient(to right, 
      rgba(255 255 255 / 0.2),
      rgba(0 0 0 / 0.35) 1%,
      rgba(255 255 255 / 0.3) 4%,
      rgba(0 0 0 / 0.02) 8%,
      rgba(255 255 255 / 0.2) 25%,
      rgba(255 255 255 / 0.2) 75%,
      rgba(0 0 0 / 0.02) 92%,
      rgba(255 255 255 / 0.3) 96%,
      rgba(0 0 0 / 0.35) 99%,
      rgba(255 255 255 / 0.2)
    ),
    linear-gradient(to bottom,
      var(--color),
      var(--color)
    );
  background-repeat: no-repeat;
  background-position: top, bottom, top;
  background-size: 100% 94%, 100% 6%, 100%;
  border-radius: 0 0 6% 6% / 2%;
  box-shadow: 0 0 calc(var(--body-width) * 0.001) rgba(0 0 0 / 0.2);
  content: "";
  grid-area: 4 / 3 / 5 / 4;
  z-index: -1;
}

.imac.blue {
  --color: #b6c8db;
}

.imac.purple {
  --color: #c5c6e6;
}

.imac.pink {
  --color: #ecccc6;
}

.imac.orange {
  --color: #e8b7a5;
}

.imac.yellow {
  --color: #f4d596;
}

.imac.green {
  --color: #bcd0c8;
}

Results:

To change the size of iMac, just edit or override the --body-width custom property.

You can easily create your original color iMac by editing the --color custom property 😉