CSS Types & Functions

A mathematical function that turns any number into its positive version. For example, if you have a calculation that results in -10px, abs(-10px) will return 10px.

A trigonometric function that calculates the arccosine of a number. It's used in advanced CSS math for calculating angles in layouts or animations based on side lengths.

A function that retrieves the width or height of the anchor element. It's incredibly useful for making a popup or menu match the exact dimensions of the button that triggered it.

Allows an element (like a tooltip or menu) to be docked to another element on the page, ensuring it stays positioned relative to that target even if the page scrolls or layout changes.

A combination type that accepts either an explicit angle (like 45deg) or a percentage value that the browser converts into an angle based on a reference.

A basic CSS type for rotation values. It can be expressed in degrees (deg), radians (rad), gradians (grad), or turns (turn).

A mathematical function that calculates the arcsine (inverse sine) of a number. It's used in advanced CSS math to determine angles based on vertical distances in layouts or animations.

A mathematical function that calculates the arctangent of a number. This is essential for calculating slope-based angles in CSS without needing JavaScript.

A more advanced arctangent function that takes two numbers (y and x) to calculate the angle from the origin. It correctly handles all four quadrants, making it the most reliable tool for coordinate-based math in CSS.

A CSS type that represents a geometric shape. These are used in properties like 'clip-path' and 'shape-outside' to create non-rectangular layouts, such as circles, polygons, or rounded boxes.

A type representing the mathematical way two colors mix together. Common values include 'multiply' (darkens), 'screen' (lightens), and 'overlay' (increases contrast), much like layer styles in Photoshop.

A CSS type representing keywords that can be used inside mathematical functions like 'calc()'. Examples include 'e' (base of natural logarithms) and 'pi'.

An experimental function that allows performing math on 'intrinsic' sizes like 'auto', 'min-content', or 'fit-content'. This is a key part of making it possible to animate from 'height: 0' to 'height: auto'.

Allows you to perform calculations when specifying CSS property values. You can mix different units, like percentages and pixels, in the same expression.

Clamps a value between an upper and lower bound. It accepts a minimum, a preferred, and a maximum value, making it perfect for fluid typography.

Sets the foreground color of an element's text content. It accepts various formats like HEX, RGB, HSL, and named colors.

Represents the specific keywords (like 'round', 'angle', 'bevel') that define how a corner should be shaped.

A CSS math function that calculates the cosine of an angle. This is incredibly powerful for complex animations or circular layouts purely in CSS.

A function used in the 'content' property to display the current value of a CSS counter as text.

Similar to 'counter()', but used for nested counters (like 1.1, 1.2, 1.2.1). It combines the values of all counters with the same name into a single string.

An experimental type of CSS function name that starts with two dashes (like '--foo()'). It's intended to be used for custom, user-defined functions in the future.

A general term for any CSS value that combines a number with a unit (like '10px', '2em', or '50%').

An experimental function that allows you to mix different dynamic range limits (like SDR and HDR) to fine-tune how colors are displayed on high-brightness screens.

Mathematical functions that control the speed of an animation over time (e.g., starting slow and ending fast). Common ones include 'ease-in', 'ease-out', and the customizable 'cubic-bezier()'.

A function that allows you to use environment variables defined by the browser, most commonly used to handle 'safe areas' on devices with notches or rounded corners.

