CSS @function playground

Build custom CSS functions, add or remove parameters with types and default values, combine multiple result descriptors with @media, and copy a complete example ready to test.

Presets

Choose a complete example as a starting point and customize any part of the function.

Function signatureA CSS function name is a <dashed-ident> and starts with --. Parameter and return types are optional; omitting them is equivalent to type(*).

Name

The -- prefix is added automatically when missing.

Return type

Parameters

Leave the function parameterless or add up to six parameters.

Parameter 1--narrow <length>

Parameter name

Accepted type

Default value

Leave empty to make this parameter required.

Test value

Parameter 2--wide <length>: 2.65rem

Parameter name

Accepted type

Default value

Leave empty to make this parameter required.

Test value

Omit from the call and use the default value

Body and logicresult defines the returned value. Results inside nested rules participate in the cascade, so place the general result before the conditional one.

result

Add a conditional @media result

@media

Enter only the condition, for example (width < 500px).

result inside @media

Call--responsive-size(1.35rem)

HTML

<article class="specimen">
  <p class="specimen-eyebrow">CSS custom function</p>
  <h1>One formula, many results</h1>
  <p>The function result is applied directly to this example component.</p>
</article>

CSS

@function --responsive-size(--narrow <length>, --wide <length>: 2.65rem) returns <length> {
  result: var(--wide);
  @media (width < 500px) {
    result: var(--narrow);
  }
}

.specimen {
  padding: clamp(1.25rem, 6vw, 2.75rem);
  display: grid;
  gap: 0.75rem;
  background: #171a28e8;
  color: #f5f7ff;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: --responsive-size(1.35rem);
}

.specimen-eyebrow {
  margin: 0;
  color: #ff9a6f;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.specimen h1 {
  margin: 0;
  font-size: 1em;
  font-weight: 800;
  line-height: 1.05;
  text-wrap: balance;
}

.specimen > p:last-child {
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
}