Diana Smith made CSS look like oil paint

Open Diana Smith’s Pure CSS Francine and the first oddity is not that the portrait looks good. The oddity is that there is no portrait file there in the ordinary sense. No JPEG doing the heavy lifting. No canvas painting. No exported illustration tucked behind a clever demo. The image is built from HTML and CSS, rendered by the browser as if the page itself has been taught to paint. Smith’s own GitHub repository describes it as an 18th-century oil painting style drawing, hand coded entirely in HTML and CSS, and the live page credits Diana Smith directly under the work.

That fact sounds like a developer party trick until the portrait loads. Francine has the soft, improbable surface of old varnished paint: pale skin, a blue gown, powdered hair, tiny beads, ribbon, feather, lace, shadow, and enough period drama to look as if it escaped from a museum catalogue and landed in a browser tab. A normal viewer sees a digital painting. A front-end developer sees a dare. The project asks a rude little question: what if CSS is not only the language that styles the page, but also the medium of the image itself?

Smith, who publishes code as cyanharlow, is listed on GitHub as Diana Smith and calls herself a CSS enthusiast. Her pinned repositories read almost like a tiny gallery wall: Pure CSS Francine, Pure CSS Lace, Pure CSS Gaze, Pure CSS Pink, a pinup-style drawing, a game-character scene, each described as hand coded or built with HTML and CSS. This matters because it places the work outside the usual “look what CSS can do” novelty lane. She did not make one viral demo and leave. She built a small body of work inside the constraint.

The constraint is severe enough to be funny. Smith’s Francine repository says all elements must be typed by hand, with only Atom and Chrome Developer Tools allowed. It also says she did not worry about cross-browser compatibility because the live preview would likely look “laughable” outside Chrome. That line is part warning, part charm. The portrait is not pretending to be a production UI component. It is a browser-specific handmade artifact, a piece that uses web standards while refusing the boring moral pressure to be practical.

A 2018 VICE story captured the moment Francine hit the web developer bloodstream. The article says developers on Twitter reacted strongly because the work was not made with a tablet, mouse, or illustration software, but by hand in HTML and CSS. It also notes that, since there is no ordinary image file, visitors can screenshot the result or download the code and play with it. That is still the central thrill. The artwork is both a finished portrait and an exposed machine. You can look at the face, then open the repository and watch the spell turn back into selectors, gradients, borders, shadows, and coordinates.

A portrait that refuses to be a file

The web usually treats images as cargo. A page requests a file, the browser displays it, and CSS politely stays in its lane by resizing, cropping, masking, filtering, or framing it. Smith’s work reverses that relationship. The HTML creates the parts. The CSS gives those parts surface, shape, light, opacity, position, and temperament. The final image is not inserted into the page. The page becomes the image.

That distinction changes the way the piece feels. Francine is not a bitmap pretending to be native to the browser. It is native to the browser in a slightly cursed, gorgeous way. Every visual decision depends on browser interpretation: how it paints gradients, calculates curves, stacks elements, handles anti-aliasing, and reconciles hundreds or thousands of tiny instructions. On a good setup, the result looks like an oil portrait. On the wrong browser, the same code can become a cracked cubist ghost. Smith told VICE that different browsers show “the history of the internet” because older browsers were never built with this kind of CSS art in mind.

That browser fragility is usually a defect. Here it becomes texture. The piece behaves less like a fixed reproduction and more like a performance score. Chrome performs it one way. Opera performs it another. Old Netscape, famously, mangles it into something closer to accidental avant-garde. The code is the same, but the renderer has an opinion. That is why Smith’s “mood ring” comparison, quoted by VICE, lands so neatly. The browser is not a neutral frame. It is part of the artwork.

This is where the project becomes more than technical flexing. Pure CSS Francine makes a browser visible again. We are used to browsers disappearing behind polished interfaces, smooth apps, and images that look identical everywhere. Smith’s CSS portraits remind you that a browser is a rendering engine with habits, tolerances, blind spots, and age. The same language can produce discipline or chaos depending on who reads it. That is a very web-native kind of uncertainty.

The portrait’s old-world styling sharpens the joke. Francine looks like she belongs to a medium obsessed with permanence, yet she is built from a language associated with layout bugs, media queries, vendor prefixes, and small visual fights. The painted surface says aristocratic stillness. The implementation says browser dev tools at midnight. That tension is why the work sticks in the mind longer than many slicker digital pieces. It refuses the clean divide between art object and source code.

