CSS Functions Cheatsheet

calc()

Performs math with mixed units.

Syntax:

calc(<expression>)

div.container {
  width: calc(100% - 48px);
}
 
.article-title {
  font-size: calc(1rem + 0.5vw);
}

Always include spaces around operators (+, -, *, /) for broadest compatibility. Useful for layouts and spacing.

var()

Use CSS variables.

Syntax:

var(--name, <fallback>)

:root {
  --accent: #06b6d4;
  --space: 16px;
}
 
.header {
  color: var(--accent, #06b6d4);
  padding: var(--space, 16px);
}

Fallback is optional but recommended when the variable may be unset.

Custom properties cascade and can be changed at runtime.

clamp()

Clamp returns a relative value between a min and max constraints.

Syntax:

clamp(<min>, <preferred>, <max>)

h1.site-title {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}
 
.grid {
  gap: clamp(8px, 2vw, 32px);
}

Useful for responsive typography and responsive spacing without media queries.

min(), max()

Pick the minimum or maximum of several values.

Syntax:

min(a, b, ...) returns the smallest.

max(a, b, ...) returns the largest.

.card {
  width: min(60ch, 100%);
}
 
.sidebar {
  height: max(40vh, 300px);
}

Values can be mixed units; calculation happens at computed value time.

rgb() / rgba()

Used for sRGB color values and alpha transparency.

h2.section-title {
  color: rgb(255, 99, 71);
}
 
.banner {
  background: rgba(96, 165, 250, 0.08);
}

hsl() / hsla()

Hue, saturation, lightness notation. Supports alpha and slash-separated alpha syntax.

.banner {
  color: hsl(210 100% 50% / 0.9);
}

url()

Reference external or local resources for images, fonts, etc.

.hero {
  background-image: url("/img/hero.png");
  background-size: cover;
}

linear-gradient()

Gradients produce image values and can be used wherever images are allowed (backgrounds, masks, etc.).

linear-gradient() creates a gradient along a straight line.

.banner {
  background: linear-gradient(90deg, var(--color), var(--color-2));
}

radial-gradient()

Expands outward from a center point; supports shape and size.

.glow {
  background: radial-gradient(
    circle at 50% 30%,
    rgba(96, 165, 250, 0.15),
    transparent 40%
  );
}

conic-gradient()

Angular gradient rotated around a center; useful for charts and loaders.

.pie {
  background: conic-gradient(
    from 0deg at 50% 50%,
    #60a5fa 0 25%,
    #7dd3fc 25% 50%,
    transparent 50% 100%
  );
}

attr()

Use an element's attribute value in content or, in some experimental cases, property values.

Syntax:

attr(<name> [, <type-or-unit>])

<div class="badge" data-size="120">Badge</div>

.badge {
  width: attr(data-size px);
}

translate()

Move an element along the X and/or Y axis from its original position.

.translate {
  transform: translate(50%, 50%);
}

rotate()

Rotate an element by an angle or turns.

.rotate {
  transform: rotate(45deg);
}

Angles can be given in deg, rad, turn. Rotation occurs around the element's transform-origin (default center).

scale()

Scale an element along X and/or Y axes.

.scale-up {
  transform: scale(1.1); /* uniform scale */
}
 
.scale-x {
  transform: scaleX(1.2);
}
 
.scale-y {
  transform: scaleY(0.9);
}

scale() multiplies element dimensions (1 is no change). Use transform-origin to control the scaling anchor point.

skew()

Skew an element along X and/or Y axes.

.skew-x {
  transform: skewX(10deg);
}
 
.skew-y {
  transform: skewY(-20deg);
}

skew() distorts the coordinate system, useful for subtle perspective effects.

Combining transforms

You can chain multiple transform functions.

.combo {
  transform: translateY(-4px) rotate(-2deg) scale(1.02);
}

The functions are applied left-to-right. Changing order changes the result.

cubic-bezier()

Custom cubic Bézier timing function for transitions and animations.

Syntax:

cubic-bezier(x1, y1, x2, y2)

Example:

.button {
  transition: transform 240ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

steps()

Discrete step-based timing function.

Syntax:

steps(n, start|end)

Example:

.sprite {
  transition: background-position 600ms steps(6, end);
}

Useful for frame-based sprite animations or snapping effects.

color-mix()

Blend two colors using color spaces.

Syntax:

color-mix(in srgb, colorA percentage, colorB)

Example:

.header-hero {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 70%, white),
    transparent 60%
  );
}

color-mix() is new, check browser support before using it in production.