<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <meta charset="utf-8" />
  <meta name="description" content="Kwazy web" />
  <meta name="keywords" content="box-shadow, pixelated, art" />
  <meta name="author" content="linxea" />
  <title></title>
  <style>
    body {
      height: 100vh;
      margin: 50px;
      padding: 0;
      font-family: sans-serif;
      color: #2d2d2d;
    }

    .block {
      width: 20px;
      height: 20px;
      border: 1px solid #0b132b;
    }

    .one-box-shadow {
      box-shadow: 20px 0 0 #60748c;
    }

    .two-box-shadow {
      margin-bottom: 20px;
      box-shadow: 20px 0 0 #60748c, 0 20px 0 #60748c;
    }

    .heart-shadow {
      margin-bottom: 100px;
      box-shadow: 20px 0 0 #60748c, 40px 0 0 #60748c, 60px 20px 0 #60748c,
      80px 0 0 #60748c, 100px 0 0 #60748c, 120px 20px 0 #60748c,
      0 20px 0 #60748c, 60px 20px 0 #60748c, 120px 20px 0 #60748c,
      0 40px 0 #60748c, 120px 40px 0 #60748c, 20px 60px 0 #60748c,
      100px 60px 0 #60748c, 40px 80px 0 #60748c, 80px 80px 0 #60748c,
      60px 100px 0 #60748c;
    }

    :root {
      --pink-color: #d87385;
    }

    .heart-shadow-with-color-variable {
      margin-bottom: 100px;
      box-shadow: 20px 0 0 var(--pink-color), 40px 0 0 var(--pink-color),
      60px 20px 0 var(--pink-color), 80px 0 0 var(--pink-color),
      100px 0 0 var(--pink-color), 120px 20px 0 var(--pink-color),
      0 20px 0 var(--pink-color), 60px 20px 0 var(--pink-color),
      120px 20px 0 var(--pink-color), 0 40px 0 var(--pink-color),
      120px 40px 0 var(--pink-color), 20px 60px 0 var(--pink-color),
      100px 60px 0 var(--pink-color), 40px 80px 0 var(--pink-color),
      80px 80px 0 var(--pink-color), 60px 100px 0 var(--pink-color);
    }

    section {
      margin: 50px;
    }

    h1 {
      font-weight: 400;
    }

    .code-snippet {
      font-family: monospace;
      font-size: 15px;
      padding-top: 30px;
    }
  </style>
</head>

<body>
  <section>
    <h1>Step 1: Create a basic block at <code>(0,0)</code></h1>
    <div class="block"></div>
    <div class="code-snippet">
      <code><</code>div style="width:20px; height:20px"<code>></code
				><code><</code>/div<code>></code>
    </div>
  </section>

  <section>
    <h1>Step 2: Add 1 shadow at <code>(20px, 0)</code></h1>
    <div class="block one-box-shadow"></div>
    <div class="code-snippet">
      <code><</code>div style="width:20px; height:20px; box-shadow: 20px 0 0 #60748c;" <code>></code><code><</code>/div<code>></code>
    </div>
  </section>

  <section>
    <h1>Step 3: Add 2 shadows at <code>(20px, 0), (0, 20px)</code></h1>
    <div class="block two-box-shadow"></div>
    <div class="code-snippet">
      <code><</code>div style="width:20px; height:20px; box-shadow: 20px 0 0 #60748c,0 20px 0 #60748c;"<code>></code><code><</code>/div<code>></code>
    </div>
  </section>

  <section>
    <h1>Step 4: Draw a pixelated heart ❤</h1>
    <div class="block heart-shadow"></div>
    <div class="code-snippet">
      <code><</code>div style="width:20px; height:20px; box-shadow: 20px 0 0 #60748c, 40px 0 0 #60748c, 60px 20px 0 #60748c, 80px 0 0 #60748c, 100px 0 0 #60748c, 120px 20px 0 #60748c, 0 20px 0 #60748c, 60px 20px 0 #60748c, 120px 20px 0 #60748c, 0 40px
      0 #60748c, 120px 40px 0 #60748c, 20px 60px 0 #60748c, 100px 60px 0 #60748c, 40px 80px 0 #60748c, 80px 80px 0 #60748c, 60px 100px 0 #60748c;"<code>></code
				><code><</code>/div<code>></code>
    </div>
  </section>

  <section>
    <h1>Step 5: Extract the color into a CSS var()</h1>
    <div class="block heart-shadow-with-color-variable"></div>
    <div class="code-snippet">
      <pre>
<code><</code>style<code>></code>
:root {
	--pink-color: #d87385;
}

.heart-shadow-with-color-variable {
	width: 20px;
	height: 20px;
	margin-bottom: 100px;
	box-shadow: 20px 0 0 var(--pink-color), 40px 0 0 var(--pink-color),
	60px 20px 0 var(--pink-color), 80px 0 0 var(--pink-color),
	100px 0 0 var(--pink-color), 120px 20px 0 var(--pink-color),
	0 20px 0 var(--pink-color), 60px 20px 0 var(--pink-color),
	120px 20px 0 var(--pink-color), 0 40px 0 var(--pink-color),
	120px 40px 0 var(--pink-color), 20px 60px 0 var(--pink-color),
	100px 60px 0 var(--pink-color), 40px 80px 0 var(--pink-color),
	80px 80px 0 var(--pink-color), 60px 100px 0 var(--pink-color);
}
<code><</code>/style<code>></code>
			</pre>
      <code><</code>div class="heart-shadow-with-color-variable"<code>></code
				><code><</code>/div<code>></code>
    </div>
  </section>
</body>

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.