Smith’s own rules make the refusal clearer. The Francine and Lace repositories both say every element is typed by hand, and both limit the working environment to Atom and Chrome Developer Tools. The Francine repo notes that SVG elements were once limited and hand plotted, then later deleted. The rule is not “use the most efficient method.” The rule is closer to “make the browser do something unreasonable and stay inside the discomfort.” The inconvenience is the point.

That matters because code art often gets flattened into a single question: how was this made? Smith’s portraits answer that question immediately, then become interesting for another reason: the result has taste. It is not a generic collection of CSS tricks. It has lighting choices, costume choices, painterly references, awkward little human details, and a strange softness that makes the constraint fade for a moment. Lynn Fisher, another well-known designer and CSS developer, described Smith as an amazing artist and praised the skin glow and lifelike quality of the portraits. The technique gets you to click. The eye keeps you there.

The “no image” claim is also more slippery than it first sounds. There may be preview thumbnails in the repository, but the live portrait is rendered from markup and CSS, not displayed as a conventional artwork file. That is why the repository itself is the better artifact than a screenshot floating around social media. A screenshot proves the trick once. The source proves the trick continuously. The live page lets the browser attempt it again. The artwork exists most fully at the point where code, renderer, and viewer meet.

That meeting point is fragile, but it is also generous. Anyone can inspect the work. Anyone can fork it. Anyone can break it on purpose. VICE noted that viewers could download the code and play with it, which is not how most portraits invite participation. You do not get to open the layers of a museum oil painting unless the museum has conservation scans. Here, the layers are selectors. The brushstrokes are CSS rules. The studio is inside the repo.

The charm is in the unreasonable rules

The best thing about Smith’s CSS portraits is that they are hard in a slightly pointless way. That is not an insult. It is the reason they have character. Plenty of web work is hard because clients, scale, accessibility, performance, frameworks, browsers, and product demands make it hard. Smith’s portraits are hard because she chose a medium that fights the desired result. CSS is excellent at styling interfaces. It was not born to paint powdered hair, eyelids, lace collars, pearls, or the soft volume of skin. Making it do those things gives the work its private tension.

Smith told VICE that creating CSS images means writing code to display and manipulate objects in the browser, shaping their size, edges, color, and more. She compared the process to layering and arranging shapes, but also pointed out a brutal difference from normal visual work: with CSS, you cannot always see what you are making while you are making it. That sentence explains a lot. The work is not only drawing. It is drawing through delay, inference, and correction. The artist types, renders, adjusts, reloads, stares, nudges, repeats. The hand is present, but it travels through syntax.

That makes the portraits closer to craft than spectacle. You can admire the final image without understanding CSS, but the work deepens when you imagine the edit loop. A painter can drag a brush through wet color. A digital illustrator can pull a curve and see it respond. Smith is building an illusion from boxes, radii, gradients, shadows, transforms, pseudo-elements, and positional systems. Each small feature becomes a negotiation. A cheekbone is not a cheekbone. It is a set of layered shapes convincing the eye to read light as flesh.

The rules also keep the work from becoming mere software output. There is no design app smoothing the path. The Francine repo states that elements are typed out by hand and the allowed tools are Atom and Chrome Developer Tools. That choice brings back the stubbornness of handmade work, but in a form that looks absurdly technical. It is the opposite of one-click image generation, and it is also the opposite of clean product design. The portrait has to earn every curve.

Smith’s work is not the only CSS art on the web, and that actually makes it more impressive. CSS art has long attracted people who enjoy constraints, from single-div illustrations to animated icons and full scenes. What separates these portraits is the emotional gap between medium and result. A cute CSS icon makes sense. A flat geometric illustration makes sense. A baroque or 18th-century-inspired portrait in pure CSS feels unreasonable before it feels beautiful. That unreasonable gap is the hook.

There is also a delightful wastefulness to it. CSS is being used for something it does not need to do. That waste is not careless; it is playful discipline. The browser does not require Francine to exist. The web does not become faster because a portrait is handmade from CSS. The project does not solve a business problem. Smith herself told VICE that the reason was fun, challenge, and art. That lack of utility gives the work room to breathe.

A useful comparison is embroidery. Embroidery is not impressive because thread is the easiest way to depict light. It is impressive because thread is not the easiest way, yet a patient person can make it behave like shade, hair, fabric, or weather. Smith’s CSS portraits carry that same stubborn pleasure. CSS declarations become stitches. Elements become patches of surface. Gradients become soft dye. Box shadows become bruised light. The work is not trying to hide the labor; it is trying to make the labor glow.

