A algum tempo atrás li esse artigo do Geoff Graham explicando como fazer pixel art utilizando apenas CSS através da propriedade box-shadow. A ideia é muito legal e já possui até geradores permitem você fazer o desenho em um grid e gerar o código CSS pronto com a imagem.

Recentemente estive trabalhando com linear-gradient no CSS e descobri que com isso também conseguimos criar desenhos pixel a pixel. A ideia por trás disso é adicionar diversos linear-gradient no mesmo background-image criando assim os pixels necessários para a imagem.

Começando

O linear-gradient é basicamente uma forma de adicionar gradientes iniciando em uma cor e terminando em outra em um background. Com essa propriedade conseguimos fazer gradientes tanto verticais (background-image: linear-gradient(black, red);) como horizontais (background-image: linear-gradient(to right, black, red);).

Gradiente vertical

Gradiente horizontal

Cores

Também é possível adicionar mais de duas cores dentro de um linear-gradient podendo adicionar ilimitados valores (background-image: linear-gradient(to right, black, red, orange, yellow, white);).

O linear-gradient também permite adicionar percentuais para cada cor, definindo a partir de que ponto ela começa a ser utilizada na imagem (background-image: linear-gradient(to right, black, red 20%);).

“Burlando” o gradiente

Repetindo uma cor após a próxima, o percentual passa a definir o ponto em que a cor termina no gradiente. E com esse percentual, conseguimos passar a “burlar” o gradiente e fazer a disposição de retângulos com cores, uma ao lado do outro (background-image: linear-gradient(to right, black 0%, black 20%, red 20%);).

Desta mesma forma, utilizando mais cores é possível fazer toda uma linha de pixels de uma imagem (background-image: linear-gradient(to right, black 0%, black 20%, red 20%, red 40%, orange 40%, orange 60%, yellow 60%, yellow 80%, green 80%);).

O background-color aceita mais de um linear-gradient em sequência, sendo possível assim fazer a linha seguinte. Temos que tomar cuidado apenas com o background-size. Como temos mais de um linear-gradient, precisamos definir o tamanho de cada um, ou seja, nas linhas abaixo teremos um tamanho maior para que fiquem visíveis. Definimos também que o background não repita, para que todos os gradientes descritos possam ser exibidos (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;).

Juntando tudo

Juntando tudo e colocando pixels na posição correta para criar uma imagem, conseguimos criá-la pixel a pixel com essas propriedades, como na imagem abaixo.

Conclusão

Essa técnica pode ser utilizada de diferentes maneiras também. Nesse exemplo utilizamos os pixels linha a linha para criação da imagem, mas poderiamos também ter utilizado colunas por colunas. O linear-gradient também vai muito além de linhas. Você consegue utilizar padrões de repetições, gradientes em ângulos e até em radiais.

Ainda falando de pixel art, o Marcus Blättermann possui essa página legal com diversas artes que se adaptam ao tamanho da tela e em alguns casos até mudam seu conteúdo. Vale a pena dar uma olhada.