@function
ExperimentalAn experimental at-rule that lets you define your own custom CSS functions with logic and return values, very similar to functions in programming languages like JavaScript.
Quick example
@function --get-vibrant-bg(--color-base) {
/* Experimental: logic to generate a color variant */
result: color-mix(in srgb, var(--color-base), #fff 20%);
}
.card {
background: --get-vibrant-bg(#3b82f6);
}@function Browser Support
Limited availability 67% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
139+
139+