Making CSS Art

Even though CSS art existed since availability of rounded corners, recently this art form has taken deeper roots. Given its limited nature, creating CSS art requires thinking outside the box model.

Here’s a list of my best web development tutorials.

Complete CSS flex tutorial on Hashnode.

Ultimate CSS grid tutorial on Hashnode.

Higher-order functions .map, .filter & .reduce on Hashnode.

Follow me @ Twitter, Instagram & fb to never miss premium articles.

But wait. What exactly is CSS art? CSS paintings are hinged on exploiting Cascading Style Sheets — a language created for styling HTML documents by using its features in a way that wasn’t originally intended.

In this tutorial I will use ArtBox because it makes CSS art easier to explain. But the same techniques will work in Chrome and other browsers.

A Clockwork Orange

This is a current WIP of the Clockwork Orange poster art. It will probably take another week to finish the face at which point the image will be updated but I had to publish the article since it’s already getting quite long.

Image for post
Image for post

ArtBox is like Photoshop for CSS — it’s an editor created specifically for making CSS art (also known as CSS painting.) If you’re a graphic designer or just someone with art background, you can get it in Early Access from its official website at ArtBox where you can obtain your license.

The classic Clockwork Orange poster art re-created in CSS ArtBox editor.

Mona Lisa Hands

Here’s another example that explores some possibilities.

Image for post
Image for post

Some of the techniques used to create this CSS artwork will be explained in this tutorial. With others, you just have to get inventive. It’s a tough challenge!

There is plenty of trivial CSS art that reminds me of images from children’s books. This works well in the context of web design. I’ve seen a cute koala bear, a lighthouse, robots, eyes, flat color landscapes and other simple shapes.

To transition from simple colored squares and circles to start making artwork you need to exploit commonplace CSS properties in a way that match techniques used in traditional art.

Quick Example

Let’s take a closer look at Clockwork Orange eye.

Image for post
Image for post
Eyeball created by using multiple CSS gradients.

This eye was created using a single HTML element. The key to producing complex visuals is combining the best of CSS properties together.

Here we needed rounded corners, 4 gradients (3 non-repeating radial and 1 repeating conic with transparent gradient stops) and 1 inner shadow.

One additional element was used as an overlay to create the light reflecting on the surface. It was created using a semi-transparent inner shadow.

Shadows Take Layer Precedence Over Gradients

In CSS inner shadows take precedence over gradients. In other words they are rendered on top of gradients. Let’s take a look at what this means visually:

In CSS, shadows are rendered on top of gradients.
In CSS, shadows are rendered on top of gradients.

A bright teal shadow is drawn on top of green repeating conic gradient.

Things You Should Know About Multiple Shadows

In CSS you can specify multiple shadows on the same element. The last shadow on the list is rendered underneath all others. Here the red shadow is defined by slot #4…and blue, yellow and green are rendered on top.

Image for post
Image for post
Example of multiple shadow precedence.

Shadows Follow Element Shape

By pressing O key in ArtBox I turned square to a circle retaining all shadows from previous example. But you can also edit each corner radius individually.

Image for post
Image for post
Order of multiple shadows.

This idea can be exploited to simulate ambient and diffuse light.

Image for post
Image for post
Rendering a realistic spherical object using multiple shadows.

A radial gradient in slot #3 was also used to create a specular light spot.

Hair, Fur, Eye Lashes

You can imitate hair and animal fur by creating an element with transparent background and applying only thin rotated shadows to the element. Resizing and skewing the element can result in the exactly the shape you’re looking for.

Image for post
Image for post

Using Multiple Gradients

Similar to multiple shadows gradient image effects can be used to create some rather interesting effects or more organic textures.

The last gradient on the list is rendered first. Take a look at this example that explains how to exploit gradients to create a more complex art object:

Image for post
Image for post

Of course without context, this shape is meaningless. But notice how easy it is to manipulate complex CSS gradients. This feature plays a key role in helping CSS artists produce painting-like effects.

Just like shadows CSS gradients follow precedence rules. Remember that one HTML element can be styled using multiple gradients. In CSS you would separate gradients by comma on background-image property.

