TL;DR — CSS functions are for setting property values. You can also perform mathematical calculations, add files, or set different image effects.
Use of CSS functions
CSS functions exist but are different than the functions in JavaScript or PHP.
For example, CSS calc() performs mathematical calculations when specifying the property values. With this function, it is easy to control the position of an element with a margin, set width, or height of elements.
Additionally, the CSS url() is for adding a file, and rgba() function is for setting colors.
However, not all functions apply to all CSS properties. CSS attr() is for getting values of attributes of specified elements. It works well with content property but the use with other properties is still experimental.
List of available functions
This is a reference table of popular CSS functions:
| Function | Description |
|---|---|
| drop-shadow() | Sets a shadow effect to the input image |
| invert() | Inverts the colors in images |
| translate() | Positions elements to either horizontal or vertical directions |
| var() | Add values of a custom property |
| url() | Adds a file |
| rgba() | Sets a color with a transparency value |
| blur() | Sets a blur effect |
| opacity | Sets the transparency of an element |
| scale() | Scales elements in two-dimensional space |
| attr() | Returns the attribute of the selected element value |
| calc() | Lets you make calculations to complete CSS property values |
| linear-gradient() | The image is created, representing colors a linear gradient |
| radial-gradient() | The image is created, representing a colors gradient radiating from the gradient center |
| repeating-linear-gradient() | The image is created, that consists of repeating gradients |
| repeating-radial-gradient() | Automatically repeats the stops of the color in both directions. Similar to radial_gradient() |