Every one of these drawings is a single HTML div

A wizard leans over a crystal ball, candles lit, a raven on his hat. It is a complete little illustration, shadows and highlights and all, and it is drawn with exactly one HTML element.

A Single Div, by Lynn Fisher, is a CSS drawing project with one rule that sounds impossible until you see it: every picture is a single <div>. No child elements, no SVG, no canvas. Fisher started it in May 2014 with a small camera and has kept adding to it for more than a decade. The archive page covering 2014 to 2019 alone holds 144 drawings; I counted. And every October brings divtober, her one-drawing-a-day challenge with a public prompt list on the site.

Three elements hiding in one

The way you draw a wizard with one element is by abusing the parts of CSS that let a single box paint more than a single box, and Fisher wrote the technique up herself on Mozilla Hacks in September 2014. The starting move: one div is secretly three canvases, because CSS grants every element a :before and an :after pseudo-element. "With one div in the HTML, I actually have three elements to work with," as she puts it there.

Each of those three layers then gets multiplied. A stack of box-shadow values turns into dozens of offset colored rectangles, each shadow acting like one shape. Layered background gradients, linear and radial, fill in shading and depth, stopped hard where she wants a crisp edge and feathered where light falls off. It is the same language you use to put a soft grey glow under a button, pushed until it becomes a portrait.

The tooling lives in the project's repo on GitHub, 1.8k stars and 415 commits of drawings: she writes them in Stylus, a CSS preprocessor, wrapped in Pug templates that generate the pages. The README is upfront that an SVG would be the practical choice for illustration. Practical was never the assignment.

Fisher talked through the craft at the property level on CodePen Radio episode 338, and the details are where the magic turns into technique. Giving border-top-right-radius two values instead of one bends a corner along each axis independently, which is how a single box grows an organic curve. She is equally frank about the walls: repeating radial gradients will not give you a clean field of polka dots, so some patterns that look trivial are the hardest ones in the archive. The same episode covers her other famous habit, redesigning her portfolio every year, including the 2017 version that swapped between 24 complete layouts, one for every 100 pixels of browser width.

It also settles the question of reach. Fisher drew the illustrations for CSS-Tricks' flexbox and grid guides, the two pages half the industry keeps pinned, and she reckons that small job reaches more people than anything else she has made. If you have ever glanced at a diagram to remember what align-content does, you have probably looked at her work without knowing it.

The mechanics of the shadow stack reward one more sentence. A box-shadow takes an x offset, a y offset, blur, spread and a color, and with the blur held at zero it stops being a shadow and becomes a crisp duplicate of the element, parked wherever the offsets say. Stack dozens of those and you are placing opaque tiles with coordinates, which is pixel art by other means, written one comma-separated line at a time.

The rest of the one-element art world

Fisher is the founder of a small discipline, and the neighbors are worth your tab space. Diana Smith paints in the same medium with the rules loosened to plain hand-typed CSS, and her baroque portrait Francine is the piece that made the whole genre famous outside developer circles, an oil-painting pastiche that degrades into glorious abstract art on older browsers. Smith is a UI engineer by trade, publishes the source under her cyanharlow handle on GitHub, and the screenshots people share of Francine rendered in old browsers have become a genre of their own. Where Fisher's constraint is one element, Smith's is the medium itself: paint, but the paint is a stylesheet.

The competitive wing is CSSBattle, where more than 451,000 registered players recreate target images in the fewest possible characters of CSS. Shorter code scores higher, so it is code golf with gradients, and the top solutions read like incantations. There is a fresh daily target with no ranking pressure, live versus rooms where players host head-to-head rounds, and seasonal battles; the one running as I write this stretches 8 targets across four weeks. An hour in there will teach you more about backgrounds and box-shadows than a month of documentation, mostly by humiliation, which is the fastest teacher CSS has.

Try one yourself

Her Mozilla Hacks piece doubles as the tutorial, building up a small camera drawing property by property, and the repo holds the source for every finished piece, so you can pick a favorite and read exactly which shadow is the raven.

Ten years, and a bow

In 2024 Fisher wrote a tenth-anniversary retrospective, May 2014 to May 2024, and gently set the project down with the line "projects don't need to grow forever." The numbers in the rearview: ten years of drawings, a divtober every October that each produced 31 more, and a single-div Tesla Cybertruck that became one of her most popular CodePens. Her own summary of the annual ritual is the best description of a constraint project I have read: each time she questions whether she can do it, and each time she ends up with 31 drawings she adores.

The reason this matters beyond the party trick is that it is a stress test of a language most of us only ever use gently. Fisher rebuilds her own site from an empty CSS file most years, the footer currently reads v. XIX, and the muscle behind those redesigns is exactly this: knowing what a single rule can be talked into doing.

Constraint as the whole creative engine has a sibling sighting here: a full animation from one line of JavaScript.

More of the browser used as a canvas: summer, rendered as an entire website.