Some time ago I read this article exmplaining how to create pixel art using CSS with the box-shadow property. This is a really cool technique and today you can even find tools in the web to easily create them.

Recently I've been working with CSS's linear-gradients and discovered that it's also possible to create pixel art with it. The idea behind this is to set a lot of linear-gradients in the same background-image creating the desired image.

Beginning

linear-gradient is basically a CSS way to add gradients in a background. With this property we can do vertical (background-image: linear-gradient(black, red);) and horizontal (background-image: linear-gradient(to right, black, red);) gradients.

Colors

It is also possible to add more than two colors in a linear-gradient up to an ilimited number (background-image: linear-gradient(to right, black, red, orange, yellow, white);).

Not only that, but the linear-gradient allows you to set a percent defining at which part of the background the color will begin (background-image: linear-gradient(to right, black, red 20%);).

"Cheating" the gradient

When repeating the same color two times, the percent given to the second one defines the place it ends on the gradient. With this percent we can begin to "cheat" the gradient and setting two separated colors next to each other (background-image: linear-gradient(to right, black 0%, black 20%, red 20%);).

This same way, using more colors it's possible to create a full row of pixels of an image (background-image: linear-gradient(to right, black 0%, black 20%, red 20%, red 40%, orange 40%, orange 60%, yellow 60%, yellow 80%, green 80%);).

The background-color also accepts more than one linear-gradient so with this we can draw our next rows. We just need to take care of the background-size. Since we have more than one linear-gradient, we need to define a size for each one, in order for all of them to be visible. We also need to make sure that the background don't repeat itself (background-repeat: no-repeat; background-image: linear-gradient(to right, black 0%, black 20%, red 20%, red 40%, orange 40%, orange 60%, yellow 60%, yellow 80%, green 80%), linear-gradient(to right, green 0%, green 20%, yellow 20%, yellow 40%, orange 40%, orange 60%, red 60%, red 80%, black 80%); background-size: 200px 25px, 200px 50px;).

Summing everything up

Summing everything up, and using te right colors and right orders, we can create a full pixel art with this technique as you can see below.

Final words

Pretty weird huh? Can you also do some image using this technique? Why don't you try?