Limited supportUse with care and confirm browser support before shipping it to all users.
Syntax and cascade Limited support

@function

The @function CSS at-rule defines a custom function that takes CSS values or custom properties as arguments, and returns a CSS value. It can be based on conditional logic such as by using the @media at-rule. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.

Syntax and cascadeFunctions

Overview

The @function CSS at-rule defines a custom function that takes CSS values or custom properties as arguments, and returns a CSS value. It can be based on conditional logic such as by using the @media at-rule. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
@function
Experimental
139
139
139
DOM API
CSSFunctionDeclarations
Experimental

The CSSFunctionDeclarations interface of the CSS Object Model represents a consecutive run of CSS declarations included within a @function body.
139
139
139
style
Experimental

The read-only style property of the CSSFunctionDeclarations interface contains a CSSFunctionDescriptors object representing the descriptors available in the @function rule's body.
139
139
139
CSSFunctionDescriptors
Experimental

The CSSFunctionDescriptors interface of the CSS Object Model represents the descriptors contained within a set of CSS declarations represented by a CSSFunctionDeclarations object.
139
139
139
result
Experimental

The result property of the CSSFunctionDescriptors interface returns a string representing a result descriptor, if one exists in the associated set of declarations.
139
139
139
CSSFunctionRule
Experimental

The CSSFunctionRule interface of the CSS Object Model represents CSS @function (custom function) at-rules.
139
139
139
getParameters
Experimental

The getParameters() method of the CSSFunctionRule interface returns an array of objects representing the custom function's parameters.
139
139
139
name
Experimental

The name property of the CSSFunctionRule interface returns a string representing the custom function's name.
139
139
139
returnType
Experimental

The returnType property of the CSSFunctionRule interface returns a string representing the custom function's return type.
139
139
139
CSS at-rule
result
Experimental

`result` descriptor
139
139
139
Other
css.types.dashed-function
Experimental

The CSS data type represents the syntax used to call CSS custom functions, which are defined using the @function at-rule.
139
139
139
css.types.type
Experimental

The type() CSS function allows you to specify a particular data type, and is used by the following CSS features:
139
139
139
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
@function --spacing(--level) {
  result: calc(var(--level) * 8px);
}
.card {
  padding: --spacing(2);
}

Live demo

--spacing(2)

CSS --spacing(2) demo.

PreviewFullscreen

--spacing(4)

CSS --spacing(4) demo.

PreviewFullscreen

nestedusage

CSS nestedusage demo.

PreviewFullscreen

Use cases

  • Use @function

    Use @function when the default CSS behavior is not expressive enough for the component or layout you are building.

  • Handle edge cases

    Apply @function to solve a specific styling constraint without introducing broader layout or behavior changes.

Cautions

  • Test @function in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
  • Plan a fallback or acceptable degradation path when support is still limited.

Accessibility

  • Confirm that using @function does not make content harder to perceive, understand, or operate in assistive contexts.

Related links

Powered by web-features