IconVault logoIconVault
Sign in

CSS @function Playground - Interactive CSS Lab | IconVault

Define native CSS @function helpers with typed parameters. Live spacing, fluid-type and tint demos with copyable code. Free, in your browser.

All tools

CSS @function Playground

Native CSS functions with typed parameters

5 of 5 free uses left

Multiply a base unit: padding, gaps, margins

--n3 (= 24px)

How @function works

Parameters are typed (<number>, <length>, <color>...), the body computes result, and you call it like --spacing(3). Wrong types fail at parse time, not silently.

Live result

--spacing(3) = 24px padding

Computed in JavaScript to mirror the function result exactly, since this browser cannot run @function.

Copy the CSS

@function --spacing(--n: <number>) returns <length> {
  result: calc(var(--n) * 8px);
}

.card {
  padding: --spacing(3);   /* 24px */
  gap: --spacing(2);        /* 16px */
}

5 of 5 free copies left.

About this tool

IconVault's CSS @function Playground teaches native CSS @function with three working helpers you can tune live. Adjust the --spacing() multiplier and watch padding grow in 8px steps, drag the --fluid-type() range and resize your window to see type scale with the viewport, or mix a --tint() color toward white with color-mix. Each tab shows the exact @function definition and call site, ready to copy. It is free and runs fully in your browser.

Custom functions finally let stylesheets compute their own values: declare typed parameters like --n: <number>, compute result from them, and call the function anywhere a value is expected. Because parameters are type-checked, mistakes fail loudly at parse time instead of silently breaking your layout. The playground feature-detects @function support, runs natively on Chrome 137+ and Edge 137+, and mirrors every result in JavaScript on older browsers so you can learn the syntax today and ship it when your audience is ready.

Frequently asked questions

Popular searches

css @functioncss functionscss custom functions@function cssnative css functionscss @function examplecss @function tutoriallearn css @functioncss @function playgroundinteractive @function democss @function generatorcss function parameterstyped css parameterscss function returnscss spacing functioncss fluid type functioncss tint functioncolor-mix csscss @function browser supportcss @function chrome@function firefoxcss @function 2026how to use css @function@function syntax csscss @function mdncss @function vs @mixincss @function vs sasssass function vs csscss custom function copy pastecss @function not workingcss @function fallbackcss functions design systemcss spacing scalefluid typography cssclamp() csscss clamp fluid typecss color functionscss result keywordcss <length> typecss <number> typecss <color> typemodern css featurescss 2026 featurescss function cheat sheetcss @function referencefrontend css toolscss lablearn modern csscss value computationcss dynamic values

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →