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?
Top comments (4)
Or you could just make a tiny GIF or PNG and stretch it. The amount of CSS you've used would be bigger than said image. You could also pack the image into a data URI
Yeah, I agree that is not the lightest way of doing it, but it can show us the power of CSS and give us ideas for other use cases. I have used a similar technique to create a multicolor underline on texts which fitted very well.
This is neat! I wonder if we could create a GUI for editing and generating/exporting these.
That's a great idea. I created this quick codepen creating it with JavaScript, but it can surely be improved to a more generic alternative.