The Importance of Native Randomness in CSS
We're getting new functions for generating random numbers in CSS! But the road to get here has been a long and winding one.
Articles Tagged
30 Articles
Making Complex CSS Shapes Using shape()
Creating rectangles, circles, and rounded rectangles is the basic of CSS. Creating more complex CSS shapes such as triangles, hexagons, stars, hearts, etc. is more challenging but still a simple task if we rely on modern features.
Temani Afif
on
Updated on
Abusing Customizable Selects
Let’s go over a few demos using the new customizable
<select> feature that may be wild, but also give us a great chance to learn new things in CSS. 
Spiral Scrollytelling in CSS With sibling-index()
Lee accepts a challenge: arranging text in a spiral that animates as a vortex on scroll... all in CSS.
Lee Meyer
on
Responsive Hexagon Grid Using Modern CSS
A while back, Temani tacked a repeating grid of hexagon shapes. Well, he's updated it with modern CSS features that result in fewer magic numbers. And it's impressive!
Temani Afif
on
Creating Scroll-Based Animations in Full view()
It’s not that hard to do! Preethi shows you how it's really the same old animation you’re used to writing in CSS, only applied on a view timeline instead of a normal timeline.
Preethi
on
The Range Syntax Has Come to Container Style Queries and if()
Being able to use the range syntax with container style queries — which we can do starting with Chrome 142 — means that we can compare literal numeric values as well as numeric values tokenized by custom properties or the
attr() function. 
The “Most Hated” CSS Feature: tan()
Last time, we discussed that, sadly, according to the State of CSS 2025 survey, trigonometric functions are deemed the “Most Hated” CSS feature.…
Sequential linear() Animation With N Elements
Let’s suppose you have
N elements with the same animation that should animate sequentially. Modern CSS makes this easy and it works for any number of items!
Temani Afif
on