Colors & Gradients
Typography
font-size-0 — The quick brown fox
font-size-1 — The quick brown fox
font-size-2 — The quick brown fox
font-size-3 — The quick brown fox
font-size-4 — The quick brown fox
font-size-5 — The quick brown fox
font-size-6 — Fox
font-size-7
This paragraph uses text-wrap: balance to create more even line lengths in narrow containers, making the text feel more visually balanced.
Layout (Grid & Flexbox)
Auto-fit Grid
Flexbox Wrap with Gap
Container Queries
Resize the browser to see the cards adapt based on their container width, not viewport.
Responsive Card
This card layout changes based on its container size using @container queries.
Narrow Container
Same component, narrower container — different layout automatically.
Cascade Layers
Styles are organized with @layer — base, components, utilities. The box below is styled by all three layers with predictable specificity.
@layer base, components, utilities
CSS Nesting
Parent Element
This section uses native CSS nesting (no preprocessor needed).
:has() Selector
Check the checkbox to change the card's appearance using :has(:checked).
The parent card reacts to the checkbox state via :has().
Animations & Transitions
Open Props Easings
Scroll-Driven Animations
As the page scrolls, the progress bar at the top fills. The boxes below animate as they enter the viewport.
color-mix() & Relative Colors
Subgrid
Card A
Short text
Card B
This card has significantly more text content to demonstrate how subgrid keeps the rows aligned.
Card C
Medium text here.
Anchor Positioning
Experimental — may not work in all browsers. The tooltip is positioned relative to the anchor element.
Popover API
Popover Content
This uses the native Popover API — no JavaScript needed for show/hide!
Dialog Element
Accent Color & Form Styling
Logical Properties
margin-inline, padding-block, border-inline-start — works with any writing direction.
Aspect Ratio
Fluid Typography (clamp)
This heading scales fluidly between viewport sizes using clamp().
Individual Transform Properties
Advanced Custom Properties
Using @property for typed custom properties with animation.