CodePen Embed - CSS Pixels

<div class="canvas">
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
</div>

body {
  background: #333;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.canvas {
  width: 160px;
  height: 160px;
}

.pixel {
  width: 10px;
  height: 10px;
  float: left;
  box-shadow: 0px 0px 1px #fff;
}

/* Hair */
.pixel:nth-child(21),
.pixel:nth-child(22),
.pixel:nth-child(23),
.pixel:nth-child(24),
.pixel:nth-child(25),
.pixel:nth-child(26), 
.pixel:nth-child(27), 
.pixel:nth-child(36), 
.pixel:nth-child(37),
.pixel:nth-child(38),
.pixel:nth-child(39),
.pixel:nth-child(40),
.pixel:nth-child(41),
.pixel:nth-child(42),
.pixel:nth-child(43),
.pixel:nth-child(44), 
.pixel:nth-child(52),
.pixel:nth-child(53), 
.pixel:nth-child(54), 
.pixel:nth-child(55), 
.pixel:nth-child(60), 
.pixel:nth-child(61), 
.pixel:nth-child(67), 
.pixel:nth-child(68), 
.pixel:nth-child(69), 
.pixel:nth-child(70), 
.pixel:nth-child(71),
.pixel:nth-child(76), 
.pixel:nth-child(77), 
.pixel:nth-child(83), 
.pixel:nth-child(84), 
.pixel:nth-child(85),
.pixel:nth-child(93),
.pixel:nth-child(99), 
.pixel:nth-child(100), 
.pixel:nth-child(101), 
.pixel:nth-child(102),
.pixel:nth-child(109), 
.pixel:nth-child(110), 
.pixel:nth-child(115), 
.pixel:nth-child(116), 
.pixel:nth-child(117),
.pixel:nth-child(130),
.pixel:nth-child(131),
.pixel:nth-child(146),
.pixel:nth-child(147),
.pixel:nth-child(163),
.pixel:nth-child(178),
.pixel:nth-child(179),
.pixel:nth-child(125),
.pixel:nth-child(125) {
  background: #fbf19e;
}

/* I'm so pale */
.pixel:nth-child(56),
.pixel:nth-child(57),
.pixel:nth-child(58),
.pixel:nth-child(59),
.pixel:nth-child(72),
.pixel:nth-child(73),
.pixel:nth-child(74),
.pixel:nth-child(75),
.pixel:nth-child(86),
.pixel:nth-child(87),
.pixel:nth-child(88),
.pixel:nth-child(89),
.pixel:nth-child(90),
.pixel:nth-child(91),
.pixel:nth-child(92), 
.pixel:nth-child(92), 
.pixel:nth-child(103), 
.pixel:nth-child(104), 
.pixel:nth-child(105), 
.pixel:nth-child(106), 
.pixel:nth-child(107), 
.pixel:nth-child(108), 
.pixel:nth-child(118),
.pixel:nth-child(120),
.pixel:nth-child(121),
.pixel:nth-child(122), 
.pixel:nth-child(124),
.pixel:nth-child(132), 
.pixel:nth-child(133), 
.pixel:nth-child(134), 
.pixel:nth-child(135), 
.pixel:nth-child(136), 
.pixel:nth-child(137), 
.pixel:nth-child(138), 
.pixel:nth-child(139), 
.pixel:nth-child(140), 
.pixel:nth-child(141), 
.pixel:nth-child(148), 
.pixel:nth-child(149), 
.pixel:nth-child(150), 
.pixel:nth-child(151), 
.pixel:nth-child(152), 
.pixel:nth-child(153),  
.pixel:nth-child(155), 
.pixel:nth-child(156), 
.pixel:nth-child(164), 
.pixel:nth-child(165), 
.pixel:nth-child(166), 
.pixel:nth-child(167), 
.pixel:nth-child(168), 
.pixel:nth-child(171), 
.pixel:nth-child(172), 
.pixel:nth-child(181), 
.pixel:nth-child(182), 
.pixel:nth-child(183), 
.pixel:nth-child(184), 
.pixel:nth-child(185), 
.pixel:nth-child(186), 
.pixel:nth-child(187), 
.pixel:nth-child(188), 
.pixel:nth-child(198), 
.pixel:nth-child(199), 
.pixel:nth-child(200),  
.pixel:nth-child(203), 
.pixel:nth-child(204), 
.pixel:nth-child(215), 
.pixel:nth-child(216), 
.pixel:nth-child(217), 
.pixel:nth-child(218), 
.pixel:nth-child(219), 
.pixel:nth-child(232), 
.pixel:nth-child(233), 
.pixel:nth-child(234), 
.pixel:nth-child(235) {
  background: #f8ece7;
}

/* Eyebrows */
.pixel:nth-child(103),
.pixel:nth-child(107), 
.pixel:nth-child(118), 
.pixel:nth-child(120), 
.pixel:nth-child(122), 
.pixel:nth-child(124),
/* Nose */
.pixel:nth-child(154), 
.pixel:nth-child(169), 
.pixel:nth-child(170),
/* Mouth */
.pixel:nth-child(201),
.pixel:nth-child(202) {
  background: #dbccc6;
}

/* Eyeballs */
.pixel:nth-child(119), 
.pixel:nth-child(123) {
  background: #9bc9e8;
}

View Compiled

This Pen is owned by Geoff Graham on CodePen.

See more by @geoffgraham on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.