CSS Almanac → Functions
Like any other programming language, CSS has functions. They can be inserted where you’d place a value, or in some cases, accompanying another value declaration. Some CSS functions even let you nest other functions within them!
anchor()
Experimental feature
The CSS anchor() function takes an anchor element’s side and resolves to the <length> where it is positioned. It can […]anchor()
.target { top: anchor(--my-anchor bottom); }
Continue Readinganchor-size()
Experimental feature
The CSS anchor-size() function takes an anchor element and resolves to its width or height <length>, essentially returning an anchor’s […]anchor-size()
.target { width: anchor-size(width); }
Continue Readingattr()
The CSS attr()
attr()
function enables you to pass the value of an HTML attribute over to CSS. .element { color: attr(data-color type()); }
Continue Readingcalc-size()
Experimental feature
The CSS calc-size() function enables us to perform calculations using intrinsic size values such as auto, min-content, max-content, and fit-content. […]calc-size()
.element { width: calc-size(auto, size); }
Continue Readingcircle()
The CSS circle() function allows you to create, you guessed it, circles when used with the shape-outside, clip-path, and offset-path […]circle()
.shape { clip-path: circle(100px); }
Continue Readingclamp()
The CSS clamp() function locks a value between a minimum and maximum, using a preferred value within that range.clamp()
.element { width: clamp(200px, 50%, 800px); }
Continue Readingcolor()
The CSS color()
color()
function allows you to use a color directly from a color space, either an existing color space or a custom one. .element { color: color(rec2020 0.5 0.15 0.115 / 0.5); }
Continue Readingcounter()
The counter()
counter()
function takes the number (or symbol) of a list item and makes it available to display outside the list. In other words, it makes things that aren't lists look like lists. For example, we can take the current list number of an existing list counter, format it as a Roman numeral, then display it in front of a heading:h2::before { content: counter(my-counter, upper-roman) ". "; }
Continue Readingcounters()
The CSS counters()
counters()
function can combine multiple lists into a single list. So, if you have two active counters on the page, counters()
can be used to combine them so that the list numbers are used to count the items in both lists together.li::marker { content: counters(item, ".") ") "; }
Continue Readingcubic-bezier()
The cubic-bezier() function lets you define custom timing curves for CSS animations and transitions. It gives you precise control over how elements […]cubic-bezier()
.element { transition: all 1s cubic-bezier(0.1, 0.9, 0.9, 0.1); }
Continue Readingellipse()
The CSS ellipse() function allows you to create ellipses when used with the shape-outside, clip-path, and offset-path properties.ellipse()
.shape { clip-path: ellipse(60px 40px); }
Continue Readingenv()
Experimental feature
The CSS env()
env()
function replaces environment variables into CSS. To be more precise, it is a way to insert user-agent-defined variables into your stylesheet..element { bottom: env(safe-area-inset-bottom, 0px); }
Continue Readinghsl()
The CSS hsl() function represents color in the sRGB color space and displays it according to its hue, saturation, and lightness. We […]hsl()
.element { color: hsl(90deg, 50%, 50%); }
Continue Readinglab()
The lab() color function represents colors in the CIELAB color space. It displays them according to their lightness, red/green axis position, blue/yellow axis position, and an optional alpha transparency value.lab()
.element { color: lab(50% 50% 50% / 0.5); }
Continue Readinglch()
The lch()
lch()
color function specifies colors in the CIELAB color space. Unlike the lab()
function — which uses Cartesian coordinates — the lch()
function uses polar coordinates to set color in terms of its hue and chroma, which is generally more intuitive..element { color: lch(10% 0.215 15deg); }
Continue Readinglight-dark()
The light-dark() function takes two color values—one for “light” mode and one for “dark” mode, and automatically switches between them depending on […]light-dark()
html { color: light-dark(#000, #fff); }
Continue Readingmatrix()
The matrix() function combines all the 2D transform functions into a single CSS declaration. It covers the translate(), skew(), and scale() functionsmatrix()
.element { transform: matrix(1, 0, 0, 1, 0, 0); }
Continue Readingmax()
The CSS max()
max()
function takes two or more comma-separated arguments of spacing values, evaluates them, and returns the largest value of the bunch..element { width: max(80%, 800px); }
Continue Readingmin()
The CSS min()
min()
function takes two or more comma-separated arguments of spacing values, evaluates them, and returns the smallest value of the bunch..element { width: min(80%, 800px); }
Continue Readingmod()
The CSS mod() function returns the remaining “modulo” after the first argument is modulus-divided by the second argument. It’s the […]mod()
.element { width: mod(10px, 4px); }
Continue Readingoklab()
The oklab() function represents colors in the OKLab color space. OKLab is an “OK” and even better version of the lab color […]oklab()
.element { color: oklab(25.77% 25.77% 54.88%; }
Continue Readingoklch()
The CSS oklch()
oklch()
function specifies colors with three components — Lightness (L), Chroma (C), and Hue (H) — offering a perceptually uniform system, which is a fancy way of saying that it is closely aligned with how humans perceive color..element { color: oklch(70% 0.15 240); }
Continue Readingpath()
The CSS path()
path()
function enables us to create complex paths, polygons and other shapes using SVG path command syntax..element { clip-path: path("…"); }
Continue Readingrandom()
Experimental feature
The random() function in CSS is an experimental feature (i.e., not supported in any browser) that returns a random numeric […]random()
.element { width: random(5rem, 25rem, by 5rem); }
Continue Readingrem()
The CSS rem()
rem()
function (also called the “remainder” function) returns the amount left over after the first argument’s integer is divided by the second argument..element { width: rem(10px, 4px); }
Continue Readingrgb()
The CSS rgb() color function represents color in the sRGB color space specifying their redness (r), greenness (g), and blueness (b), and an optional transparency value.rgb()
.element { color: rgb(0 0 0 / 0.5); }
Continue Readinground()
The CSS round() function enables us to round a number, percentage, or dimension (i.e., a number with units attached). We’ve been able to round using […]round()
.element { width: round(10.4px, 1px); }
Continue Readingscroll()
Experimental feature
The CSS scroll()
scroll()
function provides an anonymous scroll timeline when used as a value for the animation-timeline
property. Instead of explicitly setting up and referencing a named timeline using scroll-timeline-name
, the scroll()
function handles it for you. You simply tell it which scroll container to track (called the “scroller”) and which axis to follow, and it returns an anonymous scroll timeline..element { animation-timeline: scroll(); }
Continue Readingshape()
Experimental feature
The CSS shape()
shape()
function enables us to more easily create complex paths, polygons and other shapes using a more human readable syntax using lines, arcs, and curves. It also allows much greater flexibility and responsiveness in the use of units than the CSS path()
function..triangle { clip-path: shape(from 50% 0%, line by 50% 100%, hline to 0%, line to 50% 0%, close); }
Continue Readingsibling-count()
Experimental feature
The sibling-count() CSS function returns the total number of sibling elements an element has, including itself. Think of it sort […]sibling-count()
ul li { width: calc(100% / sibling-count()); }
Continue Readingsibling-index()
Experimental feature
The sibling-index()
sibling-index()
CSS function returns the position of an element among its siblings, starting from 1. It's similar to :nth-child()
, but instead of using it in selectors, you can now use the index directly within CSS functions and calculations.ul li { transform: translateX(calc(sibling-index() * 10px)); }
Continue Readingsymbols()
Defines an only-use counter style without the need to do a whole @counter-style, at the cost of missing some features.symbols()
ul { list-style: symbols(cyclic "🥬"); }
Continue Readingview()
Experimental feature
The view() function tracks the progress of an element within a scrollable viewport (the nearest scroll container), when used in the animation-timeline […]view()
.element { animation-timeline: view(); }
Continue Reading