The result also exposes how flexible CSS has become without turning the article into a spec lecture. Gradients can imitate tonal shifts. Border radius can soften geometry. Transforms can tilt and place fragments. Opacity can create haze. Box shadows can fake depth. None of those features is rare in normal web design. Smith’s achievement is arranging them past the point where the page reads as layout. She pushes ordinary ingredients into portraiture. The magic is not an exotic property. The magic is accumulation.

That accumulation creates a strange viewing rhythm. From far away, Francine reads as a complete painting. Move closer, or inspect the code, and the face breaks into separate acts of persuasion. Hair becomes repeated curves. Lace becomes pattern. Highlights become positioned translucency. The illusion survives because the whole is more persuasive than any single fragment. That is true of painting, too, but CSS makes the fiction embarrassingly visible.

Her Lace repository pushes that friction even harder. GitHub describes Pure CSS Lace as inspired by Flemish baroque oil portraits and hand coded entirely in HTML and CSS; the README repeats the same handwritten element rule and Chrome-centered caveat. Lace is a cruel subject for CSS because lace is thin, ornamental, repetitive, and fussy. Choosing lace is almost a provocation. It is the kind of texture a saner person would avoid. Smith leans into it.

That is why the portraits work as Web Radar material. They are not just impressive; they are discoverable in the old internet sense. You find one, then click through the repos, then notice the live pages, then wonder what else is hiding under the cyanharlow account. The project rewards wandering. It is not a polished platform. It is not an app with onboarding. It is a small, opinionated corner of the web where someone took a boring language association—CSS equals styling—and bent it into a portrait gallery. That is exactly the kind of web oddity worth preserving.

The browser becomes a collaborator

The most memorable detail in the Francine story is not only that Smith hand coded the portrait. It is that the portrait mutates across browsers. VICE reported that Francine looked very different in different browsers and quoted Smith explaining that old browsers were built for a web that needed rectangles, color, and information, not elaborate CSS art. That observation turns a compatibility problem into a time machine. Each rendering failure tells you what a browser thought CSS was for.

Modern web design usually treats cross-browser differences as bugs to eliminate. Smith lets them become part of the myth. The GitHub README warns that the live preview will likely look laughable outside Chrome because she did not focus on cross-browser compatibility. That warning is refreshing because it removes a whole layer of professional obligation. Francine is not promising reliability. It is promising a fragile encounter with one browser’s interpretation. The portrait is allowed to misbehave.

That permission makes the work feel oddly alive. A PNG does not care where you open it. It may be compressed, scaled, color-managed, or blurred, but it remains fundamentally itself. A CSS portrait depends on an engine’s idea of how instructions should become pixels. That dependence gives the image a local body. It has a preferred habitat. It has weak spots. It has enemies. A browser can injure it.

There is a deeper web lesson hiding there. Web pages are not fixed artifacts in the way posters are fixed. They are agreements between code, standards, engines, devices, settings, networks, and users. Most professional web work tries to hide that instability because hiding it is useful. Smith’s portraits expose it because exposing it is interesting. When Francine fractures in an old browser, it is not only a joke. It is a visible argument between ambition and platform history.

That argument feels especially sharp because CSS has always lived between control and surrender. Designers use CSS to control presentation, but browsers have the last word. A declaration is a wish written in a language the engine agrees to interpret. Smith pushes that wish to an extreme. She writes enough wishes to form a face. The browser grants them imperfectly. The result is both command and compromise.

The work also reminds us how much culture is embedded in technical defaults. Browsers were shaped by the needs of documents, forms, links, commerce, apps, advertising, media, and mobile screens. Smith’s portrait arrives as an alien demand: please render a powdered 18th-century woman from layers of CSS. The browser does its best. Chrome makes her polished. Older engines turn her strange. Those differences are not just visual quirks; they are fossils of priorities.

That is why Francine has remained memorable years after the initial viral moment. A normal impressive demo ages as the trick becomes common. A demo tied to platform weirdness ages differently. It becomes a record of what felt unreasonable at a particular moment in front-end culture. The GitHub repo still shows thousands of stars and hundreds of forks for Francine, a sign that developers did not treat it as a disposable novelty. People wanted to save the proof.

