CSS Types & Functions

Absolute value function. Returns the non-negative value of a number.

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.

Relative unit based on the height of capital letters. 1cap = cap height of the element's font.

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.

Exponential function. Calculates the mathematical constant e raised to a power.

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.

A value that is either a frequency (Hz, kHz) or a percentage. Combines two different value types.

Unit for sound frequency (Hz, kHz). Used in audio and speech-related CSS properties.

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()'.

Calculates the hypotenuse of a right triangle. Useful for diagonal distances in layouts.

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.). Lengths fall into two big buckets: absolute units that map to physical sizes, and relative units that resolve based on context (the font, the viewport, the container, the line height).

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'.

Logarithm function. Finds the power to which a base must be raised to equal a number.

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).

Relative to the root element's cap height. Like rem but for cap units.

Relative to the root element's character width (ch). Like rem but for character width.

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.

Relative to the root element's x-height. Like rem but for x-height.

Relative to the root element's CJK character width. Like rem but for CJK text.

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.

Returns the sign of a number: -1, 0, or 1. Useful for conditional calculations.

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.

A value that is either a time (s, ms) or a percentage. Used in animations and transitions.

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.

Blends two colors together in a given color space. Pass two colors and a percentage, and the browser returns the mix. Use it to tint, shade, or fade any color at runtime, no preprocessor needed.

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.

Picks one of two colors based on the page's current color scheme. Pass a light-mode color and a dark-mode color, and the browser uses whichever matches color-scheme. No duplicate rules or media query needed.

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.