What this is
A gallery of new and emerging CSS features. Every card is a small, self-contained, real live demo — not just a code snippet — along with a category, a browser-support tag, a caniuse.com link when one exists, and the date the example was added.
The site itself — not just the examples in it — is almost entirely built by Claude Code: the components, the styling, the pipeline scripts, this sentence. A human still picks the domain, reviews every pull request, and clicks merge — that’s me, Knut Sorknes, a frontend developer in Oslo working at NoA Ignite Norway.
How an example gets here
Getting a feature onto this page is a two-stage pipeline, because discovering a candidate article doesn’t need editorial judgment, but turning it into a good example does:
- Discover (automated, no LLM). A script checks each source below for its RSS/Atom feed (or scrapes links from the page if it has none), keeps items that mention a known new-CSS-feature keyword, and queues them for review. It never re-queues a URL it’s already seen or already published. This runs on a daily schedule and commits its results straight to the repo — no server involved.
- Process (manual, LLM-in-the-loop). Periodically, the queued articles get reviewed by hand (with Claude Code): is this genuinely a new CSS feature worth showcasing? If so, it gets a title, description, category, caniuse slug, and a small original demo. A script then mechanically stamps the date it was added and looks up real per-browser support numbers — the parts that shouldn’t be hand-typed.
What the tags mean
Category is one of 11 fixed groups (Layout, Color & Backgrounds, Cascade Control, and so on) chosen by hand for each example — not auto-detected.
Browser support is derived automatically from real caniuse-lite data, not opinion:
- Production readyall 4 major engines (Chrome, Firefox, Safari, Edge) support it
- Growing supportsome, but not all 4, support it yet
- Experimentalnone support it yet, or it isn't tracked by caniuse-lite at all
caniuse-lite only bundles the ~580 most established features, so a brand-new property can show as Experimental even when caniuse.com itself already has a page for it — in that case the card still links out to caniuse.com, just without a version table.
The NEW badge is not a time window — it marks whichever examples share the single most recent “added to this gallery” date. Add one example today and only it is NEW; add five in one sitting and all five are NEW together; add more tomorrow and today’s badges retire automatically, since they’re no longer the latest date.
By the numbers
63
examples
11
categories
21
sources crawled
Built with
Next.js (App Router) + React + TypeScript
The site itself — statically rendered, no server-side state at request time.
Tailwind CSS v4
Styling, using its CSS-first theme tokens for the color palette (including the status-tag colors below).
react-icons (Box Icons)
The browser logos, code/search/copy icons, and external-link markers used throughout the UI.
caniuse-lite + caniuse-api
The offline browser-support dataset behind every version number and the Production ready / Growing support split.
rss-parser
Feed discovery and parsing for sources that publish RSS/Atom.
cheerio
HTML link scraping for sources without a feed.
GitHub Actions
Runs the discovery script on a daily schedule and commits the results straight to the repo.
A flat JSON file
data/examples.json is the entire database — version-controlled, human-diffable, no server or database to run.
License & feedback
The code and every demo in this gallery are MIT licensed (opens in a new tab) — copy, adapt, and ship them, including commercially.
Found a bug, a broken demo, or a feature you think belongs here? Open an issue on GitHub (opens in a new tab).