CSS Functions Reference

About This Reference

This comprehensive reference lists all CSS functions organized by category. Functions are reusable pieces of code that accept parameters and return values, enabling dynamic calculations, transformations, and color manipulations in your stylesheets.

Each function includes a description and example usage. Functions range from basic calculations (calc, min, max) to advanced features like trigonometry, color mixing, and 3D transformations. For detailed tutorials on using these functions, see the related lessons below.

Math Functions

Function	Description	Links
`calc()`	Perform calculations to determine CSS property values	Demo Spec
`min()`	Use the smallest value from a comma-separated list	Demo Spec
`max()`	Use the largest value from a comma-separated list	Demo Spec
`clamp()`	Clamp value between min and max bounds	Demo Spec
`round()`	Round a number to nearest, up, down, or to-zero	Spec
`mod()`	Calculate modulus (remainder) of division	Spec
`rem()`	Calculate remainder with same sign as dividend	Spec
`abs()`	Return absolute value of a number	Spec
`sign()`	Return the sign of a number (-1, 0, or 1)	Spec

Trigonometric Functions

Function	Description	Links
`sin()`	Calculate sine of an angle	Spec
`cos()`	Calculate cosine of an angle	Spec
`tan()`	Calculate tangent of an angle	Spec
`asin()`	Calculate arc sine (inverse sine)	Spec
`acos()`	Calculate arc cosine (inverse cosine)	Spec
`atan()`	Calculate arc tangent (inverse tangent)	Spec
`atan2()`	Calculate arc tangent of y/x using quadrant	Spec

Exponential & Root Functions

Function	Description	Links
`pow()`	Raise a number to a power	Spec
`sqrt()`	Calculate square root	Spec
`hypot()`	Calculate hypotenuse (square root of sum of squares)	Spec
`log()`	Calculate natural logarithm	Spec
`exp()`	Calculate e raised to a power	Spec

Color Functions

Function	Description	Links
`rgb()`	Define color using red, green, blue values	Demo Spec
`hsl()`	Define color using hue, saturation, lightness	Demo Spec
`hwb()`	Define color using hue, whiteness, blackness	Spec
`oklch()`	Perceptually uniform color (lightness, chroma, hue)	Demo Spec
`oklab()`	Perceptually uniform color (lightness, a, b)	Spec
`lch()`	CIE LCH color space	Spec
`lab()`	CIE LAB color space	Spec
`color()`	Specify color in specific color space	Spec
`color-mix()`	Mix two colors together	Demo Spec
`light-dark()`	Return different values based on user's color-scheme preference (light or dark mode)	Spec

Transform Functions

Function	Description	Links
`translate()`	Move element in 2D space	Demo Spec
`rotate()`	Rotate element around origin	Demo Spec
`scale()`	Resize element proportionally	Demo Spec
`skew()`	Skew element along X and Y axes	Demo Spec
`matrix()`	2D transformation matrix	Spec
`translate3d()`	Move element in 3D space	Spec
`rotate3d()`	Rotate element around 3D axis	Spec
`perspective()`	Set perspective for 3D transforms	Spec

Filter Functions

Function	Description	Links
`blur()`	Apply Gaussian blur	Demo Spec
`brightness()`	Adjust brightness	Spec
`contrast()`	Adjust contrast	Spec
`grayscale()`	Convert to grayscale	Spec
`hue-rotate()`	Rotate hue on color wheel	Spec
`invert()`	Invert colors	Spec
`saturate()`	Adjust saturation	Spec
`sepia()`	Apply sepia tone	Spec
`drop-shadow()`	Apply shadow following element's shape	Spec

Gradient Functions

Function	Description	Links
`linear-gradient()`	Create linear gradient	Demo Spec
`radial-gradient()`	Create radial gradient	Demo Spec
`conic-gradient()`	Create conic gradient (color wheel)	Demo Spec
`repeating-linear-gradient()`	Repeating linear gradient	Spec
`repeating-radial-gradient()`	Repeating radial gradient	Spec
`repeating-conic-gradient()`	Repeating conic gradient	Spec

Shape Functions

Function	Description	Links
`circle()`	Define circular shape for clip-path or shape-outside	Demo Spec
`ellipse()`	Define elliptical shape for clip-path or shape-outside	Demo Spec
`inset()`	Define inset rectangle shape with optional rounded corners	Demo Spec
`polygon()`	Define polygon shape with multiple vertices	Demo Spec
`path()`	Define shape using SVG path syntax	Spec

Easing Functions

Function	Description	Links
`cubic-bezier()`	Define custom easing curve with four control points	Demo Spec
`steps()`	Define stepped easing with discrete intervals	Demo Spec
`linear()`	Define linear easing with custom stops for complex curves	Spec

Image Functions

Function	Description	Links
`image-set()`	Provide multiple image sources for resolution-dependent selection	Spec
`cross-fade()`	Blend between two or more images	Spec

Other Functions

Function	Description	Links
`var()`	Use value of custom property	Demo Spec
`url()`	Load resource from URL	Spec
`attr()`	Use HTML attribute value	Spec
`counter()`	Display counter value	Spec
`counters()`	Display nested counter values	Spec
`symbols()`	Define counter symbols inline	Spec
`fit-content()`	Clamp size to content with limit	Spec
`minmax()`	Define size range for grid tracks	Demo Spec
`repeat()`	Repeat grid track definition	Demo Spec
`env()`	Use environment variable (safe areas)	Spec
`anchor()`	Reference an anchor element's position for positioning	Spec
`anchor-size()`	Reference an anchor element's size for sizing calculations	Spec

About This Reference

Image Functions

Other Functions

Resources & Tools