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.
My Coding Books
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.
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.
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.
Let’s take a closer look at Clockwork Orange eye.
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:
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.
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.
This idea can be exploited to simulate ambient and diffuse light.
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.
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:
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.
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.
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.
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.
Let’s turn off rounded corners:
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.
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.
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 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:
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.
- Rounded Corners. Used to define outlines of irregular shapes like faces, fingers, round objects (pearls, tennis balls, door knobs.)
- Multiple Gradients. Layers of gradients (especially when used together in combination with different types of gradients.)
- 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.
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.