Smith’s GitHub profile reinforces that sense of a broader practice. The pinned projects are not all the same aesthetic. There is an 18th-century oil painting, a Flemish baroque-inspired portrait, an Italian renaissance-style drawing, gel studio lighting, a vintage pinup illustration, and a character creation scene. The subject matter shifts, but the premise holds: use web page materials against expectation.

That premise makes the browser less like a window and more like a collaborator with a bad memory. It knows how to draw rectangles perfectly and faces reluctantly. Smith’s job is to translate the face into terms the browser understands. The browser’s job is to obey without understanding the joke. The viewer’s job is to feel the jolt when the rendered image resolves into something too soft and human for the machinery underneath. That three-part exchange is the work.

It is tempting to call the portraits “code paintings,” but that phrase can flatten the stranger truth. They are browser paintings. Code alone is inert. The portrait does not bloom until an engine paints it. The difference matters because Smith’s work is not merely stored in code; it is performed by software built for everyone, not for her. That gives the project a public quality. The same browser used to buy shoes and submit tax forms is being asked to impersonate an old master.

That public quality also makes the project easy to share. A link is enough. There is no installation, no gallery app, no special hardware, no crypto wallet, no platform account. The viewer opens a web page and watches a familiar environment do an unfamiliar thing. That simplicity is part of its strength. The piece is difficult to make and easy to encounter, which is a lovely ratio for web art.

What makes Smith’s CSS portraits worth opening

The table matters because Smith’s work is not carried by one gimmick. The portraits land because constraint, taste, browser weirdness, and open source inspection all pull in the same direction. Remove the visual beauty and the code is only a puzzle. Hide the code and the portrait becomes another digital image. Remove the browser instability and the project loses some of its web-specific charge.

The art is prettier than the stunt

A lot of technical art stops at “look what I made the tool do.” Smith’s portraits survive because they are also good to look at. Francine’s face has a porcelain stillness that could have become creepy or blank, but the softness around the eyes and mouth gives it a kind of hesitant presence. The costume details are theatrical without turning into parody. The palette is sweet but not sugary. The image has editorial taste, not only technical stamina.

That taste matters because the project is easy to misunderstand from a headline. “Portrait made entirely from CSS” sounds like a stunt. It is a stunt, partly, but it is not only a stunt. A stunt wants applause for the risk. Smith’s better pieces want inspection. The lace, the hair, the light on skin, the tiny ornamental bits around the head and collar all invite slow looking. The work has enough visual care to outlast the initial trick.

Lynn Fisher’s short post on Smith’s CSS artwork gets this right. Fisher praises Smith not merely as a UI developer but as an artist who makes detailed portraits with only HTML and CSS, pointing to the glow of skin and the life in the pieces. That praise is useful because it comes from someone who knows CSS well enough not to be fooled by novelty. The technical constraint is obvious; the visual sensitivity is rarer.

Francine’s 18th-century styling is especially smart because it gives the browser a theatrical target. A hypermodern subject might make the CSS technique feel like a UI experiment. An oil-painting reference makes the mismatch more dramatic. The browser, a machine of forms and boxes, is asked to imitate an art history surface associated with bodies, class, fabric, pigment, and old-world ceremony. That mismatch produces tension before the viewer even opens the code. The subject gives the technique a stage.

Lace does something similar. A Flemish baroque-inspired portrait brings expectations of dark fabric, pale skin, pearls, collars, and careful light. Smith’s repository describes Lace in those art-historical terms and again states that it is hand coded in HTML and CSS. The choice is not random decoration. Baroque portraiture is full of surfaces that test a renderer: folds, shine, lace, skin, hair, beads, shadow. It is a cruel test disguised as elegance.

Her Pure CSS Pink and Pure CSS Gaze repos widen the frame. GitHub describes Pink as a drawing of gel studio lighting and Gaze as an Italian renaissance-style drawing, both hand coded entirely in HTML and CSS. Those descriptions show that Smith is not locked into one historical costume trick. She is interested in how CSS handles light, face, atmosphere, and style under different visual references. The real subject may be rendering itself.

There is a quiet lesson here for product designers and front-end developers. Good CSS is often treated as invisible labor. When it works, nobody notices. When it fails, everyone complains. Smith’s portraits pull that hidden labor into the foreground. They make CSS visible not by showing a UI, but by making the language perform beyond its expected job. The portraits turn a supporting technology into the star.

