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()

The CSS anchor() function takes an anchor element’s side and resolves to the <length> where it is positioned. It can […]
.target { top: anchor(--my-anchor bottom); }
Continue Reading

anchor-size()

The CSS anchor-size() function takes an anchor element and resolves to its width or height <length>, essentially returning an anchor’s […]
.target { width: anchor-size(width); }
Continue Reading

attr()

The CSS attr() function enables you to pass the value of an HTML attribute over to CSS.
.element { color: attr(data-color type()); }
Continue Reading

calc-size()

The CSS calc-size() function enables us to perform calculations using intrinsic size values such as auto, min-content, max-content, and fit-content. […]
.element { width: calc-size(auto, size); }
Continue Reading

circle()

The CSS circle() function allows you to create, you guessed it, circles when used with the shape-outside, clip-path, and offset-path […]
.shape { clip-path: circle(100px); }
Continue Reading

clamp()

The CSS clamp() function locks a value between a minimum and maximum, using a preferred value within that range.
.element { width: clamp(200px, 50%, 800px); }
Continue Reading

color()

The CSS 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 Reading

counter()

The 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 Reading

counters()

The CSS 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 Reading

cubic-bezier()

The cubic-bezier() function lets you define custom timing curves for CSS animations and transitions. It gives you precise control over how elements […]
.element { transition: all 1s cubic-bezier(0.1, 0.9, 0.9, 0.1); }
Continue Reading

ellipse()

The CSS ellipse() function allows you to create ellipses when used with the shape-outside, clip-path, and offset-path properties.
.shape { clip-path: ellipse(60px 40px); }
Continue Reading

env()

The CSS 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 Reading

hsl()

The CSS hsl() function represents color in the sRGB color space and displays it according to its hue, saturation, and lightness. We […]
.element { color: hsl(90deg, 50%, 50%); }
Continue Reading

lab()

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.
.element { color: lab(50% 50% 50% / 0.5); }
Continue Reading

lch()

The 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 Reading

light-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 […]
html { color: light-dark(#000, #fff); }
Continue Reading

matrix()

The matrix() function combines all the 2D transform functions into a single CSS declaration. It covers the translate(), skew(), and scale() functions
.element { transform: matrix(1, 0, 0, 1, 0, 0); }
Continue Reading

max()

The CSS 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 Reading

min()

The CSS 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 Reading

mod()

The CSS mod() function returns the remaining “modulo” after the first argument is modulus-divided by the second argument. It’s the […]
.element { width: mod(10px, 4px); }
Continue Reading

oklab()

The oklab() function represents colors in the OKLab color space. OKLab is an “OK” and even better version of the lab color […]
.element { color: oklab(25.77% 25.77% 54.88%; }
Continue Reading

oklch()

The CSS 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 Reading

path()

The CSS path() function enables us to create complex paths, polygons and other shapes using SVG path command syntax.
.element { clip-path: path("…"); }
Continue Reading

random()

The random() function in CSS is an experimental feature (i.e., not supported in any browser) that returns a random numeric […]
.element { width: random(5rem, 25rem, by 5rem); }
Continue Reading

rem()

The CSS 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 Reading

rgb()

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.
.element { color: rgb(0 0 0 / 0.5); }
Continue Reading

round()

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 […]
.element { width: round(10.4px, 1px); }
Continue Reading

scroll()

The CSS 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 Reading

shape()

The CSS 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 Reading

sibling-count()

The sibling-count() CSS function returns the total number of sibling elements an element has, including itself. Think of it sort […]
ul li { width: calc(100% / sibling-count()); }
Continue Reading

sibling-index()

The 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 Reading

symbols()

Defines an only-use counter style without the need to do a whole @counter-style, at the cost of missing some features.
ul { list-style: symbols(cyclic "🥬"); }
Continue Reading

view()

The view() function tracks the progress of an element within a scrollable viewport (the nearest scroll container), when used in the animation-timeline […]
.element { animation-timeline: view(); }
Continue Reading