staticdata.dev
Menu
Datasets About Contact

CSS Functions

124 CSS functions curated from MDN Web Docs and the CSS specifications (as of October 2026), including math functions (calc, clamp, min, max), color functions (rgb, hsl, lab, oklch, color-mix), transform functions (translate, rotate, scale, matrix), gradient functions (linear-gradient, radial-gradient, conic-gradient), filter functions (blur, brightness, contrast, drop-shadow), shape functions (circle, ellipse, polygon, path), and utility functions (var, env, attr, url).

v1.0.0 MIT 124 records Updated 2026-10-05 stable Source:  MDN Web Docs — CSS Functions

Quick fetch

Stable URL. CORS-enabled. No auth.

bash 
curl https://staticdata.dev/v1/css-functions.json

Or use as a typed import: import { cssFunctions } from "https://staticdata.dev/v1/css-functions.ts"

Formats

  • JSON 21.1 KB

    /v1/css-functions.json

    Open

    min: 18.2 KB · /v1/css-functions.min.json

  • CSV 13.6 KB

    /v1/css-functions.csv

    Open
  • TypeScript 21.3 KB

    /v1/css-functions.ts

    export const cssFunctions

    type CssFunction = (typeof cssFunctions)[number]

    Open

Schema

Each record in the dataset has the following shape.

Schema
Field Type Description Example
name string CSS function name including the trailing parentheses calc()
category string Functional category such as math, color, transform, gradient, or filter math
description string Short explanation of the function's purpose and behavior Performs arithmetic calculations mixing different CSS units.

Preview

First 10 records.

Data preview
namecategorydescription
abs()mathReturns the absolute value of a number, always yielding a non-negative result.
acos()mathReturns the arccosine (inverse cosine) of a number, in radians.
anchor()anchor-positioningReturns a length relative to an edge of an anchor element, for use in the inset properties of an anchor-positioned element.
anchor-size()anchor-positioningReturns a length equal to a dimension (width, height, block or inline size) of an anchor element, for sizing anchor-positioned elements.
annotation()fontSelects an alternate character annotation glyph from a font's OpenType feature set.
asin()mathReturns the arcsine (inverse sine) of a number, in radians.
atan()mathReturns the arctangent (inverse tangent) of a number, in radians.
atan2()mathReturns the arctangent of the ratio of two values, in radians, correctly handling the sign of both arguments.
attr()attributeRetrieves the value of an HTML attribute of the selected element and uses it in the style declaration.
blur()filterApplies a Gaussian blur effect to the element or image, softening edges and details.

Showing 10 of 124. View full data:  JSON · CSV

Fetch examples

Drop-in snippets in five languages.

curl 
curl -sSL https://staticdata.dev/v1/css-functions.json | jq '.[0]'
JavaScript 
import type { CssFunction } from "https://staticdata.dev/v1/css-functions.ts";

const res = await fetch("https://staticdata.dev/v1/css-functions.min.json");
if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);
const cssFunctions: CssFunction[] = await res.json();
console.log(cssFunctions[0]);
Python 
import urllib.request, json

with urllib.request.urlopen("https://staticdata.dev/v1/css-functions.min.json") as r:
    cssFunctions = json.load(r)

print(cssFunctions[0])
Go 
package main

import (
	"encoding/json"
	"fmt"
	"net/http"
)

func main() {
	resp, err := http.Get("https://staticdata.dev/v1/css-functions.min.json")
	if err != nil { panic(err) }
	defer resp.Body.Close()

	var data []map[string]any
	if err := json.NewDecoder(resp.Body).Decode(&data); err != nil {
		panic(err)
	}
	fmt.Println(data[0])
}
Rust 
use serde_json::Value;

fn main() -> Result<(), Box<dyn std::error::Error>> {
    let body = ureq::get("https://staticdata.dev/v1/css-functions.min.json").call()?.into_string()?;
    let data: Vec<Value> = serde_json::from_str(&body)?;
    println!("{:?}", data.first());
    Ok(())
}

Sources and methodology

This dataset enumerates 124 standard CSS functional notations documented by MDN Web Docs and the CSS specifications, as of October 2026, including newer additions such as anchor(), light-dark(), if(), sibling-index() and calc-size(). It is curated rather than exhaustive: some very new or narrowly scoped functions may be missing. CSS functions are used as values in CSS property declarations and follow the syntax function-name(arguments). Each record includes the function name (with trailing parentheses to match the CSS specification convention), a category grouping, and a concise description of the function’s purpose.

The dataset spans all major CSS function categories: mathematical functions (calc(), min(), max(), clamp(), round(), mod(), rem(), trigonometric and exponential functions), color functions (rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(), color-mix()), transform functions (translate(), rotate(), scale(), skew(), matrix(), perspective(), and their 3D/axis-specific variants), gradient functions, filter functions, shape functions for clip-path and shape-outside, counter functions, CSS variable and environment functions, font variant functions, easing functions for animations, and image/resource functions.

Non-standard, vendor-prefixed, or deprecated functions are excluded. This dataset is useful for building CSS linters, syntax highlighters, auto-complete tools, documentation sites, or any application that needs programmatic access to the set of valid CSS function identifiers and their semantics.

Versioning

URLs under /v1/ are stable: field names and types will not change in a way that breaks consumers. Values can be corrected or records added when the upstream source changes; schema-incompatible updates ship under a new version path. See the css-functions changelog for this dataset's history.

Related datasets

More Code datasets