CSS Functions Guide

A comprehensive reference for modern CSS functions. From responsive typography with clamp() to dynamic colors with color-mix(), master the most powerful features in CSS.

Layout Functions

CSS functions that help create fluid, responsive layouts without media queries.

clamp()

/* clamp(minimum, preferred, maximum) */
.text {
  font-size: clamp(1rem, 2.5vw, 3rem);
}

.container {
  width: clamp(300px, 50%, 1200px);
  padding: clamp(1rem, 5vw, 3rem);
}

/* Responsive spacing */
.section {
  margin-block: clamp(2rem, 8vh, 6rem);
}

Clamps a value between a minimum and maximum, with a preferred value in between. Perfect for fluid typography and spacing.

This text scales with viewport
(Resize window to see effect)

min()

/* Returns the smallest value */
.container {
  width: min(100%, 1200px);
  padding: min(5vw, 3rem);
}

/* Multiple values */
.box {
  height: min(50vh, 500px, 80%);
}

/* With calc() */
.element {
  width: min(100% - 2rem, 800px);
}

Returns the smallest value from a list of comma-separated expressions.

max()

/* Returns the largest value */
.container {
  min-height: max(300px, 50vh);
  font-size: max(1rem, 2vw);
}

/* Ensure minimum spacing */
.element {
  padding: max(1rem, 3%);
  gap: max(0.5rem, 1vw);
}

Returns the largest value from a list of comma-separated expressions.

calc()

/* Basic arithmetic: +, -, *, / */
.element {
  width: calc(100% - 2rem);
  height: calc(100vh - 60px);
}

/* Complex calculations */
.grid-item {
  width: calc((100% - 3rem) / 4);
  margin-left: calc(1rem * -1);
}

/* Nested calc */
.box {
  padding: calc(1rem + calc(2vw * 1.5));
}

/* With CSS variables */
.component {
  --spacing: 1rem;
  margin: calc(var(--spacing) * 2);
}

Performs mathematical calculations with mixed units. Supports +, -, *, and / operators.

Color Functions

Modern CSS color functions for creating and manipulating colors.

rgb() / rgba()

/* Modern syntax (no commas) */
.element {
  color: rgb(255 99 71);
  background: rgb(0 128 255 / 0.5); /* with alpha */
}

/* Legacy syntax */
.legacy {
  color: rgb(255, 99, 71);
  background: rgba(0, 128, 255, 0.5);
}

/* With CSS variables */
.dynamic {
  --r: 100;
  --g: 200;
  --b: 50;
  background: rgb(var(--r) var(--g) var(--b));
}

rgb(255 99 71)

rgb(0 128 255 / 0.5)

rgb(138 43 226)

hsl() / hsla()

/* hsl(hue saturation lightness) */
.element {
  color: hsl(210 100% 50%); /* blue */
  background: hsl(210 100% 50% / 0.5); /* with alpha */
}

/* Easy color variations */
.primary { background: hsl(210 100% 50%); }
.lighter { background: hsl(210 100% 70%); }
.darker { background: hsl(210 100% 30%); }
.desaturated { background: hsl(210 50% 50%); }

/* Color wheel navigation */
.complementary {
  --hue: 210;
  background: hsl(var(--hue) 100% 50%);
}
.complement {
  background: hsl(calc(var(--hue) + 180) 100% 50%);
}

hsl(210 100% 50%)

hsl(210 100% 70%)

hsl(210 50% 50%)

hsl(30 100% 50%)

color-mix()

New

/* Mix two colors */
.element {
  background: color-mix(in srgb, red 50%, blue);
}

/* Different color spaces */
.mix-1 { background: color-mix(in srgb, red, blue); }
.mix-2 { background: color-mix(in hsl, red, blue); }
.mix-3 { background: color-mix(in oklab, red, blue); }

/* Control proportions */
.subtle { background: color-mix(in srgb, white 90%, blue); }
.bold { background: color-mix(in srgb, white 10%, blue); }