Still, the best response is not reverence. A little skepticism makes the work more interesting. These portraits are not accessible in the way a normal image with good alt text and semantic context should be. They are not responsive product components. They are not good examples for production maintainability. The Francine README openly warns about cross-browser results. That does not weaken the project. It clarifies what kind of object it is.

A painting does not have to be a chair. A CSS portrait does not have to be a layout system. The work borrows the tools of production web development but refuses its obligations. That refusal is why it feels freeing. Many developers spend their days making sure the same button behaves across browsers and devices. Smith’s portrait says: what if a browser mismatch produced an accidental art style instead of a ticket? That is a small act of rebellion inside a very practical medium.

The beauty of the portraits also keeps them from becoming lectures about CSS capability. You do not need to know the syntax to feel the effort. A non-technical viewer can grasp that something uncanny is happening: a browser page is forming a face from rules. A technical viewer can go deeper and see how the illusion is staged. The project is generous in both directions. It respects curiosity at more than one level.

That generosity is rare in web oddities. Some niche web projects are charming but opaque. Smith’s work is charming and inspectable. The source is there. The live pages are there. The GitHub descriptions are plain. The rules are stated. The limitations are admitted. The result is not hidden behind myth. The magic survives disclosure.

The code has a handmade personality

Inspecting Smith’s CSS art is a different pleasure from inspecting a polished design system. A design system wants consistency. This wants obsession. The repository files are not there to demonstrate best practices for app teams. They are evidence of a person chasing a visual result through stubborn repetition. The CSS is a record of decisions, corrections, experiments, and compromises. It reads less like infrastructure and more like a sketchbook that happens to compile.

That sketchbook quality matters because web code is often judged by cleanliness. Clean code is good when the goal is shared maintenance. In art, cleanliness can be beside the point. Smith’s portraits are valuable because they preserve the trace of making. A cheek shadow may exist because some combination of gradient and opacity looked right after twenty wrong attempts. A lace detail may be laborious rather than elegant. The mess is not failure; it is contact with the material.

The Francine repository lists 248 commits, while the Lace repository lists a smaller history. Commit counts are blunt instruments, but here they hint at persistence. The piece was not dropped fully formed onto the web. It was worked. Revised. Pushed. Shared. Forked. The codebase has time inside it. That time is part of what viewers feel even when they never open GitHub.

Smith told VICE that a pure CSS image takes roughly two weeks and that the work is never really done because the code can be tweaked endlessly. That detail is perfect because it explains the addictive quality of the medium. A CSS portrait is always almost finished. Every edge can be softened. Every shadow can move by a pixel. Every curve can be finessed. The browser keeps offering tiny corrections until the artist decides to stop, not because the work is complete in some absolute sense, but because stopping is the only way to publish.

That endless tweakability is familiar to anyone who has designed on the web. A page is never fully done; it is shipped. Smith turns that product truth into an art practice. The portrait does not hide its capacity for change. The repo makes it explicit. Forks turn the artwork into a family of altered versions. CodePen experiments and social screenshots spread the image through copies, distortions, and browser mishaps. The piece lives the way web things live: through versions.

This is also why the project feels different from generative art. Smith’s portraits are not primarily about autonomous systems producing outputs. They are about a human forcing a deterministic system to imitate hand and eye. The code is not a black box creating endless variants. It is a handcrafted arrangement aimed at one image. The browser may mutate it, but the central labor is deliberate. The human pressure is visible.

The hand-coded rule sharpens that feeling. Typing every element is slow in a way that resists abstraction. A developer could imagine tools to plot shapes faster, export CSS, or translate vector paths. Smith’s stated rules reject that comfort. The work becomes a test of patience and attention, not only technical knowledge. Each element must be named, placed, styled, layered, and judged. The project makes boredom productive.

That is a deeply internet-native pleasure, though not the shiny kind. The old web had many objects made by people spending unreasonable time on pointless things. Personal homepages, strange fan archives, hand-coded layouts, single-purpose toys, obsessive collections, tiny experiments: much of the web’s charm came from people doing too much for no strategic reason. Smith’s portraits belong to that lineage, even though the craft level is far higher than a typical hobby page. They carry the spirit of unnecessary effort.

Unnecessary effort is not the same as wasted effort. The portraits teach by being excessive. A beginner who opens the repo sees that CSS is not just a set of memorized properties. It is a visual language with primitives that can be combined far beyond the examples in tutorials. A more experienced developer sees the limits of that language and the patience required to cheat those limits. A designer sees how constraints can produce style instead of merely restricting it. The work is didactic without acting like a lesson.

