It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

Brief Guide on CSS Functions: Calc, Attr and RGBA

Reading time 2 min
Published Aug 8, 2017
Updated Oct 3, 2019

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()