/* With CSS variables */
.theme {
  --primary: #0066ff;
  --hover: color-mix(in srgb, var(--primary), white 20%);
  --active: color-mix(in srgb, var(--primary), black 20%);
}

color-mix(red, blue)

30% red, 70% blue

70% red, 30% blue

hwb()

/* hwb(hue whiteness blackness) */
.element {
  color: hwb(210 0% 0%); /* pure blue */
  background: hwb(210 50% 0%); /* lighter blue */
  border-color: hwb(210 0% 50%); /* darker blue */
}

/* Easy tints and shades */
.tint { background: hwb(120 40% 0%); } /* add white */
.shade { background: hwb(120 0% 40%); } /* add black */

HWB (Hue, Whiteness, Blackness) is an intuitive way to lighten or darken colors.

lab() / lch()

New

/* lab(lightness a b) - perceptually uniform */
.element {
  color: lab(50% 50 50);
}

/* lch(lightness chroma hue) - polar LAB */
.element {
  color: lch(50% 100 210);
}

/* oklab() / oklch() - improved LAB */
.modern {
  color: oklch(70% 0.15 200);
}

Perceptually uniform color spaces for more accurate color manipulation and gradients.

Gradient Functions

Create smooth color transitions and patterns with gradient functions.

linear-gradient()

/* Basic gradients */
.element {
  background: linear-gradient(to right, red, blue);
  background: linear-gradient(to bottom, red, blue);
  background: linear-gradient(45deg, red, blue);
  background: linear-gradient(180deg, red, blue);
}

/* Multiple color stops */
.multi {
  background: linear-gradient(
    to right,
    red 0%,
    yellow 50%,
    blue 100%
  );
}

/* Sharp color transitions */
.stripes {
  background: linear-gradient(
    90deg,
    red 0% 33.33%,
    white 33.33% 66.66%,
    blue 66.66% 100%
  );
}

/* With transparency */
.fade {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0),
    rgba(0,0,0,1)
  );
}

radial-gradient()

/* Basic radial gradient */
.element {
  background: radial-gradient(circle, red, blue);
  background: radial-gradient(ellipse, red, blue);
}

/* Positioned gradients */
.positioned {
  background: radial-gradient(
    circle at top left,
    red,
    blue
  );
  
  background: radial-gradient(
    circle at 30% 40%,
    red,
    blue
  );
}

/* Sized gradients */
.sized {
  background: radial-gradient(
    circle 100px at center,
    red,
    blue
  );
  
  background: radial-gradient(
    ellipse 100px 50px,
    red,
    blue
  );
}

/* Keywords */
.keywords {
  background: radial-gradient(
    closest-side,
    red,
    blue
  );
  /* closest-side, closest-corner, 
     farthest-side, farthest-corner */
}

conic-gradient()

/* Basic conic gradient */
.element {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

/* From angle */
.rotated {
  background: conic-gradient(from 45deg, red, blue);
}

/* Positioned */
.positioned {
  background: conic-gradient(at 30% 40%, red, blue);
}

/* Pie chart */
.pie {
  background: conic-gradient(
    red 0deg 90deg,
    yellow 90deg 180deg,
    green 180deg 270deg,
    blue 270deg 360deg
  );
}

/* Color wheel */
.color-wheel {
  background: conic-gradient(
    hsl(0 100% 50%),
    hsl(60 100% 50%),
    hsl(120 100% 50%),
    hsl(180 100% 50%),
    hsl(240 100% 50%),
    hsl(300 100% 50%),
    hsl(360 100% 50%)
  );
  border-radius: 50%;
}

repeating-linear-gradient()

/* Repeating patterns */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    red 0px,
    red 10px,
    white 10px,
    white 20px
  );
}

/* Diagonal lines */
.lines {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(255,255,255,.1) 10px,
    rgba(255,255,255,.1) 20px
  );
}