There is an emotional charge in that. A lot of modern software culture rewards speed, automation, and abstraction. Smith’s CSS portraits reward slowness, manual placement, and a tolerance for fragile results. They are not anti-technology; they are intensely technological. But they push against the idea that the best use of a tool is always the fastest or most scalable one. They argue for play as a serious way to know a medium.

That argument matters because CSS is often learned under pressure. People meet it through broken layouts, interview tasks, design tickets, framework overrides, and browser bugs. Smith’s work shows another relationship: CSS as a place to waste time beautifully. Not every developer needs to hand code a portrait, and most should not try under deadline. But seeing it done changes the emotional range of the language. It makes CSS feel less like a chore and more like clay.

The handmade personality also makes the work harder to replace. An AI-generated portrait can produce painterly beauty in seconds, but it cannot produce the same reason to care. Smith’s portrait is impressive because the method is comically mismatched with the result. The time, constraints, and browser dependence are the artwork’s spine. Remove those, and you still might have a nice image, but not this object. The code is not a production method; it is the meaning.

A tiny gallery hidden in public repositories

Smith’s GitHub profile is the best entrance because it shows the pattern at a glance. The account is not presenting a single portfolio case study. It is a cluster of small, intense CSS experiments. The pinned repos list a vintage pinup illustration, an 18th-century oil painting, a game character creation scene, an Italian renaissance-style drawing, gel studio lighting, and a Flemish baroque-inspired portrait. That sequence feels like a set of private assignments: make CSS do glamour, make it do old paint, make it do a character screen, make it do dramatic light. Each project tests a different visual problem.

Pure CSS Francine is the obvious first click. It has the viral aura, the strongest mismatch, and the clearest “wait, this is CSS?” payoff. The repo’s README is short, which helps. It states the series premise, states the rules, warns about browser compatibility, and links to the live version. No over-explaining. No polished brand story. Just a project that says what it is and lets the viewer fall into the code. That plainness makes the work feel more honest.

Lace is the second click because it changes the texture. Francine is soft and powdery; Lace is sharper and darker. The repository says it is inspired by Flemish baroque portraits, and the live work is linked from the GitHub page. The subject lets Smith play with ornamental complexity in a more severe palette. If Francine is about powdered theatrical softness, Lace is about filigree, collar, pearl, and shadow. It proves the method is not tied to one surface mood.

Pink is useful because it moves away from antique portrait expectations. A gel studio lighting drawing asks CSS to handle a modern photographic mood, not a historical painting reference. The GitHub description calls it a drawing of gel studio lighting, hand coded in HTML and CSS. That shift matters. It shows Smith is chasing light effects as much as facial likeness. The point is not nostalgia; the point is making CSS carry atmosphere.

Gaze adds another historical mode. The repo describes it as an Italian renaissance-style drawing, again hand coded entirely in HTML and CSS. Renaissance painting brings a different kind of face, softness, and compositional calm than Francine’s 18th-century theatricality or Lace’s baroque drama. Smith’s project titles may be simple, but the references are pointed. She is sampling art history through front-end primitives.

The GitHub stars are not the reason to care, but they help explain the developer fascination. Francine shows thousands of stars and hundreds of forks on GitHub, while Lace has a smaller but still substantial footprint. Developers star many things for later use; here, the star feels more like pinning a marvel. You are unlikely to import Francine into your app. You star it because you want to remember that someone made this happen. The repo is a souvenir of disbelief.

The live page is sparse enough to feel almost accidental. Francine sits there with a small credit line and links. That simplicity strengthens the impact. The page does not shout. It does not frame the work with a manifesto. The painting just appears, and the viewer has to reconcile the surface with the source. A quieter presentation makes the technical absurdity louder.

This is where the “hidden internet gem” quality comes in. Smith’s portraits are famous in some front-end circles but still under-known outside them. They are not part of the everyday cultural feed unless you happen to follow web design oddities, CSS artists, or old viral developer moments. A reader encountering them now gets the pleasure of a delayed discovery. The projects still open. The repos still speak. The images still look impossible enough to matter. They have not been flattened by time.

They also resist platform capture. The work is not trapped inside a social media post. The VICE story is useful as context, and Fisher’s post is a warm pointer, but the primary objects are still Smith’s site and GitHub repositories. That matters for discovery writing because the recommended click should lead to the thing itself, not only commentary about the thing. Here, the source is alive enough to explore.

