What Are the CSSplay Experiments? Stu Nicholls' Pure CSS Demos Explained
CSSplay's Experiments are a long-running collection of interface and layout demos built almost entirely with CSS — no JavaScript or other programming languages in most cases. Created by Stu Nicholls, the site exists to show that CSS is more than "a simple mechanism for adding style" (the W3C definition it quotes and pushes back against). If you want to see what pure CSS can actually do — menus, slideshows, responsive layouts, 3D carousels — and study the code behind them, this is the resource to browse. The main caveat: many demos lean on newer CSS features, so check browser support before reusing them in production.
What the Experiments actually are
CSSplay is a demonstration site, not a framework or a library. Each experiment is a self-contained page showing one technique, usually with the CSS exposed so you can read and adapt it. The site's stated goal is twofold: help newcomers to CSS, and show experienced developers that CSS goes well beyond fonts, colors, and spacing.
The defining constraint is the point of the whole project — just CSS. Most demonstrations use no JavaScript or any other programming language. That makes the collection useful as a reference for what is achievable natively, and as a stress test of how far modern CSS has come.
What's covered
The demos are organized by theme rather than by difficulty. Current groupings include:
| Category | Example experiments |
|---|---|
| Menus | Drop/flyout and tree menus, multi tree menu styling, retro focus-within tree menu, horizontal & vertical menu, details/summary slide, ULTIMATE tree menu v2/v3, radio tree menu |
| Slideshows | Simplest auto slideshow, auto/manual slideshow, full screen slideshow, split screen slideshow, multiple slideshows, grid slideshow, masonry layout, wine/lego/cosmetic slides |
| Layout & shapes | CSS Grid lanes emulation, folding text and image corners, corner-shape clover and superellipse() flower, shape-outside with images |
| Charts & tools | Border-shape pie chart, clip-path pie chart, CSS-only stopwatch |
| Modern features | sibling-index() / sibling-count() carousel, :if() slideshow, @container style queries, height: calc-size(auto, size) |
The pattern is worth noticing: alongside classic menu and layout techniques, there's a steady stream of experiments using very recent CSS — :has(), @container, clip-path, sibling-index(), corner-shape. That mix is what makes the site useful both to beginners and to people tracking cutting-edge CSS.
How to use the experiments in your own work
- Pick a category that matches your task. If you need a navigation pattern, start with the Menus group; if you need a hero rotator, start with Slideshows.
- Open the demo and read the CSS. The value is in the technique, not a drop-in component — expect to adapt selectors, sizing, and markup to your own structure.
- Check the feature dependencies. Experiments built on
:has(),@container,sibling-index(), orcorner-shapewill not work in older browsers. Confirm support for your target audience before shipping. - Start your document with a standards-compliant DOCTYPE. The site explicitly asks for this — it recommends using a standards-compliant
!DOCTYPEas the first line of your (x)html, with a list of recommended DTDs linked from the site. Skipping this is a common reason demos render incorrectly when copied. - Verify in the browser, not just by reading. Pure-CSS techniques often depend on subtle interactions (focus, hover, checked state, container size), so test the actual behavior rather than assuming it from the source.
Common sticking points
- "It looks broken when I paste it in." Usually a DOCTYPE or markup-structure mismatch, or a missing wrapper element the CSS depends on.
- "The interaction doesn't work." Many demos rely on
:focus-within,:checked, or@containerqueries — these need the right HTML structure and a browser that supports the feature. - "Can I use this commercially?" The site mentions advertising and lists PayPal as a payment platform, but the input does not state licensing terms for the demos. Treat reuse terms as something to confirm on the site itself rather than assume.
Who this is for
CSSplay's Experiments suit two audiences: developers learning CSS who want concrete, readable examples of specific techniques, and experienced developers who want to see how far pure CSS can be pushed with current features. If you need a production-ready component with guaranteed cross-browser behavior, treat these as a starting reference and budget time for adaptation and testing.