// staticdata.dev — cssFunctions // Generated file. Do not edit by hand. // SPDX-License-Identifier: MIT export const cssFunctions = [ { "name": "abs()", "category": "math", "description": "Returns the absolute value of a number, always yielding a non-negative result." }, { "name": "acos()", "category": "math", "description": "Returns the arccosine (inverse cosine) of a number, in radians." }, { "name": "anchor()", "category": "anchor-positioning", "description": "Returns a length relative to an edge of an anchor element, for use in the inset properties of an anchor-positioned element." }, { "name": "anchor-size()", "category": "anchor-positioning", "description": "Returns a length equal to a dimension (width, height, block or inline size) of an anchor element, for sizing anchor-positioned elements." }, { "name": "annotation()", "category": "font", "description": "Selects an alternate character annotation glyph from a font's OpenType feature set." }, { "name": "asin()", "category": "math", "description": "Returns the arcsine (inverse sine) of a number, in radians." }, { "name": "atan()", "category": "math", "description": "Returns the arctangent (inverse tangent) of a number, in radians." }, { "name": "atan2()", "category": "math", "description": "Returns the arctangent of the ratio of two values, in radians, correctly handling the sign of both arguments." }, { "name": "attr()", "category": "attribute", "description": "Retrieves the value of an HTML attribute of the selected element and uses it in the style declaration." }, { "name": "blur()", "category": "filter", "description": "Applies a Gaussian blur effect to the element or image, softening edges and details." }, { "name": "brightness()", "category": "filter", "description": "Adjusts the brightness of an element, where values below 1 darken and above 1 brighten." }, { "name": "calc()", "category": "math", "description": "Performs arithmetic calculations mixing different CSS units, such as percentages and pixels, in property values." }, { "name": "calc-size()", "category": "math", "description": "Performs calculations on intrinsic size keywords such as auto, fit-content, min-content and max-content, enabling transitions to and from them." }, { "name": "character-variant()", "category": "font", "description": "Enables specific character variants from a font's OpenType character variant feature set." }, { "name": "circle()", "category": "shape", "description": "Defines a circular clipping region for use with the clip-path or shape-outside properties." }, { "name": "clamp()", "category": "math", "description": "Clamps a value between a minimum and maximum, returning the middle value when it is within the range." }, { "name": "color()", "category": "color", "description": "Specifies a color in a given color space, such as display-p3 or rec2020, enabling wide-gamut color support." }, { "name": "color-mix()", "category": "color", "description": "Mixes two colors together in a specified color space by a given percentage, producing a blended result." }, { "name": "conic-gradient()", "category": "gradient", "description": "Creates a gradient that transitions around a central point, similar to the face of a pie chart." }, { "name": "contrast()", "category": "filter", "description": "Adjusts the contrast of an element; values below 1 reduce contrast and above 1 increase it." }, { "name": "contrast-color()", "category": "color", "description": "Returns either white or black, whichever has the greater contrast against the given color." }, { "name": "cos()", "category": "math", "description": "Returns the cosine of an angle, accepting values in turns, radians, or degrees." }, { "name": "counter()", "category": "counter", "description": "Returns a string representing the current value of the named CSS counter, used in generated content." }, { "name": "counters()", "category": "counter", "description": "Returns a concatenated string of nested counter values, separated by a specified string." }, { "name": "cross-fade()", "category": "image", "description": "Blends two or more images together at specified opacities, creating a composited result." }, { "name": "cubic-bezier()", "category": "easing", "description": "Defines a custom cubic Bézier easing curve using four control-point coordinates for use in transitions and animations." }, { "name": "device-cmyk()", "category": "color", "description": "Specifies a color using the CMYK color model as rendered by a specific output device." }, { "name": "drop-shadow()", "category": "filter", "description": "Applies a drop-shadow effect that follows the alpha channel of the element, unlike the box-shadow property." }, { "name": "element()", "category": "image", "description": "Defines an image from an arbitrary HTML element on the page, rendering that element as a live image." }, { "name": "ellipse()", "category": "shape", "description": "Defines an elliptical clipping region for use with the clip-path or shape-outside properties." }, { "name": "env()", "category": "variable", "description": "Inserts the value of a user-agent defined environment variable, such as safe area insets on notched displays." }, { "name": "exp()", "category": "math", "description": "Returns the value of e (Euler's number) raised to the power of the given number." }, { "name": "fit-content()", "category": "sizing", "description": "Clamps a track size to fit the content, using an optional maximum value in grid or sizing contexts." }, { "name": "format()", "category": "font", "description": "Hints at the font format of a font file referenced in the src descriptor within @font-face." }, { "name": "grayscale()", "category": "filter", "description": "Converts an element to grayscale; 0% is unchanged and 100% converts to full grayscale." }, { "name": "hsl()", "category": "color", "description": "Defines a color using the hue, saturation, and lightness model, with an optional alpha channel." }, { "name": "hsla()", "category": "color", "description": "Defines a color using hue, saturation, lightness, and an explicit alpha channel for transparency." }, { "name": "hue-rotate()", "category": "filter", "description": "Rotates the hue of all colors in an element by a specified angle on the color wheel." }, { "name": "hwb()", "category": "color", "description": "Defines a color using the hue, whiteness, and blackness model, optionally with an alpha channel." }, { "name": "hypot()", "category": "math", "description": "Returns the square root of the sum of the squares of its arguments (Euclidean distance/hypotenuse)." }, { "name": "if()", "category": "conditional", "description": "Returns one of several values depending on conditions (style(), media() or supports() queries) evaluated inline in a property value." }, { "name": "image()", "category": "image", "description": "Defines an image with a fallback and optional directionality, similar to url() but with extra capabilities." }, { "name": "image-set()", "category": "image", "description": "Selects the most appropriate image from a set of options based on screen resolution and format support." }, { "name": "inset()", "category": "shape", "description": "Defines a rectangular inset clipping region, specified by distances from each side of the reference box." }, { "name": "invert()", "category": "filter", "description": "Inverts the color values of an element; 100% produces a fully inverted image." }, { "name": "lab()", "category": "color", "description": "Defines a color in the CIE Lab color space, which represents perceptually uniform lightness and color." }, { "name": "layer()", "category": "cascade", "description": "Assigns imported stylesheets to a named or anonymous cascade layer in the @import rule." }, { "name": "lch()", "category": "color", "description": "Defines a color using the CIE LCH color space with lightness, chroma, and hue components." }, { "name": "leader()", "category": "content", "description": "Creates a leader string (e.g., dots) used to fill space between content in generated-content contexts." }, { "name": "light-dark()", "category": "color", "description": "Returns the first color when the used color scheme is light and the second when it is dark." }, { "name": "linear()", "category": "easing", "description": "Defines a piecewise linear easing function with multiple stops for use in transitions and animations." }, { "name": "linear-gradient()", "category": "gradient", "description": "Creates a smooth color gradient along a straight line between two or more color stops." }, { "name": "local()", "category": "font", "description": "References a locally installed font by name within the src descriptor of a @font-face rule." }, { "name": "log()", "category": "math", "description": "Returns the logarithm of a number to the specified base; defaults to the natural logarithm (base e)." }, { "name": "matrix()", "category": "transform", "description": "Applies a 2D affine transformation using a 3x3 matrix defined by six values." }, { "name": "matrix3d()", "category": "transform", "description": "Applies a 3D transformation using a 4x4 homogeneous matrix defined by sixteen values." }, { "name": "max()", "category": "math", "description": "Returns the largest value from a comma-separated list of expressions." }, { "name": "min()", "category": "math", "description": "Returns the smallest value from a comma-separated list of expressions." }, { "name": "minmax()", "category": "sizing", "description": "Defines a size range for a grid track with a minimum and maximum value, used in CSS Grid layouts." }, { "name": "mod()", "category": "math", "description": "Returns the modulus (remainder) of a division, with the result having the same sign as the divisor." }, { "name": "oklab()", "category": "color", "description": "Defines a color in the Oklab perceptually uniform color space with lightness and two chroma axes." }, { "name": "oklch()", "category": "color", "description": "Defines a color in the Oklch color space using perceptually uniform lightness, chroma, and hue." }, { "name": "opacity()", "category": "filter", "description": "Applies transparency to an element as a filter function; 0 is fully transparent, 1 is fully opaque." }, { "name": "ornaments()", "category": "font", "description": "Selects ornament glyphs from a font's OpenType ornament feature set." }, { "name": "paint()", "category": "paint", "description": "References a paint worklet registered via CSS Houdini's Painting API to generate a custom image." }, { "name": "palette-mix()", "category": "font", "description": "Creates a new font-palette value by interpolating between two font palettes in a given color space." }, { "name": "path()", "category": "shape", "description": "Accepts an SVG path data string to define a complex clipping or motion path shape." }, { "name": "perspective()", "category": "transform", "description": "Defines the distance from the viewer to the z=0 plane for 3D-transformed children, creating depth." }, { "name": "polygon()", "category": "shape", "description": "Defines a polygonal clipping region using a list of coordinate pairs for clip-path or shape-outside." }, { "name": "pow()", "category": "math", "description": "Returns the value of a base raised to the power of an exponent." }, { "name": "progress()", "category": "math", "description": "Returns a number from 0 to 1 representing the position of a value between a start and an end value." }, { "name": "radial-gradient()", "category": "gradient", "description": "Creates a gradient that radiates outward from an origin point in circular or elliptical form." }, { "name": "ray()", "category": "shape", "description": "Defines a straight line from an offset position at a given angle, used as an offset-path for motion along a path." }, { "name": "rect()", "category": "shape", "description": "Defines a rectangle by its top, right, bottom and left edge distances from the top and left of the reference box, for clip-path and offset-path." }, { "name": "rem()", "category": "math", "description": "Returns the remainder of a division, with the result having the same sign as the dividend." }, { "name": "repeat()", "category": "sizing", "description": "Repeats a track listing a specified number of times or based on content in CSS Grid layout." }, { "name": "repeating-conic-gradient()", "category": "gradient", "description": "Creates a repeating conic gradient that tiles the gradient pattern around a central point." }, { "name": "repeating-linear-gradient()", "category": "gradient", "description": "Creates a repeating linear gradient that tiles the gradient pattern along a straight line." }, { "name": "repeating-radial-gradient()", "category": "gradient", "description": "Creates a repeating radial gradient that tiles the gradient pattern outward from an origin point." }, { "name": "rgb()", "category": "color", "description": "Defines a color using red, green, and blue channels with an optional alpha channel for transparency." }, { "name": "rgba()", "category": "color", "description": "Defines a color using red, green, blue, and an explicit alpha channel for controlling transparency." }, { "name": "rotate()", "category": "transform", "description": "Rotates an element by a given angle around a fixed point in 2D space." }, { "name": "rotate3d()", "category": "transform", "description": "Rotates an element in 3D space around a vector defined by the x, y, and z axis coordinates." }, { "name": "rotateX()", "category": "transform", "description": "Rotates an element around the X axis in 3D space by the specified angle." }, { "name": "rotateY()", "category": "transform", "description": "Rotates an element around the Y axis in 3D space by the specified angle." }, { "name": "rotateZ()", "category": "transform", "description": "Rotates an element around the Z axis in 3D space, equivalent to 2D rotation." }, { "name": "round()", "category": "math", "description": "Rounds a value to the nearest integer or to a specified rounding interval and strategy." }, { "name": "saturate()", "category": "filter", "description": "Adjusts the saturation of an element; 0% produces grayscale and values above 100% supersaturate." }, { "name": "scale()", "category": "transform", "description": "Scales an element in 2D space by the given x and y factors, or uniformly if only one value is given." }, { "name": "scale3d()", "category": "transform", "description": "Scales an element in 3D space using separate x, y, and z scale factors." }, { "name": "scaleX()", "category": "transform", "description": "Scales an element along the X axis by the specified factor." }, { "name": "scaleY()", "category": "transform", "description": "Scales an element along the Y axis by the specified factor." }, { "name": "scaleZ()", "category": "transform", "description": "Scales an element along the Z axis by the specified factor in 3D space." }, { "name": "scroll()", "category": "animation", "description": "Creates an anonymous scroll progress timeline from a scroll container, for use with animation-timeline." }, { "name": "sepia()", "category": "filter", "description": "Applies a sepia tone to an element; 0% is unchanged and 100% applies a full sepia effect." }, { "name": "shape()", "category": "shape", "description": "Defines a shape using CSS-style path commands with CSS units and math functions, for clip-path and offset-path." }, { "name": "sibling-count()", "category": "tree-counting", "description": "Returns an integer equal to the number of siblings of the element, including itself." }, { "name": "sibling-index()", "category": "tree-counting", "description": "Returns an integer equal to the element's 1-based position among its siblings." }, { "name": "sign()", "category": "math", "description": "Returns the sign of a number: 1 for positive, -1 for negative, or 0 for zero." }, { "name": "sin()", "category": "math", "description": "Returns the sine of an angle, accepting values in turns, radians, or degrees." }, { "name": "skew()", "category": "transform", "description": "Skews an element along the X and Y axes by the specified angles in 2D space." }, { "name": "skewX()", "category": "transform", "description": "Skews an element along the X axis by the specified angle." }, { "name": "skewY()", "category": "transform", "description": "Skews an element along the Y axis by the specified angle." }, { "name": "sqrt()", "category": "math", "description": "Returns the positive square root of the given number." }, { "name": "steps()", "category": "easing", "description": "Defines a stepped easing function that divides the animation into a specified number of equal steps." }, { "name": "string()", "category": "content", "description": "Retrieves the value of a named string set via the string-set property for use in generated content." }, { "name": "styleset()", "category": "font", "description": "Enables a named stylistic set of alternate glyphs from a font's OpenType stylistic set feature." }, { "name": "stylistic()", "category": "font", "description": "Enables an individual stylistic alternate from a font's OpenType stylistic alternates feature." }, { "name": "supports()", "category": "cascade", "description": "Checks whether the browser supports a given CSS feature, used within @import to conditionally load sheets." }, { "name": "swash()", "category": "font", "description": "Selects swash glyphs from a font's OpenType swash feature for decorative letterforms." }, { "name": "symbols()", "category": "counter", "description": "Defines an anonymous counter style using a provided list of symbols inline in a property value." }, { "name": "tan()", "category": "math", "description": "Returns the tangent of an angle, accepting values in turns, radians, or degrees." }, { "name": "target-counter()", "category": "content", "description": "Retrieves the value of a counter at the target element referenced by a URL fragment." }, { "name": "target-counters()", "category": "content", "description": "Retrieves the concatenated counters value at the target element referenced by a URL fragment." }, { "name": "target-text()", "category": "content", "description": "Retrieves the text content of the target element referenced by a URL fragment for use in generated content." }, { "name": "translate()", "category": "transform", "description": "Moves an element from its current position along the X and Y axes in 2D space." }, { "name": "translate3d()", "category": "transform", "description": "Moves an element from its current position along the X, Y, and Z axes in 3D space." }, { "name": "translateX()", "category": "transform", "description": "Moves an element horizontally along the X axis by the specified distance." }, { "name": "translateY()", "category": "transform", "description": "Moves an element vertically along the Y axis by the specified distance." }, { "name": "translateZ()", "category": "transform", "description": "Moves an element along the Z axis in 3D space, moving it closer or further from the viewer." }, { "name": "url()", "category": "resource", "description": "References an external resource such as an image, font, or stylesheet by its URL." }, { "name": "var()", "category": "variable", "description": "Inserts the value of a CSS custom property (variable) into a property declaration." }, { "name": "view()", "category": "animation", "description": "Creates an anonymous view progress timeline tracking an element's visibility within its nearest scroll container, for use with animation-timeline." }, { "name": "xywh()", "category": "shape", "description": "Defines a rectangle by its x and y offset from the top-left of the reference box plus a width and height, for clip-path and offset-path." } ] as const; export type CssFunction = (typeof cssFunctions)[number];