// about

About Pure CSS

Pure CSS is a reference of interface patterns built without JavaScript. Every example is a working demo rather than a code listing: what moves on the page is the CSS running in your browser, and the code printed underneath is the code doing it.

Why it exists

Most of the interface behavior people reach for a script to build has been possible in CSS for years. A checkbox holds state. :target responds to the address bar. :has() lets an element react to what is inside it. Scroll-driven animation ties motion to scroll position with no listener attached to anything. These pages are a place to see those working next to the code that produces them, with the tradeoffs written down.

What "pure CSS" means here

It means the effect itself runs without JavaScript. Where that is not the whole truth, the page says so instead of glossing over it. Two examples use script for their controls: the speed buttons on the number counter, and the plus and minus buttons on the numeric stepper. In both cases the animation and the styling are CSS, and only the button driving them is script. The site itself uses a few lines of JavaScript for the copy buttons on code blocks, which is not part of any example.

Some techniques cost something. A pattern that cannot be reached by keyboard, or that a screen reader will not announce, is still worth understanding, but the page will tell you what it costs before you ship it.

How the examples are built

Each one is written by hand and rendered in a browser rather than trusted to look right. The code shown beside a demo is meant to reproduce it: paste it into an empty page and you should get the same result. Colors are written as plain hex values rather than variables you would then have to go and find, so nothing is missing when you copy it.

Every example page carries a browser support table drawn from real support data, not from memory. Where a feature is new enough that support is genuinely uncertain, the page says that in words instead of inventing a version number.

Who makes it

Pure CSS is written and maintained by Adam Culpepper. Every example is published with the code that produces it, so nothing on the page depends on a file you cannot read.

Found something wrong on a page, or a technique that stopped working in a newer browser? Say so on X. Corrections are the useful kind of feedback.