Transform Functions

Functions for 2D and 3D transformations.

2D Transforms

/* Translate */
.element {
  transform: translate(50px, 100px);
  transform: translateX(50px);
  transform: translateY(100px);
}

/* Scale */
.scale {
  transform: scale(1.5);
  transform: scale(1.5, 0.5);
  transform: scaleX(1.5);
  transform: scaleY(0.5);
}

/* Rotate */
.rotate {
  transform: rotate(45deg);
  transform: rotate(0.25turn);
}

/* Skew */
.skew {
  transform: skew(10deg, 5deg);
  transform: skewX(10deg);
  transform: skewY(5deg);
}

/* Multiple transforms */
.combined {
  transform: translate(50px, 100px) rotate(45deg) scale(1.2);
}

3D Transforms

/* 3D Translate */
.element {
  transform: translate3d(50px, 100px, 75px);
  transform: translateZ(75px);
}

/* 3D Rotate */
.rotate-3d {
  transform: rotateX(45deg);
  transform: rotateY(45deg);
  transform: rotateZ(45deg);
  transform: rotate3d(1, 1, 1, 45deg);
}

/* 3D Scale */
.scale-3d {
  transform: scale3d(1.5, 1.5, 1.5);
  transform: scaleZ(2);
}

/* Perspective */
.container {
  perspective: 1000px;
}

.card {
  transform: perspective(1000px) rotateY(45deg);
}

/* Matrix */
.matrix {
  transform: matrix(1, 0, 0, 1, 50, 100);
  transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,50,100,0,1);
}

Filter Functions

Apply graphical effects like blur, brightness, and color manipulation.

Common Filters

/* Blur */
.element {
  filter: blur(5px);
}

/* Brightness */
.bright {
  filter: brightness(1.5); /* 150% brightness */
  filter: brightness(0.5); /* 50% brightness */
}

/* Contrast */
.contrast {
  filter: contrast(1.5); /* 150% contrast */
}

/* Grayscale */
.grayscale {
  filter: grayscale(100%);
  filter: grayscale(0.5); /* 50% gray */
}

/* Hue Rotate */
.hue-rotate {
  filter: hue-rotate(90deg);
}

/* Invert */
.invert {
  filter: invert(100%);
}

/* Opacity */
.opacity {
  filter: opacity(50%);
}

/* Saturate */
.saturate {
  filter: saturate(200%); /* 200% saturation */
}

/* Sepia */
.sepia {
  filter: sepia(100%);
}

/* Drop Shadow */
.drop-shadow {
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
}

/* Multiple filters */
.combined {
  filter: blur(2px) brightness(1.2) contrast(1.1);
}

Note: drop-shadow() applies to the actual shape of the element (respects transparency), while box-shadow creates a rectangular shadow.

backdrop-filter()

/* Apply filter to background */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

/* Frosted glass effect */
.frosted {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Dark glass */
.dark-glass {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px) brightness(0.8);
}

Shape Functions

Create complex shapes and clipping paths.

clip-path()

/* Basic shapes */
.circle {
  clip-path: circle(50%);
}

.ellipse {
  clip-path: ellipse(50% 30%);
}

.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.hexagon {
  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
}

/* Positioned shapes */
.positioned {
  clip-path: circle(50% at 30% 40%);
  clip-path: ellipse(40% 30% at center);
}

/* Inset */
.inset {
  clip-path: inset(10px 20px 30px 40px round 10px);
}

/* SVG path */
.svg-clip {
  clip-path: path('M 0,0 L 100,0 L 50,100 Z');
}

circle(50%)

triangle

hexagon

angle

shape-outside()

/* Text wrapping around shapes */
.float-circle {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: circle(50%);
  clip-path: circle(50%);
}

.float-polygon {
  float: left;
  shape-outside: polygon(0 0, 100% 0, 100% 100%);
}

/* Using images */
.float-image {
  float: left;
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  shape-margin: 20px;
}

