Best of CSS-Tricks — April 2026

1. 1
   Article

   CSS-Tricks·7w

   Selecting a Date Range in CSS

   A tutorial demonstrating how to build a CSS-driven date range selector using the `:nth-child(n of selector)` syntax. The approach uses checkboxes for state and CSS selectors to handle both the range highlighting and the JavaScript logic for managing which dates are selected. The key insight is that `:nth-child(2 of :has(:checked))` lets you target checked elements by their position among checked siblings, simplifying both the JS range-adjustment logic and the CSS range styling to just a few lines.

   154

   10
2. 2
   Article

   CSS-Tricks·6w

   7 View Transitions Recipes to Try

   Seven ready-to-use CSS View Transition recipes are presented with full code snippets: pixelate dissolve, wipe up (with directional variants), rotate in-out, circle wipe-out, diagonal push, curtain reveal, and 3D flip. Each recipe uses the @view-transition at-rule with a named type, paired with ::view-transition-old and ::view-transition-new pseudo-elements and @keyframes animations. The setup section explains how to opt in to view transitions, use the types descriptor to avoid conflicts, and wrap everything in a prefers-reduced-motion media query for accessibility.

   97

   4
3. 3
   Article

   CSS-Tricks·8w

   Making Complex CSS Shapes Using shape()

   The CSS shape() function enables creation of complex organic shapes like blobs, wavy dividers, and squiggly frames directly in CSS without SVG. The technique relies on chaining smooth curve commands where each shared point between adjacent curves is the midpoint of their control points. Generators are available for wavy dividers, blobs, and fancy frames. Shapes can be animated by interpolating between two shape() values with the same granularity, and scroll-driven animations are supported via animation-timeline: scroll(). The post walks through the mathematical logic behind smooth curve generation and showcases demos including animated wavy layouts, squishy buttons, and CSS loaders.

   83

   3
4. 4
   Article

   CSS-Tricks·7w

   New CSS Multi-Column Layout Features in Chrome

   Chrome 145 introduces two new CSS properties — `column-wrap` and `column-height` — that address a long-standing limitation of multi-column layouts: horizontal overflow. With `column-wrap: wrap`, content that exceeds the column height flows into a new row below rather than creating a horizontal scroll, enabling 2D multi-column flows. The post covers practical use cases including fixed-height card grids, newspaper-style layouts, and block-direction carousels using scroll-snap. It also outlines limitations: the properties require known column heights, still need media queries for full responsiveness, and lack the precise alignment control of CSS Grid. A comparison with Grid, Flexbox, and CSS Masonry clarifies when multi-column is the right tool. Browser support is currently Chrome 145+ only.

   20