← All ConceptsVol.3
Hidden Gems

Volume 4

Hidden
gems.

Individually tiny. Together, the difference between an interface that feels functional and one that feels crafted. Every feature here is cross-browser and costs nothing to add.

Scroll to begin
01

@property

Animate CSS custom properties. The unlock nobody knows about.

CSS variables can't be transitioned — the browser doesn't know their type. @propertytells the browser "this is an angle" or "this is a color," making it animatable. This unlocks: gradient rotation, hue shifting, counter animation — all in CSS.

@property --grad-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; } /* Now this transitions smoothly! */ .box { background: linear-gradient( var(--grad-angle), teal, pink ); transition: --grad-angle 0.3s; }
Without @property, transitioning a gradient angle is impossible — the browser interpolates the whole string. With @property, the browser knows it's an angle and interpolates numerically. This single feature unlocks animated gradients, hue cycling, and counter animations — all previously JavaScript-only territory.
02

accent-color

Theme every native form control. One property.

/* That's it. Seriously. */ :root { accent-color: #00b8a3; }
Pick a colour. Every checkbox, radio button, range slider, and progress bar instantly matches. No custom components. No CSS overrides. One line. This alone can make a SaaS form feel branded instead of default.
03

::selection

Even selected text can be on brand.

Select this text to see the custom highlight

Drag across these words. The selection colour changes based on your chosen theme above. A tiny detail that signals thoughtfulness. Most websites leave the default blue — which clashes with almost every brand palette. Two lines of CSS to fix.

Select text above, then switch themes. Two CSS lines: ::selection { background; color }. Works everywhere. Tiny detail that 99% of sites leave as browser-default blue.
04

clip-path

Elements shaped beyond rectangles.

Every element on the web is a rectangle. clip-path breaks that. Hexagons, diamonds, stars, arrows — any polygon. Hover to see them transition (clip-path is animatable).

Hexagon

Diamond

Star

Cross

Arrow

Blob

Hover any shape to watch it animate back to a full rectangle. clip-path transitions are smooth and GPU-accelerated. Use for: profile picture shapes, decorative section dividers, creative hover effects, badge shapes.
05

shape-outside

Text that wraps around shapes. Magazine layouts.

This text wraps around the circle — not in a rectangular box, but following the actual curve. This is how magazine layouts work. The CSS property shape-outside: circle(50%)tells the browser the float's shape boundary is circular, and inline content flows around it. You can use ellipse(), polygon(), or even url() to reference an image's alpha channel as the shape boundary. Combined with clip-path, you get editorial-quality text layouts with pure CSS. This has been supported in all browsers since 2018 and almost nobody uses it. It works with any floated element and costs nothing in performance.

The text above genuinely wraps around the circle's curve, not its bounding box. Available since 2018. You can use polygon() for custom shapes — imagine text flowing around a product image's silhouette. Editorial magazine layouts in CSS.
06

Animate to auto

The holy grail. CSS can finally do it.

For years, animating from height: 0 to height: auto was impossible in CSS. You needed JS to measure the element, then animate to the pixel value. Now: interpolate-size: allow-keywords.

A change engine that models Workforce (humans + agents) ↔ Knowledge ↔ Capabilities. It closes capability gaps by generating intervention plans — training humans, deploying agents, or both.

Agents can be enrolled as learners. Their 'learning' involves configuration: prompt templates, tool access, behavioral guidelines, and evaluation against criteria. Human-agent pairs can learn together.

Centaur mode is human-led, agent-assisted collaboration with clear handoff points. Research shows it's optimal for skill development — unlike self-automator mode where humans gain zero skills.

/* The magic property */ .container { interpolate-size: allow-keywords; } /* Now this works! */ .panel { height: 0; transition: height 0.5s; } .panel.open { height: auto; }
Click the questions. The answers expand with a smooth CSS transition to auto height. Previously this required measuring the DOM with JS. interpolate-size: allow-keywords is in Chrome 129+ and Safari 18.2+. For older browsers, the content simply appears without animation.
07

Form Polish

Auto-resize textareas. Branded cursors. Zero JS.

field-sizing: content (auto-grow textarea)

The textarea grows as you type. No JS auto-resize library needed.

caret-color (branded text cursor)

Click into each field. The blinking cursor matches your brand.

field-sizing: content replaces every auto-resize textarea library in your codebase. caret-color is supported everywhere since 2018 and almost nobody sets it. Two properties. Instant polish.
08

CSS Counters

Auto-numbering. Styled however you want.

Create the organisation
Build the org chart with AI
Populate the knowledge base
Define the skills framework
Articulate a goal
Generate an intervention plan
Activate and track progress
.list { counter-reset: steps; } .item { counter-increment: steps; } .item::before { content: counter(steps, decimal-leading-zero); color: teal; font-family: monospace; }
Numbers generated and styled by CSS — not hardcoded. Reorder the list and numbers update automatically. Use decimal-leading-zero for 01, 02, 03... or upper-roman for I, II, III. The numbers can be coloured, sized, and positioned independently of the content.
09

One-Liners

Each is a single property. Each improves perceived quality.

overscroll-behavior: contain

Stops scroll chaining — inner scrollable areas don't bounce the outer page.

All browsers
scroll-behavior: smooth

Native smooth scrolling for anchor links. No JS library.

All browsers
aspect-ratio: 16/9

Maintains aspect ratio without the padding-top hack. Clean responsive images/videos.

All browsers
object-fit: cover

Images fill their container like background-size: cover but for <img> tags.

All browsers
user-select: all

Click once to select entire content. Perfect for code blocks, API keys, tokens.

All browsers
isolation: isolate

Creates a new stacking context. Prevents blend-mode from leaking to siblings.

All browsers
image-rendering: pixelated

Crisp pixel scaling. For pixel art, QR codes, small icons scaled up.

All browsers
touch-action: manipulation

Removes 300ms tap delay on mobile. Prevents accidental double-tap zoom.

All browsers
content-visibility: auto

Browser skips rendering off-screen elements. Can reduce initial render by 50%+.

Chrome, Edge, Firefox
prefers-reduced-motion

Respect users who get motion-sick. Disable animations for them. Accessibility win.

All browsers
Ten properties. Ten one-liners. Each eliminates a common UX annoyance or adds a polish detail. content-visibility alone can cut your largest page's render time in half by telling the browser to skip off-screen elements. prefers-reduced-motion is an accessibility requirement that also makes your animation system more thoughtful.

End of Volume 4

Polish is not
one big thing.
It's fifty small ones.

Branded form controls. Custom text selection. Shape-wrapped text. Auto-resizing textareas. Smooth height animations. Animated gradients. CSS counters. Ten one-liner wins. None of these are expensive. All of them are noticed — even when people can't say why.

← Volume 3Volume 1All Concepts