Defines shapes for text wrapping around floated elements.

Variable & Environment Functions

Access custom properties and environment variables.

var()

/* Basic usage */
:root {
  --primary-color: #0066ff;
  --spacing: 1rem;
}

.element {
  color: var(--primary-color);
  padding: var(--spacing);
}

/* Fallback values */
.element {
  color: var(--primary-color, blue);
  padding: var(--spacing, 1rem);
}

/* Nested variables */
:root {
  --base-size: 16px;
  --large-size: calc(var(--base-size) * 2);
}

/* Component-scoped variables */
.card {
  --card-padding: 2rem;
  --card-bg: white;
  
  padding: var(--card-padding);
  background: var(--card-bg);
}

.card.large {
  --card-padding: 3rem;
}

env()

/* Safe area insets (iOS) */
.header {
  padding-top: env(safe-area-inset-top, 20px);
}

.content {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

.footer {
  padding-bottom: env(safe-area-inset-bottom, 20px);
}

/* Viewport segments */
.element {
  top: env(viewport-segment-top 0 0, 0);
  left: env(viewport-segment-left 0 0, 0);
}

Access environment variables like safe area insets for mobile devices.

attr()

/* Use HTML attribute values */
.tooltip::after {
  content: attr(data-tooltip);
}

/* With fallback */
.element::before {
  content: attr(data-label, "Default");
}

/* Planned for future (limited support) */
.element {
  width: attr(data-width px, 100px);
  color: attr(data-color color, blue);
}

Note: Currently attr() only works with the content property. Type support is planned but not widely available.

Math Functions

Advanced mathematical operations and comparisons.

Comparison Functions

New

/* min() - smallest value */
.element {
  width: min(100%, 1200px);
  font-size: min(5vw, 3rem);
}

/* max() - largest value */
.element {
  width: max(300px, 50%);
  padding: max(1rem, 3vw);
}

/* clamp() - bounded value */
.element {
  font-size: clamp(1rem, 2.5vw, 3rem);
  width: clamp(300px, 50%, 1200px);
}

Trigonometric Functions

New

/* sin(), cos(), tan() */
.element {
  rotate: sin(45deg);
  scale: cos(30deg);
}

/* asin(), acos(), atan(), atan2() */
.element {
  rotate: atan2(1, 1); /* returns 45deg */
}

/* Practical example: circular motion */
.item {
  --angle: 45deg;
  --radius: 100px;
  
  left: calc(50% + cos(var(--angle)) * var(--radius));
  top: calc(50% + sin(var(--angle)) * var(--radius));
}

Exponential Functions

New

/* pow(base, exponent) */
.element {
  width: calc(pow(2, 3) * 10px); /* 2³ × 10px = 80px */
}

/* sqrt() */
.element {
  width: calc(sqrt(144) * 1px); /* 12px */
}

/* hypot(a, b) - Pythagorean theorem */
.element {
  width: calc(hypot(3, 4) * 10px); /* 50px */
}

/* log(), exp() */
.element {
  opacity: log(2.71828); /* natural log */
  scale: exp(1); /* e¹ */
}

Rounding Functions

New

/* round(value, interval) */
.element {
  width: round(15.6px, 5px); /* rounds to 15px */
  width: round(nearest, 15.6px, 5px); /* 15px */
  width: round(up, 15.6px, 5px); /* 20px */
  width: round(down, 15.6px, 5px); /* 15px */
}

/* mod() - modulo */
.element {
  /* Returns remainder */
  width: mod(18px, 5px); /* 3px */
}

/* rem() - remainder */
.element {
  width: rem(18px, 5px); /* 3px */
}

Sign-related Functions

New

/* abs() - absolute value */
.element {
  margin: calc(abs(-20px)); /* 20px */
}

/* sign() - returns -1, 0, or 1 */
.element {
  --value: -5;
  transform: translateX(calc(sign(var(--value)) * 10px));
}