CSS Demo Gallery (2026)

Animating an accordion open once required JavaScript to measure scrollHeight and set an explicit pixel height. Two properties remove that work. interpolate-size: allow-keywords permits transitions to and from intrinsic sizes such as auto, while @starting-style defines the value a property should animate from. Applied to a <details> element, the panel animates on its own.

@starting-style defines the values an element animates from the first time it renders, which finally gives you a real enter animation in pure CSS. Each chip below starts transparent and offset, then settles into place the moment it is added. There is no requestAnimationFrame toggle and no class swapped in on the next frame.

When a page switches between scrolling and not scrolling, the scrollbar appears and disappears, and the content jumps sideways by its width. scrollbar-gutter: stable reserves that space at all times, so the layout stays put. This one affects the page's own scrollbar, so there is nothing to embed here. Add both-edges if you want the gutter mirrored on both sides.

The pattern to remember is clamp(min, preferred, max). Viewport units scale with the whole window, which is wrong for a heading inside a sidebar or card. The cqi unit measures one percent of the nearest container's inline size instead, so the type tracks its own column. Drag the corner of the box below and the heading resizes even though the window stays fixed.

Container queries let a component react to the width of its own container instead of the viewport. Mark the parent with container-type: inline-size, then write @container rules against its width. Drag the panel below from narrow to wide and the card switches from stacked to a row. It needs no media query and knows nothing about the page around it.

Add the popover attribute and an id to an element, then point a button at it with popovertarget. The browser takes care of top-layer stacking, click-outside dismissal, and the Escape key. This demo positions the panel with CSS anchoring and animates it using @starting-style plus allow-discrete, which lets it fade and slide even though display and the top layer normally change instantly.

<datalist> attaches a native suggestion dropdown to a normal text input. The user can type anything, and the browser renders and filters the matching options as they go. When you need suggestions from a known list but still want to allow free text, this covers it in one element with no script.

Anchor positioning ties one element to another and keeps them aligned through scrolling and resizing, handled entirely by the browser. Name an element with anchor-name, then place another relative to it using the anchor() function. Together with the Popover API and @position-try fallbacks, it covers what positioning libraries were doing before.

Scroll-state container queries let CSS know when a sticky element is currently pinned, so a header can pick up a shadow only after it sticks. Set container-type: scroll-state on the wrapper and query scroll-state(stuck: top). Scroll the panel below and the header stays flat at rest, then gains a shadow the instant it sticks. No IntersectionObserver required.

The light-dark() function puts both theme values in a single declaration. Set color-scheme on the root, then write each color as light-dark(lightValue, darkValue). There is no separate prefers-color-scheme block to keep in sync. Across a design system with dozens of tokens, that saves a lot of duplicated declarations.

The switch attribute renders a checkbox as a native toggle: <input type="checkbox" switch>. It stays a real checkbox for forms and assistive tech, but it looks like the switch you would otherwise assemble from a hidden input and a couple of divs. Browser support is still landing, so use it as progressive enhancement. Where it is missing, you get a standard checkbox.

A scroll animation used to mean an IntersectionObserver or a scroll listener driving an animation frame by frame. Now you link a keyframe animation directly to a scroll position with animation-timeline. Use view() to run an animation based on where an element sits in the viewport, or scroll() to tie one to a scroll container's progress. The bar at the top fills as you scroll the panel, and each card fades in as it enters, all off the main thread with no script.

The native <select> has always been almost impossible to style, which is why every design system ships its own from scratch. Setting appearance: base-select on the control and its ::picker(select) opts into a fully stylable version. You can put arbitrary markup inside each <option>, and <selectedcontent> mirrors the chosen option into the button. It is still a real form control with native keyboard behavior. Support is early, so treat it as progressive enhancement over a normal select. See the Chrome team's writeup, The <select> element can now be customized with CSS, for the full anatomy.

The if() function brings real conditional logic into a property value. You can branch on a media query, a supports() test, or the value of a custom property with style(), and fall through to an else branch. The three badges below share one rule and pick their color from a --tone custom property, so the styling logic lives in CSS instead of a Sass mixin or an inline calculation.

To stagger a list before, you hand-wrote a delay for :nth-child(2), :nth-child(3), and so on, or generated them in a preprocessor. Now sibling-index() gives each element its position and sibling-count() gives the total, so a single calc(sibling-index() * -0.12s) offsets every item in the list no matter how many there are. Here each row runs the same looping animation, shifted by its index, so the motion ripples down the list.

The old attr() only produced strings, useful for content and little else. It can now read an attribute as a typed value: pass a data attribute through type(<color>) or type(<length>) and use it anywhere that type is valid. The chips below read their fill straight from a data-color attribute and the bars read their width from data-width, so the data can live in your HTML or come from a CMS without a line of JavaScript.

You no longer need fifty hand-picked shades in your root variables. Define one base token and derive the rest. color-mix() blends two colors in a chosen color space, so color-mix(in oklch, var(--primary) 20%, white) gives you a tint, and mixing toward black gives a shade. Relative color syntax goes further, letting you pull a base color apart and adjust a single channel. Every swatch below comes from one --primary token.