The broader web could use more of that. Much of the internet now turns creative work into screenshots of screenshots, stripped from its native behavior. Smith’s portraits punish that flattening. A screenshot shows the image, but it loses the live rendering, the browser dependency, the inspectable code, the possibility of breakage. The work is best encountered as a page and repo together. The link is part of the medium.

That is why the project belongs in a Web Radar format rather than a normal software recommendation. It is not a tool to adopt. It is a thing to open. The reward is not productivity; it is a refreshed sense of what a familiar technology can be made to do. You click, blink, inspect, laugh, admire, maybe feel a little annoyed that CSS can be this expressive when it has been ruining your layout all afternoon. That emotional mix is rare and worth chasing.

The web needs more beautiful misuse

Smith’s CSS portraits are a reminder that the web is at its best when people misuse it beautifully. Not destructively, not carelessly, but with enough curiosity to bend a tool past its assigned role. CSS was not waiting around to become portraiture. Yet here it is, pretending to be oil paint, lace, powder, skin, pearls, and theatrical shadow. The fact that this is impractical is not a problem. The impracticality is the oxygen.

Practical web work has its own dignity. Accessible pages, reliable interfaces, fast loading, readable layouts, stable components, good forms, and clear content all matter. Smith’s work does not replace that discipline. It gives the discipline a wild edge. It reminds developers that the same language used to center a modal can also be tortured into a baroque collar. That knowledge changes the emotional color of the tool. A boring property becomes suspiciously alive.

The project also pushes back against the idea that technical skill and aesthetic judgment live in separate rooms. Smith’s portraits require both. A purely technical version would be clever but ugly. A purely visual version would not carry the same charge. The power comes from the collision. The code is the proof of labor. The portrait is the proof of eye. Neither side is enough alone.

There is a cultural value in that collision. The web has often separated “developer art” from “art art,” as if code-based work must apologize through novelty or explanation. Smith’s pieces do not apologize. They present themselves as portraits, then let the method complicate the viewing. You do not have to decide whether they are art or demonstration. They are both, and the overlap is the interesting place. The web is old enough to deserve objects like this.

They also make a quiet case for constraints as taste machines. A constraint does not guarantee good work, but it forces decisions to become visible. Smith’s hand-coded rule, browser caveat, and tool limitations create a narrow corridor. Inside that corridor, every successful surface feels earned. That is why the portraits do not look like generic digital painting. Their softness has a faint mechanical grain because it comes from CSS logic. The limitation leaves fingerprints.

A reader should open the projects for the same reason one visits a strange roadside museum or a tiny specialist archive. They widen your sense of what people do when nobody sensible stops them. Smith’s portraits do not ask for much: a browser, a little attention, maybe an open dev tools panel. In return, they make a familiar language feel newly weird. They bring back the old pleasure of discovering that the web is not only a delivery system, but a place where people make impossible little objects for the joy of it.

The strongest piece to start with remains Pure CSS Francine. It is the cleanest shock: painterly face, period costume, no ordinary image file, all browser rendering. Then open Pure CSS Lace for the ornamental ambition. Then skim the GitHub profile and notice how the series branches into other visual references. The route is short, but it changes how CSS sits in the mind. After seeing Smith’s work, a div is never quite innocent again.

Author:
Jan Bielik
CEO & Founder of Webiano Digital & Marketing Agency

This article is an original analysis supported by the sources cited below

Pure CSS Francine
Official live version of Diana Smith’s browser-rendered Francine portrait, with author credit and links to Smith’s GitHub and website.

cyanharlow on GitHub
Diana Smith’s GitHub profile, showing the broader group of pinned CSS art repositories and public project descriptions.

cyanharlow/purecss-francine
Official repository for Pure CSS Francine, including the project description, self-imposed rules, browser caveat, files, stars, forks, and live preview link.

cyanharlow/purecss-lace
Official repository for Pure CSS Lace, describing the Flemish baroque portrait inspiration, hand-coded HTML and CSS process, rules, and live preview link.

This stunning image made with pure code is like a mood ring for your browser
VICE’s 2018 interview-led article explaining how Pure CSS Francine was made, why it changes across browsers, and how Smith thinks about CSS art as play and challenge.

CSS artwork by Diana Smith
Lynn Fisher’s short appreciation of Smith’s HTML and CSS portraits, with links to several official CSS artwork pages.