CSS Function Reference Manual

CSS Functions

CSS functions can be used to calculate values, manipulate strings or colors, create complex gradients and shapes, and more.

CSS functions are usually used as values for various CSS properties.

Function Description
acos() Return the arccosine value of a number between -1 and 1.
asin() Return the arcsine value of a number between -1 and 1.
atan() Return the arctangent value of a number between -∞ and ∞.
atan2() Return the arctangent value of two values between -∞ and ∞.
attr() Return the attribute value of the selected element.
blur() Apply a blur effect to the element.
brightness() Adjust the brightness of the element (brighter or darker).
calc() Allow calculations to determine the CSS property value.
circle() Define a circle.
clamp() Set a value that will be adjusted between the minimum and maximum values based on the viewport size.
color() Allow specifying a color in a specific specified color space.
color-mix() Mix two color values in a given color space at a given ratio.
conic-gradient() Create a conical gradient.
contrast() Adjust the contrast of the element.
cos() Return the cosine value of the angle.
counter() Return the current value of the named counter.
counters() Return the current value of the named and nested counters.
cubic-bezier() Define a cubic Bezier curve.
drop-shadow() Apply a projection effect to the image.
ellipse() Define an ellipse.
exp() Return the x-th power of the specified number E (Ex)
fit-content() Allow the size of elements to be adjusted based on content.
grayscale() Convert an image to grayscale.
hsl() / hsla() Define a color using the hue-saturation-lightness model (HSL); optionally include the alpha component.
hue-rotate() Apply color rotation to elements.
hwb() Define a color using the hue-whiteness-blackness model (HWB); optionally include the alpha component.
hypot() Return the square root of the sum of the squares of its parameters.
inset() Define a rectangle that maintains a specified inner margin distance from each side of the reference frame.
invert() Invert the colors of an image.
lab() Specify a color in the CIE Lab color space.
lch() Specify a color in the LCH (lightness-chroma-hue) color space.
light-dark() Enable two color value settings, return the first value if the user has set a light theme;
Return the second value if the user has set a dark theme.
linear-gradient() Create a linear gradient.
log() Return the natural logarithm (base E) of a specified number, or the logarithm of a specified base.
matrix() Define a 2D transformation using a six-value matrix.
matrix3d() Define a 3D transformation using a 4x4 matrix.
max() Use the maximum value from a comma-separated list of values as the attribute value.
min() Use the minimum value from a comma-separated list of values as the attribute value.
minmax() Define a size range (used for CSS grid) that is greater than or equal to the minimum value and less than or equal to the maximum value.
mod() Return the remainder of a number divided by another number.
oklab() Specify a color in the OKLAB color space.
oklch() Specify a color in the OKLCH color space.
opacity() Apply opacity effects to elements.
perspective() Define the perspective view for 3D transformation elements.
polygon() Define a polygon.
pow() Return the value of a number (x) raised to the power of another number (y).
radial-gradient() Create a radial gradient.
ray() Define the offset path segment that the animation element should follow.
rem() Return the remainder of a number divided by another number.
repeat() Repeat a set of columns or rows in a grid.
repeating-conic-gradient() Repeating conic gradient.
repeating-linear-gradient() Repeating linear gradient.
repeating-radial-gradient() Repeating radial gradient.
rgb() / rgba() Defines color using the red-green-blue model (RGB); optionally includes the alpha component.
rotate() Defines the 2D rotation of an element.
rotate3d() Defines the 3D rotation of an element.
rotateX() Defines the 3D rotation of an element around the x-axis (horizontal).
rotateY() Defines the 3D rotation of an element around the y-axis (vertical).
rotateZ() Defines the 3D rotation of an element around the z-axis.
round() Rounds numbers to the nearest integer according to the specified rounding strategy.
saturate() Adjusts the saturation (color intensity) of an element.
scale() Defines the 2D scaling of an element.
scale3d() Defines the 3D scaling of an element.
scaleX() Horizontally scales elements (width).
scaleY() Vertically scales elements (height).
sepia() Converts an image to sepia tone.
sin() Returns the sine value of a number (angle).
skew() Skews elements along both the x-axis and y-axis.
skewX() Skews elements along the x-axis.
skewY() Skews elements along the y-axis.
sqrt() Returns the square root of a number.
steps() Creates a step timing function for animations.
tan() Returns the tangent value of a number.
translate() Allows elements to be repositioned along both the x-axis and y-axis.
translateX() Allows elements to be repositioned along the x-axis.
translateY() Allows elements to be repositioned along the y-axis.
url() Allows files to be included in the stylesheet.
var() Insert the value of a custom property.