@function - At-rule CSS

Description of the @function at-rule.

⚠

As of now (2025), the directive @function is only supported by the following major browsers: Edge  , Chrome  , and Samsung Internet  .

The directive @function allows you to define custom functions.
Let's take the following example. We want to shade the text in the following way: a first colored shadow, 5 pixels away, and a second shadow, in black and 10 pixels away. This can be achieved with the following CSS:

If you want to change just the color of the first shadow on another text, you still need to repeat the entire syntax above, which can be quite tedious. Alternatively, you can define a function that will take the color of the first shadow as a parameter. This function can be written as follows:

Several points should be noted:

• The name of the function is an identifier preceded by a double dash.
• The same applies to the parameter (the color of the first border).
• The value of the parameter can be retrieved using the function var() like any other variable.
• The result of the function is introduced by the word result.

It is now easier to shade our texts:

⚠ If it doesn't work the way you want, try opening this page with Chrome   or Edge  .

Differences with custom properties.

Custom properties are also called variables. The only difference with custom functions is that the latter can have parameters. This makes it easier to write reusable code.

Also related to custom functions and properties.

@property :

Defines a custom property, with its initial value, its syntax, and an indication of inheritance.

@function :

The @function at-rule defines a custom function, along with its parameters.

var() :

Retrieves the value of a custom property (variable).

Syntaxes of the @function at-rule.

• @function --name(--prm1, --prm2 ...) { result: ... ; }

  This is the structure of a custom function. --name is the name of this function. --prm1 and --prm2 are the parameters. The double dashes at the beginning of these identifiers are essential.

  The result is described after the result keyword. The first result encountered does not end the function; in other words, it is always the last result encountered that is returned. The example below shows a poorly written function, which always returns the same thing, whether the browser supports the clamp() function or not. The crossed-out line should have been written at the beginning of the function.

  @function --size(--min, --val, --max) { @support(width:clamp(var(--min), var(--val), var(--max))) { result: max(var(--min), min(val(--val), val(--max))); } result: clamp(var(--min), var(--val), var(--max)); }

  The parameters are of course local to the function (it is not possible to access them from outside the function). But the function can use custom properties defined outside the function, with var() (these are also called variables).

• @function --name(--prm1:value1, --prm2:value2 ...) { result: ... ; }

  With this syntax, it is possible to define a default value for each of the parameters. This allows, when using the function, to specify nothing in the parentheses (although they are still mandatory).

• @function --name(--prm1 <type>, ...) returns <type> { result: ... ; }

  Here we define the type of the input parameters and the type of the return value (using the returns keyword). Indicating a type is incompatible with a default value. Here is how types can be expressed:

  <integer>: a simple type.
  type(<integer> | <number>): enumeration of possible types, using the type() function.
  <integer>+: a list of values of the same type.

  Simple types can include, among others:

  <color>, <integer>, <length, <number>, <percentage>, etc.

Examples of use of the @function at-rule.

⚠ Remember that these examples will not work on all browsers.

A function that gives a semi-transparent color.

The --opacity function below accepts a color as input and returns the same color with a transparency value. If this second parameter is not provided, the transparency is set to 50%.

Testing the support of a feature.

Here is a function that tests if the browser recognizes the clamp() function; If it does, this function is used to get the result. Otherwise, the custom function uses the equivalent formula.

Simplify the writings.

Functions can simply be used to simplify writing. For example, to define corner roundings, it is possible to write a function that accepts only the first rounding as a parameter, and calculates the others.

Font sizes that adapt.

It is often useful to adjust the font size to the screen dimensions: on a large screen (visible from a distance), you might want to increase the font size, while on a small screen, you would rather try to use a normal font.

Browsers compatibility with the @function at-rule.

The @function at-rule is still poorly recognized, particularly by major browsers Firefox  , Opera  , and Safari  .

1

@function
at-rule

Estimated overall support.

64%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Chrome

Edge

Safari

Opéra

Firefox

Chrome pour Androïd

Safari sur IOS

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Evolution of the @function at-rule.

• CSS Functions and Mixins Module - Level 1.

  Regarding @function. Introduction of custom CSS functions in this first level of the specification.
  

  May 15, 2025

  Working Draft.

  

  

  

See also, regarding custom functions.

Here is the content of the CSS module CSS Functions and Mixins Module.. It is mainly composed of the function @function.

At-rules: