Newest CSS primitives. Sixty demos with fallbacks. Also listed on Effects.
01Scroll-triggered animations
Scroll this box ↓
Alpha
Bravo
Charlie
Delta
Echo
02sibling-index() stagger
03Animated float shapes
Text flows around the blob because shape-outside tracks the very shape that clips it. As the shape morphs, the line boxes re-wrap on every frame, with no JavaScript, no canvas and no float hacks. Resize the window and the lines settle against the moving edge. The wrap follows the curve, not the bounding box, which used to need a static image mask or a polygon computed by script. Keep the motion slow and let people stop it: this page removes it under reduced motion.
04Gap decorations
123456789
05border-area clip
Gradient frame
Painted by the background, not by a mask or a wrapper element.
06light-dark() images
Day card
Image and text switch together.
Night card
Each card owns its scheme.
07alpha() tint ladder
102030405060708090
08:open disclosure
What does :open match?
Any element in an open state: details, dialog, and select or input pickers.
Why not [open]?
The attribute only exists on details and dialog. :open also covers popup state.
09text-fit headline
WOLF CREEK
10random() confetti
11progress() gauge
12focusgroup toolbar
13scroll-initial-target NEW
Scroll, then Jump in
Alpha region
★ Target
Charlie region
Delta region
14Customizable select picker NEW
Native ::picker when supported; styled fallback otherwise.
15Squircle corner-shape NEW
Squircle
corner-shape: squircle with a continuous corner curve. Falls back to border-radius.
16Reading-flow demo NEW
Reading flow
Pull-quote sits visually between paragraphs but stays in reading order after the body.
“Ship the readable path first.”
Assistive tech follows reading-flow / reading-order so the quote is announced where it belongs in the narrative, not where it floats in the layout.
17Relative-color contrast NEW
Background
Auto text
Relative color + contrast pair
18scroll-state queries NEW
Scroll — shadows appear from scroll-state
Alpha
Bravo
Charlie
Delta
@container scroll-state
19details::details-content NEW
Open for ::details-content
Animated with interpolate-size + ::details-content when supported.
details content transition
20::picker-icon NEW
::picker-icon styled when available
21anchor-size NEW
Sized with anchor-size() when supported; min-width matches the button.
anchor-size()
22text-box-trim NEW
Trimmed
text-box-trim / text-box-edge tighten the headline box.
text-box-trim
23margin-trim NEW
First paragraph keeps its top margin visually trimmed by the container.
Last paragraph margin is trimmed at the bottom edge.
margin-trim: block
24calc-size NEW
calc-size(auto, size) animates height to auto with a fallback max-height path.
Second line for taller content.
25sibling-index nav NEW
stagger via sibling-index()
26random() sparkle NEW
random() with JS fallback
27progress() ring NEW
60%
progress() ring
28if() style toggles NEW
if()
Calm palette
if() with data-attr fallback
29light-dark cards NEW
light-dark()
Card surface and text flip with color-scheme.
30color-mix ramps NEW
color-mix() ramp
31relative color buttons NEW
oklch(from …)
32@scope themes NEW
Scope A
Scope B
@scope theme islands
33field-sizing grow NEW
field-sizing: content
34entry effect popover NEW
Entry effect
@starting-style fades this in when supported.
35customizable select skin NEW
base-select skin
36reading-order demo NEW
Aorder 2
Border 1
Corder 3
Tab order follows reading-order when supported
37corner-shape blob NEW
Blob
corner-shape: scoop / notch fallback
corner-shape
38overflow-clip-margin NEW
Clip margin
Glow bleeds via overflow-clip-margin.
overflow-clip-margin
39text-wrap balance card NEW
Balanced headline for the shop floor brief
text-wrap: balance keeps the title from leaving a lonely word.
text-wrap: balance
40hanging punctuation NEW
“Ship the readable path first, then dress the chrome.”
hanging-punctuation
41Frosted glass over sunlit oak NEW
Wire-brushed · 7″
Sunlit White Oak
$6.79/sq ft · in stock
drag me
42Holo sample chip NEW
@property tilt · mask-image foil · tap to flip
43Living floor bento NEW
Hardwoodfrom $5.95 · refinish 4–6×
LVP100% waterproof · tap to spill
Carpetdrag to brush the pile
Tileglazed porcelain · tap it
Sheet vinylseamless to 12′
44LiDAR room scan NEW
LiDARDrag the corner ◢ to resize
— sq ftPoint at the floor and scan
45Stain-mix grain gradient hero NEW
Buster's stain bar
Find your finish.
Stir the color with your cursor. Pick a stain and watch it soak into the oak.
46Bento door configurator NEW
35 mm cup
THUNK
drag the door open, let go
ColorArctic White
$44 / door24
47Reeded glass door, live reflection NEW
48Holo laminate sample ring NEW
← drag to fan · tap a chip →
TFL sample ring6 finishes · free with any quote
49Sketch-to-render cabinet diffusion NEW
✦sketch_0412.png
RENDERSKETCH
50Spatial exploded cabinet NEW
B18 base · 18″TFL Navy Shaker · from $214
51Bento closet planner NEW
0ft hanging
0shoe pairs
0drawers
0installed
52Liquid-glass sliding wardrobe NEW
Bypass wardrobeTFL Closet · 96″ glass slider
53Mesh-gradient cloth swatches NEW
Belgian LinenBin fronts · breathable weave$18 / bin
54Aurora closet lighting NEW
Motion sensor armed · wave to enter
3000KWarm white
55Clay 3D closet NEW
5 of 8 hangers
56Bento proof wall NEW
Doors shipped48,210Rating4.9★★★★★★★★★★2,316 reviewsLive ordersShips in7 days
57Liquid-glass pricing card NEW
$912$38 / door · 24 doors
save $1,224
Big-boxTFL
58Variable-weight pitch NEW
New doors. Same cabinets. Half the price.
TFL laminate doors from $38 · ships in 7 days
59Kinetic pro logo cloud NEW
1,200+pros order here
60Live ROI orb NEW
you keep$14,880a year
613D door explosion NEW
Left stile
Right stile
Top rail
Bottom rail
Center panel
Two dowels on each rail end, staggered so they miss the groove. The panel sits in the slot cut in the frame.
62Staggered dowel seat NEW
StileFrontBack
Rail
Drag the rail onto the stile.
63Panel in the groove NEW
Top rail
Center panel
Bottom rail
The panel sits in the grooves. It can float. It does not fall out.