Loading lesson path
Concept visual
Start at both ends
CSS functions can be used to calculate values, manipulate strings or colors, create complex gradients and shapes, and more. CSS functions are typically used as values for various CSS properties.
Formula
Returns the inverse cosine of a number between - 1 and 1 asin()
Returns the inverse sine of a number between - 1 and 1 atan()Returns the inverse tangent of a number between -∞ and ∞ atan2()
Formula
Returns the inverse tangent of two values between - infinity and infinity attr()Returns the value of an attribute of the selected element blur() Applies a blur effect to an element brightness() Adjusts the brightness of an element (brighter or darker) calc() Allows you to perform calculations to determine CSS property values circle()
Sets a value that will adjust responsively between a minimum value and a maximum value depending on the size of the viewport color()
Formula
Allows a color to be specified in a particular, specified color space color - mix()
Mixes two color values in a given color space, by a given amount conic - gradient()Returns the current value of the named counter counters()
Formula
Returns the current values of the named and nested counters cubic - bezier()Applies a drop shadow effect to an image ellipse()
Returns E raised to the power of the specified number x (E x )
Formula
fit - content()Allows you to size an element based on its content grayscale()
Formula
Converts an image to grayscale hsl() / hsla()Defines a color using the Hue-Saturation-Lightness model (HSL); with an optional alpha component hue-rotate()
Applies a color rotation to an element hwb()
Defines a color using the Hue-Whiteness-Blackness model (HWB); with an optional alpha component hypot()
Returns the square root of the sum of squares of its parameters inset()
Defines a rectangle at the specified inset distances from each side of the reference box invert()Formula
Specifies a color in the CIE L*a*b color space lch()
Specifies a color in the LCH (Lightness - Chroma - Hue) color space light - dark()Enables two color-value settings, and returns the first value if the user has set a light color theme, and the second value if the user has set a dark color theme linear-gradient()
Returns the natural logarithm (base E) of a specified number, or the logarithm of the number to the specified base matrix() Defines a 2D transformation, using a matrix of six values matrix3d() Defines a 3D transformation, using a 4x4 matrix of 16 values max()
Formula
Uses the largest value, from a comma - separated list of values, as the property value min()
Uses the smallest value, from a comma - separated list of values, as the property value minmax()Defines a size range greater than or equal to a min value and less than or equal to a max value (used with CSS grids) mod() Returns the remainder left over when a number is divided by another number oklab() Specifies a color in the OKLAB color space oklch() Specifies a color in the OKLCH color space opacity() Applies an opacity effect to an element perspective() Defines a perspective view for a 3D transformed element polygon()
Returns the value of a number (x) raised to the power of another number (y)
Formula
radial - gradient()Formula
Defines the offset - path line segment that an animated element should follow rem()Returns the remainder left over when a number is divided by another number repeat()
Formula
Repeats a set of columns or rows in a grid repeating - conic - gradient()Formula
Repeats a radial gradient rgb() / rgba()Defines colors using the Red-Green-Blue model (RGB); with an optional alpha component rotate()
Defines a 2D rotation of an element rotate3d()
Defines a 3D rotation of an element rotateX()Formula
Defines a 3D rotation of an element around the x - axis (horizontal)rotateY()
Formula
Defines a 3D rotation of an element around the y - axis (vertical)rotateZ()
Formula
Defines a 3D rotation of an element around the z - axis round()
Rounds a number according to the specified rounding - strategy saturate()Adjusts the saturation (color intensity) of an element scale() Defines a 2D scaling of an element scale3d() Defines a 3D scaling of an element scaleX() Scales an element horizontally (the width) scaleY() Scales an element vertically (the height) sepia()
Returns the sine of a number (angle) skew()
Formula
Skews an element along the x - and y - axis skewX()Returns the square root of a number steps() Creates a stepped timing function for animations tan()
Formula
Allows you to re - position an element along the x - and y - axis translateX()
Allows you to re - position an element along the x - axis translateY()
Allows you to re - position an element along the y - axis url()Allows you to include a file in the stylesheet var()