v139 · css

CSS Custom Functions

Custom Functions are similar to custom properties, but instead of returning a single, fixed value, they return values based on other custom properties, parameters, and conditionals.

concepts

  1. Function Cookbook

    Author-defined CSS functions. Declare with @function, call like any built-in. Parameters get defaults, results flow into any property that accepts the return type.

  2. Typed Parameters

    Parameters declare <color>, <length>, <percentage>. Invalid input is rejected per spec and the function falls back. Try passing the wrong type and watch it gracefully fail.

  3. Functional Design Tokens

    Retire the --space-1 / --space-2 / --space-3 ladder for a single @function --space(--step). Sliders dial padding, type tier, and radius scale across four cards at once. Swap the scale in one place.

  4. Easing Library

    A single @function --ease(--name) that maps named easing tokens to cubic-bezier() values. Every component calls --ease(spring) or --ease(back-out) — the curve is centralised and swappable.

  5. Color Tools

    Lighten, darken, saturate, alpha, and mix as CSS functions: --lighten(var(--brand), 15%) wraps oklch(from …) relative color syntax. Static palettes plus a live color picker that recalculates instantly in CSS — no preprocessor, no JS.

  6. Responsive Grid System

    A full grid toolkit from @function: column-width calculation (--col-width()), fluid type scaling (--fluid-size(min, max, at-min, at-max)), and spacing scale generation. Live grid editor adjusts column count and gap density; column-width bar chart shows span calculations.

why it shipped

Custom Functions are similar to custom properties, but instead of returning a single, fixed value, they return values based on other custom properties, parameters, and conditionals.

references