# 5 Useful CSS functions using the new @function rule

DevFeed: [5 Useful CSS functions using the new @function rule](<https://devfeed.tech/articles/5-useful-css-functions-using-the-new-function-rule-28767.md>)

Original publisher: [Read original article](<https://una.im/5-css-functions/>)

Published: 2025-08-13T00:00:00Z

Content type: tutorial

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [CSS functions](<https://devfeed.tech/topics/css-functions.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Design system](<https://devfeed.tech/topics/design-system.md>), [Font](<https://devfeed.tech/topics/font.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [css-functions](<https://devfeed.tech/tags/css-functions.md>), [design](<https://devfeed.tech/tags/design.md>), [examples](<https://devfeed.tech/tags/examples.md>), [fonts](<https://devfeed.tech/tags/fonts.md>), [properties](<https://devfeed.tech/tags/properties.md>), [syntax](<https://devfeed.tech/tags/syntax.md>), [tricks](<https://devfeed.tech/tags/tricks.md>), [typography](<https://devfeed.tech/tags/typography.md>)

## AI overview

A tutorial demonstrating five practical uses for CSS custom functions introduced with the new @function rule. The examples cover negating values, creating opacity variants, fluid typography, and conditionally rounded borders, with emphasis on clearer and more organized CSS.

## Source excerpt

CSS custom functions are a gamechanger. Here are 5 really useful examples.