Pixel art with linear-gradient
Tags: css, webdev, pixelart
Published: 2020-02-04 01:03:13

---
title: Pixel art with linear-gradient
published: true
description: Did you know that you can create images using the CSS's linear-gradient?
tags: #css #webdev #pixelart
---

Some time ago I read [this article](https://css-tricks.com/fun-times-css-pixel-art/) 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.

{% jsfiddle https://jsfiddle.net/cgreinhold/L4pet52d/11 result,html,css %}

## 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%);`).

{% jsfiddle https://jsfiddle.net/cgreinhold/L4pet52d/13 result,html,css %}

## "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;`).

{% jsfiddle https://jsfiddle.net/cgreinhold/L4pet52d/16/ result,html,css %}

## 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.

{% jsfiddle https://jsfiddle.net/cgreinhold/L4pet52d/18/ result,html,css %}

## Final words

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