diff --git a/.gitignore b/.gitignore
index 573d61e..6f51f5e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,4 @@
 
 !*.html
 !*.md
-!*.png
-!*.py
 !*.woff2
diff --git a/back.png b/back.png
deleted file mode 100644
index 88c1211..0000000
Binary files a/back.png and /dev/null differ
diff --git a/bottom.png b/bottom.png
deleted file mode 100644
index ff7fe4c..0000000
Binary files a/bottom.png and /dev/null differ
diff --git a/front.png b/front.png
deleted file mode 100644
index dc29fd9..0000000
Binary files a/front.png and /dev/null differ
diff --git a/generate_sides.py b/generate_sides.py
deleted file mode 100644
index 9f9639e..0000000
--- a/generate_sides.py
+++ /dev/null
@@ -1,70 +0,0 @@
-from PIL import Image, ImageDraw
-
-width, height = 1024, 1024
-
-canvas = Image.new("RGB", (width, height))
-draw   = ImageDraw.Draw(canvas)
-
-sides = {
-    "front": [
-        (000, 255, 255),
-        (255, 255, 255),
-        (000, 000, 255),
-        (255, 000, 255),
-    ],
-    "top": [
-        (000, 255, 000),
-        (255, 255, 000),
-        (000, 255, 255),
-        (255, 255, 255),
-    ],
-    "back": [
-        (255, 255, 000),
-        (000, 255, 000),
-        (255, 000, 000),
-        (000, 000, 000),
-    ],
-    "bottom": [
-        (000, 000, 255),
-        (255, 000, 255),
-        (000, 000, 000),
-        (255, 000, 000),
-    ],
-    "right": [
-        (255, 255, 255),
-        (255, 255, 000),
-        (255, 000, 255),
-        (255, 000, 000),
-    ],
-    "left": [
-        (000, 255, 000),
-        (000, 255, 255),
-        (000, 000, 000),
-        (000, 000, 255),
-    ],
-}
-
-for side, colors in sides.items():
-    top_left, top_right = colors[0], colors[1]
-    bottom_left, bottom_right = colors[2], colors[3]
-
-    for y in range(height):
-        left = (
-            int((bottom_left[0] - top_left[0]) * y / height) + top_left[0],
-            int((bottom_left[1] - top_left[1]) * y / height) + top_left[1],
-            int((bottom_left[2] - top_left[2]) * y / height) + top_left[2]
-        )
-        right = (
-            int((bottom_right[0] - top_right[0]) * y / height) + top_right[0],
-            int((bottom_right[1] - top_right[1]) * y / height) + top_right[1],
-            int((bottom_right[2] - top_right[2]) * y / height) + top_right[2]
-        )
-
-        for x in range(width):
-            r = int((right[0] - left[0]) * x / width) + left[0]
-            g = int((right[1] - left[1]) * x / width) + left[1]
-            b = int((right[2] - left[2]) * x / width) + left[2]
-
-            draw.point((x, y), fill=(r, g, b))
-
-    canvas.save(f"{side}.png")
diff --git a/index.html b/index.html
index 034e4b6..24eeffa 100644
--- a/index.html
+++ b/index.html
@@ -104,34 +104,72 @@
       position: absolute;
     }
 
+    .face::after {
+      z-index: -1;
+      content: "";
+      width: inherit;
+      height: inherit;
+      position: absolute;
+    }
+
     .front {
       transform: rotateY(0deg) translateZ(2.5em);
-      background-image: url(front.png);
+      background: linear-gradient(to bottom, cyan, blue);
+    }
+
+    .front::after {
+      background: linear-gradient(to bottom, white, magenta);
+      mask-image: linear-gradient(to left, magenta, transparent);
     }
 
     .top {
       transform: rotateX(90deg) translateZ(2.5em);
-      background-image: url(top.png);
+      background: linear-gradient(to bottom, lime, cyan);
+    }
+
+    .top::after {
+      background: linear-gradient(to bottom, yellow, white);
+      mask-image: linear-gradient(to left, white, transparent);
     }
 
     .back {
       transform: rotateY(180deg) translateZ(2.5em);
-      background-image: url(back.png);
+      background: linear-gradient(to bottom, yellow, red);
+    }
+
+    .back::after {
+      background: linear-gradient(to bottom, lime, black);
+      mask-image: linear-gradient(to left, black, transparent);
     }
 
     .bottom {
       transform: rotateX(-90deg) translateZ(2.5em);
-      background-image: url(bottom.png);
+      background: linear-gradient(to bottom, blue, black);
+    }
+
+    .bottom::after {
+      background: linear-gradient(to bottom, magenta, red);
+      mask-image: linear-gradient(to left, red, transparent);
     }
 
     .right {
       transform: rotateY(90deg) translateZ(2.5em);
-      background-image: url(right.png);
+      background: linear-gradient(to bottom, white, magenta);
+    }
+
+    .right::after {
+      background: linear-gradient(to bottom, yellow, red);
+      mask-image: linear-gradient(to left, red, transparent);
     }
 
     .left {
       transform: rotateY(-90deg) translateZ(2.5em);
-      background-image: url(left.png);
+      background: linear-gradient(to bottom, lime, black);
+    }
+
+    .left::after {
+      background: linear-gradient(to bottom, cyan, blue);
+      mask-image: linear-gradient(to left, blue, transparent);
     }
   </style>
 
@@ -315,4 +353,4 @@
   </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/left.png b/left.png
deleted file mode 100644
index ec4644f..0000000
Binary files a/left.png and /dev/null differ
diff --git a/right.png b/right.png
deleted file mode 100644
index 2895be5..0000000
Binary files a/right.png and /dev/null differ
diff --git a/top.png b/top.png
deleted file mode 100644
index 9c72643..0000000
Binary files a/top.png and /dev/null differ