Z-Index Blocking

When painting with CSS you’ll want to plan your art by thinking like an artist. First you want to build background objects. Overlay items that are closer to he camera on top of them. Use objects to block others to create new shapes.

Using overlay:hidden To Make Irregular Shapes

Nesting elements is one of the most important techniques for creating shapes that you wouldn’t normally encounter in CSS. It can be used to hide objects within other objects. Here, a rotated black square is blocked by the outline of the parent element it was nested in.

Image for post
Image for post

Simulating 3D Perspective

Backgrounds are essential for making your CSS art more impressive. The background pattern can be simulated using various gradient combinations.

3D perspective can be imitated using a skewed element. In this example tiled floor was created using 1 HTML element with 4 gradients and 1 shadow.

Image for post
Image for post

This reminds me of Blender! But nope… it’s all just 22 HTML elements.

Mario Kart 8 Mushroom Cup In Pure CSS

This next piece demonstrates CSS element that almost resembles 3D object as if it were rendered using a modern graphics card, but in pure CSS.

Image for post
Image for post

Let’s turn off rounded corners:

Image for post
Image for post

Less Is More

When making CSS art your aim is to create as much realism as possible by prioritizing creative use of CSS properties over number of HTML elements.

You can play around with a combination of effects on a single element to create something that looks like metal material as shown here.

Once a material is crafted it is lots of fun experimenting with elements by rotating, stretching & moving them around.

Image for post
Image for post

Limitations of CSS force you to think intuitively. Traditional artists will probably find this process more natural. But once proper combination of effects is achieved you can create near photo-realistic effects.

More About CSS Gradients

CSS gradients come in 3 flavors — linear, radial and conic. Conic gradient (pictured below) can be exploited in order to create sharp edges.

You can do all of this manually with browser’s dev tools but ArtBox helps demonstrate the idea visually without typing CSS values.

Image for post
Image for post
CSS conic gradient with 7 color stops.

CSS gradients use gradient stops. Naturally, each stop needs to be specified at a higher percent than the previous in order to create a smooth gradient.

Pixel Shaving

Pixel-shaving is a CSS gradient technique in which you use CSS gradient stops to create a sharp edge instead of a gradual color transition.

In combination with empty (transparent color) gradient stops it is possible to create sharp edged objects. And here is how the conic gradient is exploited to make a knife’s blade:

Image for post
Image for post

Inventing Techniques

As with any type of art, inventing new techniques is crucial to creating work that stands out. One thing I love about CSS art is that it demands thinking outside the box. The knife in Clockwork Orange piece was created using a gradient with transparency around stops that defined the blade.

Trying to think different is essential to creating CSS art. After all, originally it was never intended to be used in this way. However, this really shows flexibility of CSS whether you are making art or creating websites.

Key CSS Properties For Making CSS Art

Rounded Corners, Multiple Gradients and Multiple Shadows.

  1. Rounded Corners. Used to define outlines of irregular shapes like faces, fingers, round objects (pearls, tennis balls, door knobs.)
  2. Multiple Gradients. Layers of gradients (especially when used together in combination with different types of gradients.)
  3. Multiple Shadows. When shadows are set without background color (or transparent background color) on the element they can be used to create thin curved lines, clothing folds, human hair, animal fur, eye lashes, and a variety of other effects.

Pure CSS Lace

And finally this piece of incredible CSS artwork created by Diana Smith demonstrates what’s possible by pushing CSS to its absolute limit.

Image for post
Image for post

Chrome-made CSS painting by Diana Smith (View Original | GitHub)

Creating CSS Art Visually in ArtBox

You can make CSS art by creating an HTML document and then simply tweaking each DIV element by hand using Chrome developer’s tools.

This can be time-consuming because you have to tweak each property & value by hand and there is no support for multiple shadows or gradients.

Is ArtBox better than Chrome dev tools?

Chrome is my favorite browser but it doesn’t have a UI for multiple shadows, layered gradients and gradient types. You still have to type long property names by hand before they will appear in Chrome’s console for editing.

If interested check out ArtBox via it’s official website.

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store