Complete reference for all CSS custom functions in css-extras.
Total functions: 43
--negate() ↗︎Negates a value (returns the negative).
--value (Number): The value to negate.Number: The negated value.
padding: --negate(1em);
/* Output: padding: -1em; */
--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);
/* Output: width: 150px; */
--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);
/* Output: Scales font from 14px at 320px viewport to 24px at 1920px viewport */
--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);
/* Output: scale: 1; (assuming 1em = 16px) */
--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%);
/* Output: background: rgb(0 0 255 / 0.5); */
--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%);
/* Output: background: oklab(0.532 -0.08 -0.192); (lighter blue) */
--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%);
/* Output: background: oklab(0.372 -0.08 -0.192); (darker blue) */
--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);
/* Output: color: oklch(0.628 0.4 29.234); (more saturated red) */
--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%);
/* Output: background: oklch(0.652 0.24 264.052); (lighter blue) */
--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%);
/* Output: background: oklch(0.252 0.24 264.052); (darker blue) */
--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);
/* Output: background: oklch(0.452 0.24 84.052); (yellow-green) */
--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);
/* Output: border-color: oklch(0.452 0.24 84.052); (yellow-orange complement) */
--invert() ↗︎Inverts a color.
--color (Color): The color to invert.Color: Inverted color.
background: --invert(white);
/* Output: background: rgb(0 0 0); (black) */
--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));
/* Output: filter: oklch(0.452 0 264.052); (gray with same lightness) */
--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));
/* Output: color: black; (or white, depending on background lightness) */
--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));
/* Output: background: rgb(0 0 255); (removes alpha channel) */
--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%);
/* Output: background: oklab(0.537 0.126 -0.058); (reddish-purple) */
--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);
/* Output: color: oklch(0.452 0.24 144.052); (120° rotation, green) */
--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);
/* Output: color: oklch(0.452 0.24 174.052); (180° rotation, yellow-orange) */
--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%);
/* Output: box-shadow: 0 2px 4px rgb(0 0 0 / 0.2); */
--white() ↗︎Creates a semi-transparent white.
--opacity (Number): Opacity value (0-100% or 0-1). Default: 50%Color: Semi-transparent white.
background: --white(90%);
/* Output: background: rgb(255 255 255 / 0.9); */
--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);
/* Output: Scales from 16px at 320px viewport to 24px at 1280px viewport */
--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);
/* Output: font-size: 1.953rem; (1rem × 1.25³) */
--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);
/* Output: line-height: 25.6px; */
--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);
/* Output: line-height: 1.5; */
--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);
/* Output: line-height: 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);
/* Output: grid-template-columns: 250px 1fr; (or stacks when content < 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);
/* Output: border-radius: 1rem; (0 when within 8px of viewport edge) */
--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);
/* Output: Scales from 1rem at 320px viewport to 2rem at 1200px viewport */
--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);
/* Output: height: 56.25vw; (maintains 16:9 ratio within constraints) */
--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);
/* Output: width: 177.78vh; (maintains 16:9 ratio within constraints) */
--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);
/* Output: margin: 0.75rem; (0.25rem × 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);
/* Output: padding: calc((100% - 1200px) / 2 + 2rem); (responsive padding) */
--ease-out() ↗︎Creates a simple easing curve value.
--progress (Number): Animation progress (0-1).Number: Eased value.
transform: translateY(--ease-out(var(--progress)));
/* Output: Eased value between 0 and 1 with ease-out timing */
--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));
/* Output: Eased value with elastic bounce effect */
--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);
/* Output: font-size: 1.5rem; (assuming 16px base) */
--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);
/* Output: width: 32px; (assuming 16px base) */
--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);
/* Output: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
--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);
/* Output: grid-column: span 3; */
--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);
/* Output: Multi-layered shadow with smooth depth effect */
--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);
/* Output: box-shadow: 0 0 10px rgb(0 255 255 / 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);
/* Output: Lighter blue in light mode, darker blue in dark mode */
--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%);