CSS functions Archives

A grid of hexagon shapes of equal size that alternate between blue and red. Each shape is labelled by it's order in the grid.

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 Jan 23, 2026

CSS functions Scroll Driven Animation

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 Dec 10, 2025

container-queries CSS functions media queries Style Queries

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.

Daniel Schwarz on Nov 13, 2025

CSS functions math

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.…

Juan Diego Rodríguez on Nov 3, 2025

A series of six dits in a single row. Five are the same size and colored dark gray. The fifth item is scaled slightly smaller and colored gold.

animation CSS functions

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 Oct 15, 2025

color CSS functions

The thing about contrast-color

One of our favorites, Andy Clarke, on the one thing keeping the CSS contrast-color() function from true glory:

For my website design, I chose a dark blue background colour (#212E45) and light text (#d3d5da). This

…

Geoff Graham on Oct 8, 2025

CSS functions specifications

Quick Hit #59

A working draft for CSS Environment Variables is posted. Same concept as var(), but env() is a “global” variable at the document level for values the user agent is privy to.…

Geoff Graham on Sep 25, 2025

animation CSS functions math

CSS Typed Arithmetic

Starting in Chrome 140, we'll be able to calculate numeric values with mixed data types. Sounds small, but Amit demonstrates how big a deal this is, calling it Computational CSS.