Complete reference for all CSS custom functions in css-extras.
Total functions: 49
--negate() ↗︎Negates a value (returns the negative).
--value (Number): The value to negate.Number: The negated value.
padding: --negate(1em);
--abs() ↗︎Returns the absolute value of a number.
--value (Number): The input value.Number: The absolute value.
margin: --abs(-20px);
--lerp() ↗︎Linear interpolation between two values.
--from (Number): Start value.--to (Number): End value.--progress (Number): Progress between 0 and 1.Number: Interpolated value.
width: --lerp(100px, 200px, 0.5);
--map-range() ↗︎Maps a value from one range to another.
--value (Number): Input value.--in-min (Number): Input range minimum.--in-max (Number): Input range maximum.--out-min (Number): Output range minimum.--out-max (Number): Output range maximum.Number: Mapped value.
font-size: --map-range(50vw, 320px, 1920px, 14px, 24px);
--ratio() ↗︎Returns the ratio of two values. Supports values with different units, unlike regular division.
--value (CalcSum): Input value.--to-value (CalcSum): Another input value.Number: The ratio between two values.
scale: --ratio(16px, 1em);
--sign() ↗︎Returns the sign of a number (-1, 0, or 1).
--value (Number): Input value.Number: -1 for negative, 1 for positive, 0 for zero.
transform: scaleX(--sign(var(--direction)));
--round-to() ↗︎Rounds a value to the nearest multiple.
--value (Length): Value to round.--multiple (Length): Multiple to round to. Default: 1Length: Rounded value.
width: --round-to(127px, 8px);
--floor-to() ↗︎Rounds a value down to the nearest multiple (floor).
--value (Length): Value to round down.--multiple (Length): Multiple to round to. Default: 1Length: Rounded down value.
width: --floor-to(127px, 8px);
--ceil-to() ↗︎Rounds a value up to the nearest multiple (ceil).
--value (Length): Value to round up.--multiple (Length): Multiple to round to. Default: 1Length: Rounded up value.
width: --ceil-to(127px, 8px);
--hypot() ↗︎Calculates the hypotenuse using Pythagorean theorem.
--a (Length): First side.--b (Length): Second side.Length: Hypotenuse length.
diagonal: --hypot(100px, 100px);
--opacity() ↗︎Returns a semi-transparent version of any color.
--color (Color): The base color.--opacity (Number): Opacity value (0-100% or 0-1).Color: Color with opacity.
background: --opacity(blue, 50%);
--tint() ↗︎Lightens a color by mixing with white. Uses OKLab color space for perceptually uniform mixing.
--color (Color): The base color.--amount (Number): Amount to lighten (0-100%). Default: 10%Color: Lightened color.
background: --tint(blue, 20%);
--shade() ↗︎Darkens a color by mixing with black. Uses OKLab color space for perceptually uniform mixing.
--color (Color): The base color.--amount (Number): Amount to darken (0-100%). Default: 10%Color: Darkened color.
background: --shade(blue, 20%);
--saturate() ↗︎Adjusts color saturation. Uses OKLCH color space for perceptually uniform chroma adjustment. Chroma is clamped to 0.4 for safe display.
--color (Color): The base color.--amount (Number): Chroma multiplier. Default: 1.2Color: Adjusted color.
color: --saturate(red, 1.5);
--lighten() ↗︎Adjusts color lightness. Uses OKLCH color space for perceptually uniform lightness adjustment. Maintains chroma independently.
--color (Color): The base color.--amount (Number): Lightness adjustment (-100% to 100%). Default: 10%Color: Adjusted color.
background: --lighten(blue, 20%);
--darken() ↗︎Darkens a color by reducing lightness.
Uses OKLCH color space for perceptually uniform lightness adjustment. Unlike --shade() which mixes with black, this directly reduces the lightness value.
--color (Color): The base color.--amount (Number): Lightness reduction (0-100%). Default: 10%Color: Darkened color.
background: --darken(blue, 20%);
--rotate-hue() ↗︎Rotates the hue of a color. Uses OKLCH color space for perceptually uniform hue rotation.
--color (Color): The base color.--degrees (Angle): Degrees to rotate hue. Default: 30degColor: Color with rotated hue.
background: --rotate-hue(blue, 180deg);
--complement() ↗︎Returns the complementary color. Uses OKLCH color space for perceptually accurate complementary colors.
--color (Color): The base color.Color: Complementary color.
border-color: --complement(blue);
--invert() ↗︎Inverts a color.
--color (Color): The color to invert.Color: Inverted color.
background: --invert(white);
--grayscale() ↗︎Converts a color to grayscale. Uses OKLCH color space by setting chroma to 0.
--color (Color): The color to convert.Color: Grayscale color.
filter: --grayscale(var(--brand-color));
--text-on() ↗︎Returns black or white text color for optimal contrast on a background.
--bg (Color): Background color.Color: Black or white for optimal readability.
color: --text-on(var(--bg-color));
--opaque() ↗︎Removes transparency from a color, making it fully opaque.
--color (Color): Color with alpha channel.Color: Fully opaque version of the color.
background: --opaque(var(--semi-transparent-bg));
--mix() ↗︎Mixes two colors in OKLab color space. Uses perceptually uniform OKLab color space for natural-looking color mixing.
--color1 (Color): First color.--color2 (Color): Second color.--amount (Number): Amount of second color to mix (0-100%). Default: 50%Color: Mixed color.
background: --mix(red, blue, 30%);
--triadic() ↗︎Returns a triadic color harmony. Triadic colors are evenly spaced around the color wheel (120° apart).
--color (Color): Base color.--index (Number): Which triadic color (1 or 2). Default: 1Color: Triadic color.
color: --triadic(blue, 1);
--tetradic() ↗︎Returns a tetradic (square) color harmony. Tetradic colors are evenly spaced around the color wheel (90° apart).
--color (Color): Base color.--index (Number): Which tetradic color (1, 2, or 3). Default: 1Color: Tetradic color.
color: --tetradic(blue, 2);
--black() ↗︎Creates a semi-transparent black.
--opacity (Number): Opacity value (0-100% or 0-1). Default: 50%Color: Semi-transparent black.
box-shadow: 0 2px 4px --black(20%);
--white() ↗︎Creates a semi-transparent white.
--opacity (Number): Opacity value (0-100% or 0-1). Default: 50%Color: Semi-transparent white.
background: --white(90%);
--fluid-type() ↗︎Creates fluid typography that scales with viewport.
NOTE: This function is mathematically equivalent to --responsive-value() but optimized for typography. Use this for font-size, --responsive-value() for other properties.
--min (Length): Minimum font size.--max (Length): Maximum font size.--min-viewport (Length): Minimum viewport width. Default: 320px--max-viewport (Length): Maximum viewport width. Default: 1280pxLength: Fluid font size.
font-size: --fluid-type(16px, 24px, 320px, 1280px);
--modular-scale() ↗︎Creates a modular scale value.
--base (Number): Base size. Default: 1rem--ratio (Number): Scale ratio. Default: 1.25--step (Number): Step in the scale. Default: 0Length: Scaled value.
font-size: --modular-scale(1rem, 1.25, 3);
--line-height-length() ↗︎Calculates line height as a length value based on font size. Returns a length (e.g., 24px) rather than a unitless ratio. Use this when you need an absolute line height value.
--font-size (Length): The font size.--multiplier (Number): Line height multiplier. Default: 1.5Length: Line height as a length.
line-height: --line-height-length(16px, 1.6);
--line-height-ratio() ↗︎Calculates line height as a unitless ratio. Returns a number (e.g., 1.5) which is recommended for better inheritance in CSS.
--line-height (Length): The desired line height as a length.--font-size (Length): The font size.Number: Unitless line height ratio.
line-height: --line-height-ratio(24px, 16px);
--line-height-unitless() ↗︎Creates unitless line height from font size (recommended for better inheritance).
NOTE: Only works correctly with pixel font sizes. For rem/em values, use --line-height-length() or --line-height-ratio() instead.
--font-size (Length): Font size in pixels. Default: 16px--multiplier (Number): Line height multiplier. Default: 1.5Number: Unitless line height.
line-height: --line-height-unitless(16px, 1.5);
--sidebar-layout() ↗︎Creates responsive sidebar layout columns.
--sidebar-width (Length): Width of sidebar. Default: 20ch--content-min (Length): Minimum width of content area. Default: 20chLength: Grid template columns value.
grid-template-columns: --sidebar-layout(250px, 20ch);
--conditional-radius() ↗︎Conditional border radius that removes at viewport edges.
--radius (Length): Border radius value.--edge-dist (Length): Distance from viewport edge. Default: 4pxLength: Computed border radius.
border-radius: --conditional-radius(1rem, 8px);
--responsive-value() ↗︎Creates a responsive value that scales between two sizes.
NOTE: This function is mathematically equivalent to --fluid-type() but uses a simpler lerp-based approach. Use this for spacing/sizing, --fluid-type() for typography.
--small (Length): Minimum value.--large (Length): Maximum value.--viewport-min (Length): Minimum viewport width. Default: 320px--viewport-max (Length): Maximum viewport width. Default: 1200pxLength: Responsive value.
padding: --responsive-value(1rem, 2rem, 320px, 1200px);
--aspect-height() ↗︎Calculates height from aspect ratio and maximum constraints.
--ratio (Number): Aspect ratio (e.g., 16/9). Default: 1--max-width (Length): Maximum width. Default: 100%--max-height (Length): Maximum height. Default: 100%Length: Computed height.
height: --aspect-height(16/9, 100vw, 100vh);
--aspect-width() ↗︎Calculates width from aspect ratio and maximum constraints.
--ratio (Number): Aspect ratio (e.g., 16/9). Default: 1--max-height (Length): Maximum height. Default: 100%--max-width (Length): Maximum width. Default: 100%Length: Computed width.
width: --aspect-width(16/9, 100vh, 100vw);
--spacing() ↗︎Creates consistent spacing based on a scale. Recommended range: 0-10. Higher values create exponentially larger spacing.
--level (Number): Spacing level (0-10). Default: 1--base (Length): Base spacing unit. Default: 0.25remLength: Computed spacing.
margin: --spacing(3);
--container-padding() ↗︎Creates inset spacing for containers.
--padding (Length): Base padding. Default: 1rem--max-width (Length): Maximum container width. Default: 1200pxLength: Responsive padding.
padding: --container-padding(2rem, 1200px);
--ease-out() ↗︎Creates a simple easing curve value.
--progress (Number): Animation progress (0-1).Number: Eased value.
transform: translateY(--ease-out(var(--progress)));
--elastic-ease() ↗︎Creates elastic easing.
--progress (Number): Animation progress (0-1).--amplitude (Number): Amplitude of elasticity. Default: 1Number: Eased value.
transform: scale(--elastic-ease(var(--progress), 1.2));
--px-to-rem() ↗︎Converts pixels to rem.
--pixels (Length): Pixel value.--base (Length): Base font size. Default: 16pxLength: Rem value.
font-size: --px-to-rem(24px);
--rem-to-px() ↗︎Converts rem to pixels.
--rems (Length): Rem value.--base (Length): Base font size. Default: 16pxLength: Pixel value.
width: --rem-to-px(2rem);
--auto-grid() ↗︎Creates responsive grid columns.
--min-width (Number): Minimum column width. Default: 250px--max-cols (Number): Maximum number of columns. Default: 4Grid: Grid template columns value.
grid-template-columns: --auto-grid(250px, 4);
--grid-span() ↗︎Creates a CSS grid span value. Ensures the span is an integer value.
--columns (Number): Number of columns to span. Default: 1--total (Number): Total columns in grid. Default: 12Span: Grid column span (rounded to integer).
grid-column: --grid-span(3, 12);
--smooth-shadow() ↗︎Creates a smooth shadow. Generates three shadow layers. The spread-factor controls how distributed the shadows are.
--color (Color): Shadow color. Default: rgb(0 0 0 / 0.2)--size (Length): Shadow size. Default: 12px--spread-factor (Number): Controls shadow distribution (higher = tighter shadows). Default: 3Shadow: Layered box shadow.
box-shadow: --smooth-shadow(black, 20px, 3);
--glow() ↗︎Creates a glow effect.
--color (Color): Glow color. Default: white--size (Length): Glow size. Default: 10px--intensity (Number): Glow intensity (0-1). Default: 0.5Shadow: Glow shadow.
box-shadow: --glow(cyan, 10px, 0.5);
--light-dark() ↗︎Theme-aware value switcher for light/dark mode.
Uses CSS if() with color-scheme query. Requires color-scheme: light dark on :root.
Works with ANY value type (colors, lengths, etc.), not just colors.
[!NOTE] CSS has a native
light-dark()function for colors. The custom--light-dark()function is more powerful as it works with any value type, not just colors.
--light (Any): Value for light mode.--dark (Any): Value for dark mode.Any: Theme-appropriate value.
padding: --light-dark(0.75rem, 1rem);
--theme-color() ↗︎Creates a theme-aware color with automatic adjustment.
Uses CSS if() with color-scheme query. Requires color-scheme: light dark on :root.
In light mode, mixes the base color with white (default 85% white).
In dark mode, mixes the base color with black (default 15% black).
--base (Color): Base color.--light-mix (Number): Percentage of white to mix in light mode. Default: 85%--dark-mix (Number): Percentage of black to mix in dark mode. Default: 15%Color: Theme-adjusted color.
background: --theme-color(blue, 80%, 20%);