A CSS math function that calculates e (Euler's number) raised to the power of a specified number. Useful for complex scientific or geometric layouts.

Refers to the specific functions used within the 'filter' property, such as 'blur()', 'contrast()', 'sepia()', or 'drop-shadow()'.

A shorthand property that defines how a flex item grows or shrinks to fit the available space in its container.

Special words like 'inherit', 'initial', 'unset', and 'revert' that can be used on almost any CSS property to control how it handles cascades or default values.

A special image type that transitions smoothly between two or more colors. Common types include 'linear-gradient()', 'radial-gradient()', and 'conic-gradient()'.

A math function that calculates the hypotenuse of a right-angled triangle (the square root of the sum of squares of its arguments). It is useful for complex mathematical layouts where you need to calculate diagonal distances.

An experimental function that allows you to apply different values based on a condition (like a media query or a variable state) directly within a property value.

A generic CSS type representing any data that can be rendered as an image, including URLs (url()), gradients (linear-gradient()), or subsets of other images (image-set()).

A CSS data type representing a whole number (positive, negative, or zero). It is used in properties like 'z-index', 'flex-grow', or for counting items.

A CSS data type that accepts either a length (like 20px) or a percentage (like 50%). It's used in properties like 'width', 'margin', and 'padding'.

A CSS data type representing a distance value. It consists of a number followed by a unit (like 'px', 'em', 'rem', 'vw', etc.).

A CSS data type representing the 'style' of a line, used in properties like 'border-style' or 'outline-style'. Common values include 'solid', 'dashed', and 'dotted'.

A math function that calculates the logarithm of a number. This is useful for advanced mathematical layouts where you need to scale values non-linearly.

Returns the largest (most positive) value from a list of comma-separated expressions. It is useful for creating layouts that grow but don't shrink below a certain point.

Returns the smallest (most negative) value from a list of comma-separated expressions. It is useful for creating layouts that shrink but don't grow beyond a certain point.

A math function that returns the remainder of a division (modulo). This is useful for complex layouts where you need elements to repeat or cycle based on a value.

A CSS data type representing a real number (which can include decimals). It's used for values like 'opacity', 'line-height' (as a multiplier), or in math functions.

Sets what happens if content is too big to fit into its container. It can be clipped, hidden, or made to scroll.

A CSS data type representing a value relative to something else (usually the parent element's size or another property's value).

Specifies how an element is positioned in a document. It allows for static, relative, absolute, fixed, or sticky positioning, which changes how the element interacts with the page flow.

An exponential math function that calculates a base raised to the power of an exponent. It's useful for creating non-linear scales (like font sizes or spacing).

A relative math function that calculates how far a value is between two points (a start and an end). It returns a number between 0 and 1, essentially giving you a percentage of completion.

A new CSS math function that picks a random value from a range of possibilities. This allows for native CSS randomness without needing JavaScript.

A CSS data type representing the proportion of one side to another (like 16 / 9 for widescreen). It's primarily used in the aspect-ratio property or media queries.

A function used in the motion path module to define a path that starts at a single point and shoots out in a specific direction (like a ray of light).

A CSS unit that is relative to the font-size of the root element (usually the <html> tag). Unlike 'em', it doesn't change based on the parent's font size, making scaling much more predictable.

A media query property that describes the pixel density of the output device (like a 'Retina' display). It allows you to provide higher-quality images only for screens that can actually see the difference.

A math function that rounds a value to the nearest multiple of another value. For example, you can use it to ensure a width always rounds to the nearest 10 pixels.

A basic data type that defines a 2D shape, like a circle, ellipse, or polygon. It's most commonly used with the 'clip-path' property to cut elements into specific shapes or with 'shape-outside' to make text flow around them.

A new experimental function that returns the total number of siblings an element has. This allows you to style elements based on how many items are currently in a list without using JavaScript.

A new experimental function that returns the 1-based index of an element among its siblings. You can use it to create staggered animations or dynamic styles without nth-child(n) hacks.

A math function that returns -1 for negative numbers, 0 for zero, and 1 for positive numbers. It's useful for logic-based styling directly in your CSS.

Calculates the sine of an angle. Part of the trigonometric function suite in CSS, allowing you to create complex circular layouts or wave-like animations.

Calculates the square root of a number. This is part of the exponent function set in CSS, useful for relative scaling based on geometric areas.

A basic data type that represents a sequence of characters, always wrapped in quotes (e.g., 'Hello'). It's most commonly used with the 'content' property in pseudo-elements.

A new experimental function for 'corner-shaping' that creates 'squircle' corners. This is the math-based rounding used by Apple in iOS icons to make corners look smoother and more organic than a standard circle.

Calculates the tangent of an angle. Useful for complex geometric translations or rotations directly in CSS.

A value type used with 'text-box-edge' to define which lines of the font (like the top of capital letters, the x-height, or the baseline) should be used as the boundaries for trimming.

The standard CSS data type for durations. It can be defined in seconds (s) or milliseconds (ms).

A generic data type representing any function that alters an element's coordinate system. This includes common functions like rotate(), scale(), translate(), and skew().

A generic keyword used in newer CSS specs (like Mixins and Functions) to denote a specific data type requirement for a variable or argument.

The standard CSS function for including external resources like images, fonts, or SVGs into your stylesheet.

Lets you insert the value of a custom property (CSS Variable) into your stylesheet, making it easier to reuse colors, spacing, and other values across your design.

Retrieves the value of an attribute from an element to use directly in CSS. The classic use is with the content property in pseudo-elements; using attr() with typed values on other properties is a newer experimental extension.

A function that automatically selects a text color with the best contrast against a given background color. It's a game-changer for dynamic themes, ensuring text remains readable regardless of the background.

A function used in 'clip-path' and other properties to define custom 2D shapes using commands like 'move', 'line', and 'curve'. It's basically like writing SVG paths directly in CSS.