What Is CSSplay? A Guide to Stu Nicholls' Pure CSS Experiments
CSSplay is a long-running experimental CSS site created by Stu Nicholls, built around one core idea: most of its demonstrations use just CSS — no JavaScript or other programming languages. It is useful if you want to see what CSS alone can do (menus, layouts, slideshows, charts) and then read the source to adapt the technique. It is less suited if you need production-ready, cross-browser-guaranteed components, because the demos are explicitly experiments.
What CSSplay actually is
The site describes itself as "Doing It With Style" and "Experimenting with Cascading Style Sheets." Its starting point is a disagreement with the common W3C framing of CSS as "a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents." Nicholls argues CSS is not simple — it can be very complicated — and that it is "oh so much more" than a styling mechanism.
That tension defines the site's purpose:
- For newcomers: worked examples that show CSS doing concrete things, rather than abstract property lists.
- For experienced developers: techniques that go beyond ordinary styling, often pushing a single CSS feature to an unusual conclusion.
The site is listed on w3c.org, which is a signal of visibility in the CSS community rather than an endorsement of every demo.
What kinds of demos are on the site
The content is organized around a few recurring categories. The recent demonstrations list shows the range clearly:
| Category | Example demos |
|---|---|
| Menus | Drop/flyout and tree menu, multi tree menu styling, retro focus-within tree menu, horizontal & vertical menu, ULTIMATE tree menu v2/v3, radio tree menu, details/summary slide |
| Slideshows | Simplest auto slideshow, 3D auto/manual carousel, fit screen slideshow, full screen slideshow, split screen slideshow, multiple slideshows, grid slideshow, lego slides with pause |
| Layout | Masonry layout v2, responsive masonry layout, CSS Grid Lanes emulation |
| Charts & shapes | CSS border shape pie chart, CSS clip path pie chart, corner-shape 4 leaf clover, superellipse() flower |
| Text & image effects | Folding text corner, folding image corners, shape-outside img png |
| Interactive / state | CSS-only simple stopwatch, stopwatch using @container, sibling-index() carousel |
Two things stand out in that list. First, the demos track modern CSS features as they appear — :if(), sibling-index(), sibling-count(), calc-size(), corner-shape, superellipse(), shape-outside, and @container queries all show up. Second, several demos are labeled "CSS only," which is the site's defining constraint.
How to use a CSSplay demo in your own project
The workflow is the same for almost any demo on the site:
- Open the demo page and confirm the effect works in your target browser. The site is a collection of experiments, so behavior can differ across browsers and versions.
- View the page source (or the linked CSS) to see the markup and rules behind the effect. Because most demos avoid JavaScript, what you read is the whole mechanism.
- Copy the relevant HTML structure and CSS rules into a test page of your own, rather than dropping them straight into production.
- Verify against a standards-compliant DOCTYPE. The site makes a point of this, asking visitors to "please, please, please use a standards compliant !DOCTYPE as the first line of your (x)html," and links to a list of recommended DTDs. Quirks-mode rendering can break layout assumptions that the demos rely on.
- Test the effect with your own content — longer menu labels, more items, different viewport widths — since demos are usually tuned to a specific example.
The expected result at each step is a working local copy you understand, not a black-box snippet.
Common sticking points
- Browser support for newer features. Demos using
:if(),sibling-index(), orcorner-shapedepend on CSS features that may not be available everywhere. Check support before committing to the technique. - DOCTYPE and quirks mode. Skipping the standards-compliant DOCTYPE is the single most likely reason a copied demo behaves differently on your page.
- Demo-specific tuning. Fixed dimensions, specific text lengths, or particular nesting depths may be baked into the example.
- Experimental intent. The site's own framing is experimentation; treat each demo as a technique to learn from and adapt, not a finished component.
Who gets the most out of it
- CSS beginners benefit from seeing complete, working examples of menus and layouts instead of isolated properties.
- Intermediate developers can use the tree menus, slideshows, and masonry layouts as starting points and study how far pure CSS can be pushed.
- Experienced developers will find the newer-feature demos — container queries,
sibling-index(),corner-shape,superellipse()— useful as compact references for syntax and behavior.
If your goal is a drop-in UI library with support guarantees, CSSplay is the wrong tool. If your goal is to understand how a specific CSS-only effect is built, it is one of the more direct places to look.
Practical notes
The site also carries advertising information and mentions PayPal among its payment platforms, so there is a commercial side to the project alongside the demos. The demos themselves are the main resource: browse by category (Menus, Demos, Layouts), open the ones closest to your problem, and read the source.