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.

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.

Mona Lisa Hands

Here’s another example that explores some possibilities.

Quick Example

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

Eyeball created by using multiple CSS gradients.

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.

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.

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.

Order of multiple shadows.
Rendering a realistic spherical object using multiple shadows.

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.

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.

Simulating 3D Perspective

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

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.

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.

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.

CSS conic gradient with 7 color stops.

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.

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.

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.

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.

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.

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

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