Bring holiday cheer to your browser by crafting a 3D Santa Claus using just HTML and CSS! In this festive blog, we’ll guide you through designing a jolly Santa with his iconic red suit, hat, beard, and even a cheerful smile. By leveraging CSS 3D transforms, gradients, and clever layering techniques, we’ll create a character full of depth and personality—no JavaScript or images required. Perfect for holiday-themed web designs or sharpening your front-end skills, this project will add a sprinkle of magic to your CSS journey. Ready to bring Santa to life? Let’s sleigh this challenge! 🎅✨
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
Demo
See the Pen Santa in 3D-pixel grid (css) by Mark Boots (@MarkBoots) on CodePen.
HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Coding Torque</title>
</head>
<body>
<!-- Further code here -->
</body>
</html>Paste the below code in your <body> tag.
<!-- sorry if your browser blew up -->
<!-- based on model by Stadalf (https://sketchfab.com/3d-models/christmas-calendar-day-15-santa-claus-028359a8b09547c0a2d25e2717fb0a1c) -->
<div scene style="--size: 60vmin">
<div rotation animate="true">
<div center-z>
<div grid style="--dimension: 26">
<!--l: layers counted from bottom to top -->
<!--r: row counted from back to front -->
<!--c: column counted from left to right -->
<div layer style="--l: 1">
<div pixel style="--r: 13; --c:11; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 13; --c:12; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 13; --c:15; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 13; --c:16; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 14; --c:11; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 14; --c:12; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 14; --c:15; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 14; --c:16; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 15; --c:11; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 15; --c:12; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 15; --c:15; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 15; --c:16; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 16; --c:11; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 16; --c:12; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 16; --c:15; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 16; --c:16; --color: var(--brown)"><span></span></div>
</div>
<div layer style="--l: 2">
<div pixel style="--r: 13; --c:11; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 13; --c:12; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 13; --c:15; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 13; --c:16; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 14; --c:11; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 14; --c:12; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 14; --c:15; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 14; --c:16; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 15; --c:11; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 15; --c:12; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 15; --c:15; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 15; --c:16; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 16; --c:11; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 16; --c:12; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 16; --c:15; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 16; --c:16; --color: var(--brown)"><span></span></div>
</div>
<div layer style="--l: 3">
<div pixel style="--r: 13; --c:11; --color: var(--white)"><span></span></div>
<div pixel style="--r: 13; --c:12; --color: var(--white)"><span></span></div>
<div pixel style="--r: 13; --c:15; --color: var(--white)"><span></span></div>
<div pixel style="--r: 13; --c:16; --color: var(--white)"><span></span></div>
<div pixel style="--r: 14; --c:11; --color: var(--white)"><span></span></div>
<div pixel style="--r: 14; --c:12; --color: var(--white)"><span></span></div>
<div pixel style="--r: 14; --c:15; --color: var(--white)"><span></span></div>
<div pixel style="--r: 14; --c:16; --color: var(--white)"><span></span></div>
</div>
<div layer style="--l: 4">
<div pixel style="--r: 13; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:16; --color: var(--red)"><span></span></div>
</div>
<div layer style="--l: 5">
<div pixel style="--r: 13; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:16; --color: var(--red)"><span></span></div>
</div>
<div layer style="--l: 6">
<div pixel style="--r: 13; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:16; --color: var(--red)"><span></span></div>
</div>
<div layer style="--l: 7">
<div pixel style="--r: 12; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:9; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 13; --c:10; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 13; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:17; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 13; --c:18; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 14; --c:9; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 14; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:18; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 15; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:15; --color: var(--red)"><span></span></div>
</div>
<div layer style="--l: 8">
<div pixel style="--r: 12; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:9; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 13; --c:10; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 13; --c:17; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 13; --c:18; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 14; --c:9; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 14; --c:10; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 14; --c:17; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 14; --c:18; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 15; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:16; --color: var(--red)"><span></span></div>
</div>
<div layer style="--l: 9">
<div pixel style="--r: 12; --c:11; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 12; --c:12; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 12; --c:13; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 12; --c:14; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 12; --c:15; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 12; --c:16; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 13; --c:9; --color: var(--white)"><span></span></div>
<div pixel style="--r: 13; --c:10; --color: var(--white)"><span></span></div>
<div pixel style="--r: 13; --c:17; --color: var(--white)"><span></span></div>
<div pixel style="--r: 13; --c:18; --color: var(--white)"><span></span></div>
<div pixel style="--r: 14; --c:9; --color: var(--white)"><span></span></div>
<div pixel style="--r: 14; --c:10; --color: var(--white)"><span></span></div>
<div pixel style="--r: 14; --c:17; --color: var(--white)"><span></span></div>
<div pixel style="--r: 14; --c:18; --color: var(--white)"><span></span></div>
<div pixel style="--r: 15; --c:11; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 15; --c:16; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 16; --c:11; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 16; --c:12; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 16; --c:13; --color: var(--gold)"><span></span></div>
<div pixel style="--r: 16; --c:14; --color: var(--gold)"><span></span></div>
<div pixel style="--r: 16; --c:15; --color: var(--brown)"><span></span></div>
<div pixel style="--r: 16; --c:16; --color: var(--brown)"><span></span></div>
</div>
<div layer style="--l: 10">
<div pixel style="--r: 12; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:9; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:18; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:9; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:18; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:16; --color: var(--red)"><span></span></div>
</div>
<div layer style="--l: 11">
<div pixel style="--r: 12; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:9; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:18; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:9; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:18; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 17; --c:13; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:14; --color: var(--grey)"><span></span></div>
</div>
<div layer style="--l: 12">
<div pixel style="--r: 12; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:9; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:18; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:9; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:18; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 17; --c:12; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:13; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:14; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:15; --color: var(--grey)"><span></span></div>
</div>
<div layer style="--l: 13">
<div pixel style="--r: 12; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:9; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:18; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:9; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:18; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:11; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 16; --c:16; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:12; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:13; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:14; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:15; --color: var(--grey)"><span></span></div>
</div>
<div layer style="--l: 14">
<div pixel style="--r: 12; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:9; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:18; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:9; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:18; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:10; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 15; --c:17; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 16; --c:10; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 16; --c:17; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:11; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:12; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:13; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:14; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:15; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:16; --color: var(--grey)"><span></span></div>
</div>
<div layer style="--l: 15">
<div pixel style="--r: 11; --c:11; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 11; --c:12; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 11; --c:13; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 11; --c:14; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 11; --c:15; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 11; --c:16; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 12; --c:11; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 12; --c:16; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 13; --c:11; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 13; --c:16; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 14; --c:10; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 14; --c:17; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 15; --c:10; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 15; --c:17; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 16; --c:10; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 16; --c:17; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:11; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:12; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:13; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:14; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:15; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:16; --color: var(--grey)"><span></span></div>
</div>
<div layer style="--l: 16">
<div pixel style="--r: 11; --c:11; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 11; --c:12; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 11; --c:13; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 11; --c:14; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 11; --c:15; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 11; --c:16; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 12; --c:11; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 12; --c:16; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 13; --c:10; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 13; --c:17; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 14; --c:10; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 14; --c:17; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 15; --c:10; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 15; --c:17; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 16; --c:11; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 16; --c:16; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 17; --c:12; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 17; --c:15; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 18; --c:13; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 18; --c:14; --color: var(--skin)"><span></span></div>
</div>
<div layer style="--l: 17">
<div pixel style="--r: 11; --c:11; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 11; --c:12; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 11; --c:13; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 11; --c:14; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 11; --c:15; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 11; --c:16; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 12; --c:11; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 12; --c:16; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 13; --c:10; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 13; --c:17; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 14; --c:10; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 14; --c:17; --color: var(--grey)"><span></span></div>
<div pixel style="--r: 15; --c:11; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 15; --c:16; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 16; --c:11; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 16; --c:12; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 16; --c:15; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 16; --c:16; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 17; --c:13; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 17; --c:14; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 18; --c:13; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 18; --c:14; --color: var(--skin)"><span></span></div>
</div>
<div layer style="--l: 18">
<div pixel style="--r: 10; --c:11; --color: var(--white)"><span></span></div>
<div pixel style="--r: 10; --c:12; --color: var(--white)"><span></span></div>
<div pixel style="--r: 10; --c:13; --color: var(--white)"><span></span></div>
<div pixel style="--r: 10; --c:14; --color: var(--white)"><span></span></div>
<div pixel style="--r: 10; --c:15; --color: var(--white)"><span></span></div>
<div pixel style="--r: 10; --c:16; --color: var(--white)"><span></span></div>
<div pixel style="--r: 11; --c:10; --color: var(--white)"><span></span></div>
<div pixel style="--r: 11; --c:17; --color: var(--white)"><span></span></div>
<div pixel style="--r: 12; --c:10; --color: var(--white)"><span></span></div>
<div pixel style="--r: 12; --c:17; --color: var(--white)"><span></span></div>
<div pixel style="--r: 13; --c:11; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 13; --c:16; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 14; --c:11; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 14; --c:16; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 15; --c:11; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 15; --c:16; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 16; --c:11; --color: var(--white)"><span></span></div>
<div pixel style="--r: 16; --c:12; --color: var(--black)"><span></span></div>
<div pixel style="--r: 16; --c:13; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 16; --c:14; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 16; --c:15; --color: var(--black)"><span></span></div>
<div pixel style="--r: 16; --c:16; --color: var(--white)"><span></span></div>
</div>
<div layer style="--l: 19">
<div pixel style="--r: 10; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 10; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 10; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 10; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 10; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 10; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 11; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 11; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:10; --color: var(--white)"><span></span></div>
<div pixel style="--r: 12; --c:17; --color: var(--white)"><span></span></div>
<div pixel style="--r: 13; --c:10; --color: var(--white)"><span></span></div>
<div pixel style="--r: 13; --c:17; --color: var(--white)"><span></span></div>
<div pixel style="--r: 14; --c:11; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 14; --c:16; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 15; --c:11; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 15; --c:16; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 16; --c:11; --color: var(--white)"><span></span></div>
<div pixel style="--r: 16; --c:12; --color: var(--white)"><span></span></div>
<div pixel style="--r: 16; --c:13; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 16; --c:14; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 16; --c:15; --color: var(--white)"><span></span></div>
<div pixel style="--r: 16; --c:16; --color: var(--white)"><span></span></div>
</div>
<div layer style="--l: 20">
<div pixel style="--r: 10; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 10; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 10; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 10; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 11; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 11; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 11; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 11; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:10; --color: var(--white)"><span></span></div>
<div pixel style="--r: 13; --c:17; --color: var(--white)"><span></span></div>
<div pixel style="--r: 14; --c:10; --color: var(--white)"><span></span></div>
<div pixel style="--r: 14; --c:17; --color: var(--white)"><span></span></div>
<div pixel style="--r: 15; --c:10; --color: var(--white)"><span></span></div>
<div pixel style="--r: 15; --c:17; --color: var(--white)"><span></span></div>
<div pixel style="--r: 16; --c:10; --color: var(--white)"><span></span></div>
<div pixel style="--r: 16; --c:11; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 16; --c:12; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 16; --c:13; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 16; --c:14; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 16; --c:15; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 16; --c:16; --color: var(--skin)"><span></span></div>
<div pixel style="--r: 16; --c:17; --color: var(--white)"><span></span></div>
</div>
<div layer style="--l: 21">
<div pixel style="--r: 11; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 11; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 11; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 11; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 11; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 11; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:10; --color: var(--white)"><span></span></div>
<div pixel style="--r: 16; --c:17; --color: var(--white)"><span></span></div>
<div pixel style="--r: 17; --c:11; --color: var(--white)"><span></span></div>
<div pixel style="--r: 17; --c:12; --color: var(--white)"><span></span></div>
<div pixel style="--r: 17; --c:13; --color: var(--white)"><span></span></div>
<div pixel style="--r: 17; --c:14; --color: var(--white)"><span></span></div>
<div pixel style="--r: 17; --c:15; --color: var(--white)"><span></span></div>
<div pixel style="--r: 17; --c:16; --color: var(--white)"><span></span></div>
</div>
<div layer style="--l: 22">
<div pixel style="--r: 9; --c:13; --color: var(--white)"><span></span></div>
<div pixel style="--r: 9; --c:14; --color: var(--white)"><span></span></div>
<div pixel style="--r: 10; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 10; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 11; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 11; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:10; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:17; --color: var(--red)"><span></span></div>
<div pixel style="--r: 17; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 17; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 17; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 17; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 17; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 17; --c:16; --color: var(--red)"><span></span></div>
</div>
<div layer style="--l: 23">
<div pixel style="--r: 9; --c:13; --color: var(--white)"><span></span></div>
<div pixel style="--r: 9; --c:14; --color: var(--white)"><span></span></div>
<div pixel style="--r: 10; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 10; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 11; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 11; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:16; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:11; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 16; --c:16; --color: var(--red)"><span></span></div>
</div>
<div layer style="--l: 24">
<div pixel style="--r: 11; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 11; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 12; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:15; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:12; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 15; --c:15; --color: var(--red)"><span></span></div>
</div>
<div layer style="--l: 25">
<div pixel style="--r: 13; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 13; --c:14; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:13; --color: var(--red)"><span></span></div>
<div pixel style="--r: 14; --c:14; --color: var(--red)"><span></span></div>
</div>
</div>
CSS Code
Create a file style.css and paste the code below.
/* colors */
:root{
--brown: #391B08;
--white: #FFF1EF;
--red: #A40000;
--gold: #FFD500;
--skin: #FFE9A8;
--grey: #CFC4C2;
--black: #000000;
}
/* page setup */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
body { height: 100vh; display: grid; place-items: center; background-color: #1D1E22 }
/* scene set-up */
[scene], [rotation], [center-z] { display: grid }
[scene] :not(:empty) { transform-style: preserve-3d }
[scene] { width: var(--size); perspective: calc(var(--size) * 2); aspect-ratio: 1 }
/* rotate/animate scene */
[rotation][animate="true"] {
transform: rotateY(-90deg);
animation: rotateScene 9s linear infinite }
@keyframes rotateScene{ to { transform: rotateY(270deg) } }
[rotation] { transform: rotateX(-0deg) }
/* position contents to z-center */
[center-z] { transform: translateZ(calc(var(--size) * .5)) }
/* grid */
[grid] {
display: grid;
grid-template-columns: repeat(var(--dimension), 1fr);
grid-template-rows: repeat(var(--dimension), 1fr);
}
/* layer */
[layer] { display: contents}
/* pixel */
[pixel] {
--pixel-size: calc(var(--size) / var(--dimension));
grid-row: calc(var(--dimension) - var(--l) + 1);
grid-column: var(--c);
--row: calc(var(--dimension) - var(--r));
--translateZ: translateZ(calc(var(--pixel-size) * var(--row) * -1));
transform: var(--translateZ);
background-color: var(--color);
}
/* sides set up */
[pixel], [pixel] > span { display: grid; }
[pixel] > span { background-color: inherit; transform-style: preserve-3d }
[pixel]::before, [pixel]::after, [pixel] > span::before, [pixel] > span::after { content: ""; background-color: inherit }
[pixel]::before, [pixel]::after, [pixel] > span, [pixel] > span::before, [pixel] > span::after { grid-area: 1/1 }
/*sides orientation*/
[pixel]::before { transform-origin: left; transform: rotateY(90deg) } /*left*/
[pixel]::after { transform-origin: right; transform: rotateY(-90deg) } /*right*/
[pixel] > span { transform: translateZ(calc(var(--pixel-size) * -1)) } /*back*/
[pixel] > span::before { transform-origin: top; transform: rotateX(90deg) } /*top*/
[pixel] > span::after { transform-origin: bottom; transform: rotateX(-90deg) } /*bottom*/
/* shading */
[pixel]::after{ background-image: linear-gradient(rgb(0 0 0 / .25) 100%, transparent) }/*right*/
[pixel] > span::after { background-image: linear-gradient(rgb(0 0 0 / .375) 100%, transparent) }/*bottom*/
/*lighting*/
[pixel]::before { background-image: linear-gradient(rgb(255 255 255 / .25) 100%, transparent) }/*left*/
[pixel] > span::before { background-image: linear-gradient(rgb(255 255 255 / .375) 100%, transparent) }/*top*/
/* floor */
[grid]::after{
content: "";
grid-area: 1/1/-1/-1;
border-radius: 50%;
/* opacity: 0.5; */
--neg-half-size: calc(var(--size) / -2);
transform: rotateX(90deg) translateZ(var(--neg-half-size)) translateY(var(--neg-half-size));
--pixel-size: calc(var(--size) / var(--dimension) * 4);
--clr1: hsl(0 0% 100%);
--clr2: hsl(0 0% 90%);
--clr3: hsl(0 0% 80%);
--clr4: hsl(0 0% 70%);
background-image: conic-gradient( var(--clr1) 90deg , var(--clr2) 0 180deg , var(--clr3) 0 270deg, var(--clr4) 0 360deg);
background-size: var(--pixel-size) var(--pixel-size);
box-shadow: 0 0 5vmin 0 black, 0 0 50vmax 0 rgb(255 255 255 / .8);
}Final Output
Written by: Piyush Patil
Code Credits: https://codepen.io/MarkBoots/pen/qBKvXrz
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖
