# CSS Functions

# **CSS Functions**

CSS functions are used as a value for various CSS properties.

Some of the function are

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686742444589/0546b846-91f5-4efe-80e2-7cbecdef994e.png align="center")

Example of var() function:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686742563670/9f5ff074-dcfe-4bb7-8704-854b12e8d6a5.png align="center")

Example of var():

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686742608901/6badafd6-debf-4687-9749-2eb50a6e8dfe.png align="center")

Example of rgb() 👇🏻

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686742699761/0bc6332d-3433-437c-ab6d-b03d14e62251.png align="center")

Example of hsl() 👇🏻

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686742770270/01c25275-ff94-456a-af40-76c082b6f556.png align="center")

Example of Linear-gradient()👇🏻

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686742876534/49b40f31-84d3-444f-8d70-1ad45f249835.png align="center")

Example of radial-gradient()👇🏻

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686742952351/f8fefdba-cda4-40a5-95cf-c7f3d1dd3c73.png align="center")

---

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666336375150/5HqI8zNVh.png align="left")

Download our HTML & CSS Visual Treat! ebook Here: [Click here](https://codemarch.gumroad.com/l/hxazr)