CSS Function Reference
This complete CSS function list organizes functions by purpose, making it easier to find functions for calculations, colors, images, gradients, filters, transforms, shapes, sizing, generated content, positioning, and other CSS features.
Use the search box to find a function by name or description, or switch to the alphabetical view when you already know the function you are looking for. Each function links to its complete CSS reference page.
Search CSS Functions
Enter a function name or a word describing what the function does. The list will automatically display matching functions.
No CSS functions found.
Math
Math functions perform calculations, comparisons, rounding, trigonometry, and other numeric operations.
abs()Returns the absolute value of a number.acos()Returns the inverse cosine of a value.asin()Returns the inverse sine of a value.atan()Returns the inverse tangent of a value.atan2()Returns an angle calculated from two values.calc()Calculates a value using a mathematical expression.clamp()Clamps a value between a minimum and maximum.cos()Returns the cosine of an angle.exp()Returns Euler's number raised to a specified power.hypot()Returns the square root of the sum of squared arguments.log()Returns the logarithm of a value.max()Returns the largest value from a list of values.min()Returns the smallest value from a list of values.mod()Returns the modulus of one value divided by another.pow()Raises a number to a specified power.random()Produces a random value within specified constraints.rem()Returns the remainder from dividing one value by another.round()Rounds a value according to a specified rounding strategy.sign()Returns a value representing the sign of a number.sin()Returns the sine of an angle.sqrt()Returns the square root of a number.tan()Returns the tangent of an angle.Color
Color functions create, modify, combine, and select CSS color values.
alpha()Works with the alpha component of a color.color()Defines a color in a specified color space.color-mix()Mixes two colors in a specified color space.contrast-color()Returns a contrasting color for a supplied color.device-cmyk()Defines a color using device-dependent CMYK components.dynamic-range-limit-mix()Combines dynamic-range limiting values.hsl()Defines a color using hue, saturation, and lightness.hwb()Defines a color using hue, whiteness, and blackness.lab()Defines a color in the CIE Lab color space.lch()Defines a color using lightness, chroma, and hue.light-dark()Selects between colors for light and dark color schemes.oklab()Defines a color in the Oklab color space.oklch()Defines an Oklab color using lightness, chroma, and hue.palette-mix()Creates a font palette by mixing other palettes.rgb()Defines a color using red, green, and blue components.Gradients & Images
Gradient and image functions create CSS images, gradients, image sets, and image combinations.
conic-gradient()Creates a gradient that rotates around a center point.cross-fade()Blends two or more images.element()Uses the rendered appearance of an element as an image.image()Defines an image with additional fallback and direction options.image-set()Provides multiple image sources for different resolutions or formats.linear-gradient()Creates a gradient along a straight line.paint()Generates an image using a registered CSS Paint worklet.radial-gradient()Creates a gradient radiating from an origin.repeating-conic-gradient()Creates a repeating conic gradient.repeating-linear-gradient()Creates a repeating linear gradient.repeating-radial-gradient()Creates a repeating radial gradient.url()References an external resource by URL.Filters
Filter functions apply graphical effects to rendered elements and images.
blur()Applies a Gaussian blur.brightness()Adjusts image or element brightness.contrast()Adjusts contrast.drop-shadow()Applies a drop shadow following an element's rendered shape.grayscale()Converts colors toward grayscale.hue-rotate()Rotates colors around the hue circle.invert()Inverts colors.opacity()Adjusts transparency.saturate()Adjusts color saturation.sepia()Applies a sepia-tone effect.Transforms
Transform functions move, rotate, scale, skew, and apply perspective to elements.
matrix()Defines a two-dimensional transformation matrix.matrix3d()Defines a three-dimensional transformation matrix.perspective()Applies perspective to a transformed element.rotate()Rotates an element.rotate3d()Rotates an element around a three-dimensional axis.rotateX()Rotates an element around the x-axis.rotateY()Rotates an element around the y-axis.rotateZ()Rotates an element around the z-axis.scale()Scales an element.scale3d()Scales an element in three dimensions.scaleX()Scales an element along the x-axis.scaleY()Scales an element along the y-axis.scaleZ()Scales an element along the z-axis.skew()Skews an element along one or both axes.skewX()Skews an element along the x-axis.skewY()Skews an element along the y-axis.translate()Moves an element horizontally or vertically.translate3d()Moves an element in three-dimensional space.translateX()Moves an element along the x-axis.translateY()Moves an element along the y-axis.translateZ()Moves an element along the z-axis.Shapes
Shape functions define geometric shapes used by clipping, masking, motion paths, and related CSS features.
circle()Defines a circular basic shape.ellipse()Defines an elliptical basic shape.inset()Defines an inset rectangle.path()Defines a shape using SVG path data.polygon()Defines a polygon using coordinate pairs.ray()Defines a ray used for an offset motion path.rect()Defines a rectangular shape.shape()Defines a shape using CSS shape commands.superellipse()Defines a superellipse shape.xywh()Defines a rectangle using x, y, width, and height values.Sizing & Layout
Sizing and layout functions calculate sizes and define repeated or flexible layout tracks.
calc-size()Calculates a size using an intrinsic size and a calculation.fit-content()Clamps a size according to available space and a supplied limit.minmax()Defines a size range between a minimum and maximum.repeat()Repeats a track pattern or supported value sequence.sibling-count()Returns the number of sibling elements.sibling-index()Returns an element's position among its siblings.Generated Content
Generated-content functions create counter text, symbols, and other values used by generated content.
attr()Retrieves the value of an HTML attribute.counter()Returns the value of a CSS counter.counters()Returns values from nested CSS counters.symbols()Defines an anonymous counter style from a sequence of symbols.Animation & Timing
Animation and timing functions define easing curves and progress-based values.
cubic-bezier()Defines a cubic Bezier easing curve.linear()Defines a piecewise linear easing function.progress()Calculates progress between a start and end value.steps()Defines an easing function divided into discrete steps.Positioning
Positioning functions obtain dimensions and positions from anchors and related layout features.
anchor()Uses the position of an anchor element when positioning another element.anchor-size()Uses a dimension of an anchor element as a size value.Values & Environment
These functions retrieve variables and environment values or select values according to conditions and types.
Scroll & View
Scroll and view functions reference scroll-based and view-based timelines.
Browser-specific
Browser-specific functions provide functionality implemented with a vendor prefix.
-moz-image-rect()Selects a rectangular portion of an image in Mozilla-based implementations.CSS Functions A-Z
All CSS functions in this reference are shown alphabetically below.