Pixel art with linear-gradient

Cleyson Reinhold — Tue, 04 Feb 2020 01:03:13 +0000

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?

Clippy revival

Cleyson Reinhold — Sun, 25 Aug 2019 23:12:07 +0000

For many people Office's Clippy was the first virtual assistant before chatbots where everywhere around. Many people still miss it and it's random tips.

Clippy.js is one of the projects that aimed to revive Clippy "to any website for instant nostalgia".

Based on this JS library and using Electron, the javascript framework that everyone loves to hate, I created the Desktop Clippy, a Clippy adaptation that will give you a random quote every 10 minutes.

I'm sure that is not the best idea for an Electron application, but suits well for a fun weekend project and to try out different technologies.