The library

Techniques, not templates

Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.

01 / 10

Inverting Headline: White Minus the Backdrop

One line, and the headline stops needing a colour. mix-blend-mode: difference subtracts the two layers channel by channel, so white text hands back the exact inverse of whatever is under it: black on a bright sheet, white on a dark hero, cyan over magenta, all of it per pixel and without a second copy of the text. Three things bound it. Mid grey is the blind spot, since 128 against 255 comes back as 127, the grey it was meant to beat. Only white is a true invert, because any other colour has channels it cannot fully subtract. And a blended element reads everything painted beneath it in its stacking context, so isolation: isolate on the scene is what stops the headline from subtracting the whole page.

csscontrasttypographytextcolorblend-modeno-jshero

02 / 10

Clamp a Paragraph to N Lines

Cutting a preview to a fixed number of lines used to mean measuring text and slicing strings. Three declarations do it instead: display: -webkit-box with a vertical box-orient lets -webkit-line-clamp cut at whatever line you name, and the browser adds the ellipsis. The line count here is a custom property, so the same rule serves every card.

csstypographytexttruncationline-clamp

03 / 10

Highlighted Pricing Card

A three-column pricing table where the middle, 'popular' plan stands out with a larger scale, a glowing gradient border, and an accent badge. Numeric figures are aligned using tabular numbers for a clean, consistent look.

csslayouttypographygradientcardpricingtransform

04 / 10

Readable Line Length with `ch` unit

This trick demonstrates how to improve text readability by limiting line length using the CSS `ch` unit. Long lines make text hard to follow, while `max-width: 65ch` creates an ideal measure for comfortable reading.

csslayoutresponsivetypographyreadability

05 / 10

CSS Text Wrap: Balance & Pretty

This UI trick uses the new `text-wrap` CSS property to intelligently balance headlines and prevent orphaned words in paragraphs. Applying `text-wrap: balance` makes multi-line headings visually symmetrical, while `text-wrap: pretty` prevents a single word from appearing alone on the last line of a paragraph, enhancing readability and design aesthetics with zero extra markup.

csslayouttypographytextui-uxreadability

06 / 10

Minimal Data-Ink Bar Chart

A minimalist bar chart design demonstrating the data-ink principle. It highlights a single key data point with an accent color and direct labels, removing all 'chart junk' like gridlines, axes, and excessive borders for improved readability and focus.

csslayouttypographychartminimalismdataviz

07 / 10

Fluid Typography with clamp()

This demo showcases how to use the CSS `clamp()` function to create fluid typography that smoothly scales with a simulated viewport width, staying within defined minimum and maximum bounds without abrupt size jumps.

animationcssresponsivetypographyfluid-designclamp

08 / 10

Tabular Numbers for Aligned Prices

This trick ensures numbers in a column align perfectly, especially decimal points, by using fixed-width digits. It contrasts the default 'proportional-nums' where digits like '1' are narrower than '0', causing a subtle wobble in price columns, with 'tabular-nums' for a precise, 'audited' look.

csslayouttypographytableprecisionnumbers

09 / 10

Animated Flowing Gradient Text

A vibrant gradient continuously slides through text, creating an eye-catching, dynamic heading with a subtle glow, making the text feel alive and modern.

animationcsstypographytextgradienteffects

10 / 10

Premium Pricing Card Details

This demo illustrates how subtle design changes like increased padding, clear typographic hierarchy, soft shadows, and a strong accent color can transform a basic pricing card into a premium-looking UI component.

csslayoutui/uxtypographycardshadow