h1 { text-wrap: balance; }

article { content-visibility: auto; }

Here are some new(ish) CSS properties that are seriously worth adopting. We use them in production, suggest you also try them out if not already. Hopefully there is a couple you haven’t tried yet.

Balanced headlines without manual line breaks

h1 { text-wrap: balance; }

Stops headlines from having one word on the last line. Browser redistributes text automatically. Works across modern browsers.

Tailwind: text-balance

Massive performance boost for long pages

article { content-visibility: auto; }

Browser skips rendering off-screen content. Massive performance boost for long pages with lots of content. You need to handle heights properly (via contain-intrinsic-size) to prevent scroll jumping.

Tailwind: [content-visibility:auto]

Frosted glass blur effect

.modal { backdrop-filter: blur(10px) saturate(180%); }

Blurs and saturates whatever’s behind the element. The saturate(180%) keeps colors from looking washed out. GPU-intensive, so use it sparingly.

Tailwind: backdrop-blur-lg backdrop-saturate-[180%]

.modal { overscroll-behavior: contain; }

Stops scroll from propagating to parent elements. Fixes the annoying thing where you scroll to the bottom of a modal and the page behind starts moving. No JavaScript needed.

Tailwind: overscroll-contain

Positioning shorthand

.overlay { inset: 0; }

Shorthand for top: 0; right: 0; bottom: 0; left: 0;. You can also do inset: 10px 20px for different values.

Tailwind: inset-0

Better z-index management

.container { isolation: isolate; }

Creates a new stacking context. Cleaner alternative to z-index wars. Elements inside the container won’t interact with elements outside it. Useful when you need to control layering without wrestling with z-index values across your entire page.

Tailwind: isolate

Remove image backgrounds

img { mix-blend-mode: multiply; }

Removes white backgrounds from images. If you have a logo or graphic with a white background that needs to sit on a colored section, multiply makes the white disappear. Use screen to remove black backgrounds instead.

Check out tunbridgegallery.com.au for a good example of mix-blend-mode in action. Great for cleaning up images without opening Photoshop.

Tailwind: mix-blend-multiply

Responsive components based on container size

.card-container {
container-type: inline-size;
}

@container (min-width: 400px) {
.card {
grid-template-columns: 200px 1fr;
}
}

Media queries check viewport size. Container queries check the parent container’s size.

You mark a parent element as a container with container-type: inline-size, then child elements can respond to that container’s width instead of the viewport. Same card component can live in a narrow sidebar or wide main content area and adapt automatically based on its available space.

Makes components genuinely reusable across different layouts.

Tailwind: Parent: @container, Child: @md:grid-cols-2

All of these are production-ready. Most have been supported across browsers for a couple years now.