New CSS features,
explained by playing with them.

A collection of demos for CSS that shipped in the last couple of years. Everything runs live on plain CSS, with no JavaScript faking what the browser can now do on its own, and every demo comes with a short explainer of how it works. Some of it isn’t in every browser yet, and each demo says where support stands. Hope you enjoy these as much as I do!
(BTW: Be on the lookout for tiny CSS toys)

corner-shape / border-shape

Corners That Aren’t Round

Bevel, notch, scoop or squircle any corner, and draw a border along any shape at all.

(these corners are corner-shape, hover to transition):has()

The Parent Selector

An ancestor that reacts to the state of its own descendants.

(hover chips to see the card react in three different ways)@container

Container Queries

A component that reflows based on its container, not the viewport.

(hover to see the box's layout change)anchor-name / position-anchor

Anchor Positioning

Tether a popover to any element with pure CSS, no JS positioning math.

(the chip is attached to the anchor icon without JS)
nesting

CSS Nesting

Native nested selectors, media queries, and the & parent selector.

startViewTransition()

View Transitions API

Animated, morphing transitions between DOM states with one function call.

animation-timeline

Scroll-Driven Animations

Animations timed to scroll position instead of a clock, no JS listeners.

@starting-style / allow-discrete

Native Show/Hide Transitions

Animate an element in and out of display: none, no keyframes, no JS.

@scope

Native CSS Scoping

Contain a selector to a subtree without renaming every class.

scroll-marker-group / ::scroll-button()

Carousels

Swipe, snap, prev/next buttons, and dot markers, generated with no JS.

@property

Animatable Custom Properties

Give a custom property a syntax type so the browser can animate it, not just swap it.

@layer

Cascade Layers

Decide who wins the cascade by layer order instead of counting selector specificity.

Bonus round: play around with these

Small JS-free interactive bits.

:has() · sibling combinators · form reset

Tic-tac-toe, no JS

Turn order, win detection and the reset are all native: no click handlers anywhere.

@property · counter-reset · counter()

A number that counts

hover me

A typed integer custom property is transitioned, then rendered as text through a CSS counter. The bar is the same number, as a width.

:has() quantity queries

A table that counts its guests

The layout, seat size and caption all change based on how many items are switched on, with the count read directly by :has().

popover · ::backdrop · @starting-style

A native popover

Hello from the top layer.

Click outside, or press Esc, and it dismisses itself. The dim, blurred backdrop and the entrance animation are CSS too.

Open, close, light-dismiss, Escape handling and focus management come from the popover attribute alone.

:has(:checked) these swatches recolour every card above them
:has() · tic-tac-toe

turns, wins and reset, all CSS

@property · counter()
hover me
cos() · sin()

trigonometry, in CSS

:has() quantity query

switch guests on