<dashed-function>: CSS custom functions

A <dashed-function> value consists of the --function-name, followed by parentheses containing the function's arguments (for example, --my-function(30px, 3)).

You can include <dashed-function> values in place of regular CSS property values, in cases where you want to dynamically calculate the values based on function logic rather than providing static values.

In cases where you want to pass comma-containing values as arguments, you can do so by wrapping them in curly braces ({ }).

For more complete example walkthroughs, see our Using CSS custom functions guide

This example shows a basic function that returns a semi-transparent version of the color passed to it.

HTML

The markup features a <section> element with a <p> inside it containing some text content.

<section>
  <p>Some content</p>
</section>

CSS

In our styles we first define the CSS custom function. The function is called --transparent, and accepts two parameters — a color and a numeric alpha channel value. Inside the function body, we use relative color syntax to transform the passed color into an oklch() color with an alpha channel equal to the passed alpha value; this becomes the function's result:

@function --transparent(--color <color>, --alpha <number>) {
  result: oklch(from var(--color) l c h / var(--alpha));
}

Next, we define a --base-color custom property with a value of #faa6ff. We assign that property to be the value of the <section> element's border color, and then set its background-color value to equal a transparent version of the same color. This is done by setting the value to equal the <dashed-function> syntax, specifying the --transparent() function and passing it arguments of var(--base-color) and 0.8.

html {
  font-family: system-ui;
  height: 100%;
}

body {
  margin: 0;
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,
    lightgrey 20px 40px
  );
}

p {
  margin: 0;
}

section {
  width: 50%;
  padding: 30px;
  border-radius: 20px;

  --base-color: #faa6ff;
  border: 3px solid var(--base-color);
  background-color: --transparent(var(--base-color), 0.8);
}

Result

• CSS custom properties
• @function at-rule
• type() function
• Using CSS custom functions
• CSS custom functions and mixins module