CSS Functions

CSS functions are used to set a value for many CSS properties. Below you'll find many functions available to use with CSS. There are a variety of functions that can be used for image manipulation, such as: sepia(), opacity() and blur() just to name a few. Also CSS functions are very popular to use with CSS transforms, such as scale(), rotate() and skew().
Below you will find a complete list of current CSS functions.

attr()
The attr() CSS function returns the value of a property. That means that you can define content in your html markup using any custom property and then fetch the value using attr(). It only works on the content property at the moment, but support for other properties are currently in the experimental stage.
blur()
The blur() CSS function sets the Gaussian blur of images, background images, or text. Blur cannot be directly applied to the element, only to its descendants.
brightness()
The brightness() CSS function applies a linear multiplier to an image, making it appear more or less bright. A value of 0% will create an image that is completely black. A value of 100% leaves the image unchanged.
calc()
The calc() CSS function is used to indicate the calculated value of properties that use size, angle, time or number as values. This allows you to set values ​​based on addition (+), subtraction (-), multiplication (*), and division (/) of different units of measurement, for example, you can set 100% - 20px. If the value cannot be calculated, it is ignored.
circle()
The circle() CSS function is an inbuilt function in CSS which is used to create floating text around the circular shape picture or anything else. The circle() function is part of the CSS Shapes module.
contrast()
The contrast() CSS function lowers or increases the contrast of images or background images.
drop-shadow()
The drop-shadow() CSS function adds a shadow to images. In contrast to the box-shadow property, transparent areas in the image are taken into account and the shadow is cast taking into account them.
ellipse()
The ellipse() CSS function is an inbuilt function in CSS which is used to create floating text around the elliptical shape picture or anything else. The ellipse() function is part of the CSS Shapes module.
grayscale()
The grayscale() CSS function turns an image into a black and white / grayscale image.
hsl()
The hsl() CSS function is used to set a color value in CSS. The hsl() function takes three values, they are: hue, saturation, and lightness.
hsla()
The hsla() CSS function is used to set a color value in CSS. The hsla() function takes four values, they are: hue, saturation, lightness and alpha transparency.
hue-rotate()
The hue-rotate() CSS function changes the color of the image by rotating the hue on the color wheel.
inset()
The inset() CSS function is a CSS basic shape value that is part of the CSS Shapes module. The inset() functions defines an inset rectangle. It takes one to four offset values, which specify the offsets from the edges of the references box inward.
invert()
The invert() function inverts the colors in the image. In its action, it is similar to turning a photograph into a negative.
linear-gradient()
The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>.
matrix()
The matrix() CSS function can be used with CSS transforms to style elements in a two-dimensional space.
matrix3d()
The matrix3d() function can be used with CSS transforms to style elements in a three-dimensional space.
opacity()
The opacity() CSS function sets the degree of transparency of an image. In its effect, it is similar to the opacity property, but some filter browsers use hardware acceleration to increase their performance.
perspective()
The perspective() CSS function determines the distance from the screen plane to the point of convergence of the lines, thereby determines how pronounced the effect of perspective. The default convergence point is located in the center of the element and can be changed using the perspective-origin property.
polygon()
The polygon() CSS function is a basic shape value that is part of the CSS Shapes module.
radial-gradient()
The radial-gradient() CSS function adds a radial gradient to the background of an element. Radial in principle are similar to linear gradients, but one color does not change to another along a straight line, but like circles on water around a point.
repeating-linear-gradient()
The repeating-linear-gradient() CSS function creates an infinitely repeating linear gradient, thereby forming a background pattern. In its action, it is similar to the linear-gradient() function and has the same parameters. In this case, the colors successively replace each other, after the last color in the list of gradient colors immediately goes first.
repeating-radial-gradient()
The repeating-radial-gradient() CSS function is similar to a radial gradient, which is done by the radial-gradient() function, and has a similar syntax with it. But the colors of the gradient endlessly repeat in all directions, forming a pattern that fills the background of the element.
rgb()
The rgb() function can be used to provide a color value when using CSS. It allows you to specify an RGB color value by specifying the red, green, and blue channels directly.
rgba()
The rgba() CSS function can be used to provide a color value with alpha transparency when using CSS. It allows you to specify an RGB color value, as well as an alpha value to determine the color's transparency.
rotate()
The rotate() CSS function rotates an element in two-dimensional space around a rotation point by a given angle. The default pivot point is located in the center of the element and can be changed using the transform-origin property.
rotate3d()
The rotate3d() CSS function is used to rotate elements in a three-dimensional space.
rotateX()
The rotateX() CSS function rotates an element around the X axis by a given angle.
rotateY()
The rotateY() CSS function rotates an element around the Y axis by a given angle.
rotateZ()
The rotateZ() CSS function rotates an element around the Z axis by a given angle.
saturate()
The saturate() CSS function changes the color saturation in an image.
scale()
The scale() CSS function scales an element in two-dimensional space horizontally and vertically or simultaneously in two directions. Zooming can occur both up and down.
scale3d()
The scale3d() CSS function is used to scale elements in a three-dimensional space.
scaleX()
The scaleX() CSS function scales an element along the horizontal axis X.
scaleY()
The scaleY() CSS function scales an element along the horizontal axis Y.
scaleZ()
The scaleZ90 CSS function scales the element along the Z axis. The effect will be noticeable only when using perspective, rotating the element along the X or Y axes, as well as when the element is shifted along the Z axis.
sepia()
The sepia() CSS function turns the image into sepia - the so-called black-and-white image with a brown tint. Sepia gives photographs an old look.
skew()
The skew() CSS function tilts the element in two-dimensional space horizontally and vertically or simultaneously in two directions.
skewX()
The skewX() CSS function tilts an element horizontally at a given angle.
skewY()
The skewY() CSS function tilts the element vertically at a given angle.
translate()
The translate() CSS function shifts the element relative to the original location by a given value horizontally and vertically.
translate3d()
The translate3d() CSS function is used to move elements in a three-dimensional space.
translateX()
The translateX() CSS function shifts the element relative to its original location by a given horizontal value.
translateY()
The translateY() CSS function shifts the element relative to its original location by the specified vertical value.
translateZ()
The translateZ() CSS function shifts the element relative to its original location by a specified value along the Z axis. The effect will be noticeable only when using perspective, rotating the element along the X or Y axes.