- What is Pixelated Art
- How does CSS box-shadow Work
- How to Create a Pixelated Art from CSS Shadow
- Animate the pixel
What is Pixelated Art
Pixelated art, also known as pixel art, is a digital art form that utilizes small, square pixels to create an image. It rose to prominence in the 1980s and 1990s when video games were limited in graphical capabilities and relied on blocky, simplistic graphics.
Despite the tiny size of pixels today, pixelated art retains its unique aesthetic and continues to evoke a sense of nostalgia and retro vibe in the artwork. In this tutorial, we will guide you through the process and the concept of creating pixel art using CSS box-shadow, so let’s jump right in!
How does CSS box-shadow Work
Before we begin the step-by-step guide on creating pixel art, Firstly, it is essential to understand how CSS box-shadow works.
The box-shadow property takes several attribute values to control the appearance of the shadow:
box-shadow: [inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color];
Attributes in a glace:
| Attribute | Description | Value Type |
|---|---|---|
| inset | Optional value that changes the shadow to an inner shadow | If not specified, default to drop shadow |
| offset-x | Horizontal offset of the shadow from the element | unit length (eg: px, em…) |
| offset-y | Vertical offset of the shadow from the element | unit length (eg: px, em…) |
| blur-radius | Amount of blur radius | If not specified, default will set to 0 (sharp edge) |
| spread-radius | Amount of the shadow extends beyond the element | If not specified, default will set to 0 (shadow will be the same size as the element) |
| color | Color of the shadow | If not specified, it defaults to currentcolor. |
Examples:
.uiPencil_shadow{
width: 100px;
height: 25px;
background-color: #d24507;
box-shadow: 5px 5px 2px 2px #72d596;
}
.uiPencil_shadow{
width: 100px;
height: 25px;
background-color: #d24507;
box-shadow: inset 5px 5px 2px 2px #72d596;
}
.uiPencil_shadow{
width: 100px;
height: 25px;
background-color: #d24507;
box-shadow: 5px 5px #72d596;
}
How to Create a Pixelated Art from CSS Shadow
Step 1:
To create pixel art with CSS shadows, first, create a container element to place your artwork. This can be any HTML element, such as a <div> , <span> or <p>
<div class="uiPencil_pixel" style="width:1px; height: 1px;"></div>
Step 2:
Next, add box-shadow properties to the .uiPencil_pixel container to create the appearance of pixels.
To create a single pixel, set the offset-x and offset-y to 1px, and the blur-radius to 0. This will create a small square that simulates a pixel.
.uiPencil_pixel{
width:1px;
height: 1px;
box-shadow: 1px 1px red;
transform: scale(7);
}
In this example, to achieve a better preview, we will use transform: scale(7); to zoom in 7 times since the 1px pixel size is too small.
Step 3:
To create a larger block of pixels in CSS shadow art, you can add additional box-shadow properties with different horizontal (offset-x) and vertical (offset-y) values.
For example, to create a heart-shaped pixel block with a size of 5×5, you can apply the following offset position:
Once you have planned out your design, you can convert it to CSS code, for example:
:root {
--c1: #E44D26;
--c2: #F97C5B;
}
.uiPencil_pixel {
width:1px;
height: 1px;
transform: scale(7);
box-shadow:
1px 0px var(--c1),
3px 0px var(--c1),
0px 1px var(--c1),
1px 1px var(--c2),
2px 1px var(--c1),
3px 1px var(--c2),
4px 1px var(--c1),
0px 2px var(--c1),
1px 2px var(--c2),
2px 2px var(--c2),
3px 2px var(--c2),
4px 2px var(--c1),
1px 3px var(--c1),
2px 3px var(--c2),
3px 3px var(--c1),
2px 4px var(--c1);
}
To achieve a better preview of the pixel art, you can use the transform property with the scale function. In this example, we will use transform: scale(7); to zoom in on the design. You can adjust the scale value based on your needs.
Animate the Pixel
You can also enhance your artwork by adding animation with the @keyframe rule. Here’s an example:
:root {
--c1: #E44D26;
--c2: #F97C5B;
}
@keyframes animate {
0%, 100% {
box-shadow:
1px 0px var(--c1),
3px 0px var(--c1),
0px 1px var(--c1),
1px 1px var(--c2),
2px 1px var(--c1),
3px 1px var(--c2),
4px 1px var(--c1),
0px 2px var(--c1),
1px 2px var(--c2),
2px 2px var(--c2),
3px 2px var(--c2),
4px 2px var(--c1),
1px 3px var(--c1),
2px 3px var(--c2),
3px 3px var(--c1),
2px 4px var(--c1);
}
50% {
box-shadow:
1px 1px var(--c2),
2px 1px var(--c2),
3px 1px var(--c2),
1px 2px var(--c2),
2px 2px var(--c2),
3px 2px var(--c2),
1px 3px var(--c2),
2px 3px var(--c2),
3px 3px var(--c2);
}
}
.uiPencil_pixel {
transform: scale(7);
width:1px;
height: 1px;
animation: animate 2s ease infinite;
}
</style>
<div class="uiPencil_pixel"></div>
You are all set now!
Congratulations! You now have all the basic knowledge to create pixel art using CSS box shadows. Unleash your creativity now!
My mini baby Yoda:
With a little creativity, the possibilities are endless. Happy Coding! 
ui pencil 
Leave a Reply