ForgeLearn
|$ curl https://forge-ai.dev/api/markdown?path=docs/css/functions
$cat docs/css-functions.md
updated Recently·11 min read·published

CSS Functions

◆CSS◆Functions◆Fundamentals◆Intermediate
Introduction

CSS functions are built-in expressions that compute values, manipulate colors, apply filters, and define shapes. They turn CSS from a declarative language into a dynamic one — letting you calculate dimensions, blend colors, and create complex visual effects without JavaScript.

Modern CSS includes dozens of functions organized into categories: math, color, shape, filter, transform, and comparison. Mastering them reduces your reliance on preprocessors and JavaScript for runtime calculations.

functions-overview.css
CSS
1.element {
2 /* Math */
3 width: clamp(280px, 50%, 800px);
4 font-size: calc(1rem + 2vw);
5
6 /* Color */
7 background: color-mix(in srgb, #00FF41 60%, #0D0D0D);
8
9 /* Shape */
10 clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
11
12 /* Filter */
13 filter: brightness(1.2) contrast(1.1);
14}
Color Functions

CSS provides multiple color functions beyond the familiar hex notation. Each serves different use cases for color manipulation, readability, and accessibility.

rgb() and rgba()

color-rgb.css
CSS
1.element {
2 color: rgb(255, 255, 255); /* white */
3 color: rgba(0, 255, 65, 0.8); /* green at 80% opacity */
4 color: rgb(0 255 65 / 0.5); /* modern syntax with spaces */
5}

hsl()

HSL (Hue, Saturation, Lightness) is more intuitive for creating color palettes. Hue is an angle on the color wheel (0-360), saturation and lightness are percentages.

color-hsl.css
CSS
1.element {
2 color: hsl(120, 100%, 50%); /* pure green */
3 color: hsl(240, 80%, 60%); /* vibrant blue */
4 color: hsl(0, 0%, 90%); /* light gray */
5 color: hsl(120 100% 50% / 0.3); /* with alpha */
6}
7
8/* Shifting hue creates color variations */
9.success { background: hsl(120, 50%, 30%); }
10.error { background: hsl(0, 60%, 50%); }
11.warning { background: hsl(40, 100%, 50%); }
12.info { background: hsl(200, 80%, 50%); }

hwb()

HWB (Hue, Whiteness, Blackness) is similar to HSL but often more intuitive for mixing colors with white or black.

color-hwb.css
CSS
1.element {
2 color: hwb(120, 0%, 0%); /* pure green */
3 color: hwb(120, 40%, 0%); /* pastel green (white added) */
4 color: hwb(120, 0%, 40%); /* dark green (black added) */
5}

color-mix()

The color-mix() function blends two colors in a given color space. This is revolutionary for theming and design systems.

color-mix.css
CSS
1.element {
2 /* Mix in srgb space */
3 background: color-mix(in srgb, #00FF41 60%, #0D0D0D);
4
5 /* Create a tint variant */
6 --primary: #00FF41;
7 --primary-light: color-mix(in srgb, var(--primary), white 30%);
8 --primary-dark: color-mix(in srgb, var(--primary), black 40%);
9
10 /* Hover states */
11 --btn-bg: #00FF41;
12 --btn-hover: color-mix(in srgb, var(--btn-bg), black 15%);
13}

color-contrast()

color-contrast.css
CSS
1.element {
2 /* Picks the color with best contrast from the list */
3 color: color-contrast(var(--bg) vs white, black, #00FF41);
4}
Math Functions

Math functions enable dynamic calculations directly in CSS, removing the need for preprocessor arithmetic in most cases.

calc()

The most fundamental math function. Supports addition, subtraction, multiplication, and division of mixed units.

calc.css
CSS
1.element {
2 width: calc(100% - 240px); /* subtract sidebar width */
3 height: calc(100vh - 80px); /* viewport minus header */
4 padding: calc(1rem + 0.5vw); /* responsive padding */
5 font-size: calc(14px + 0.25vw); /* fluid typography */
6 --spacing: calc(var(--base) * 2); /* works with custom properties */
7}

min() and max()

min-max.css
CSS
1.element {
2 /* Never wider than 800px, but can be smaller */
3 width: min(100%, 800px);
4
5 /* At least 300px, grows as space allows */
6 width: max(300px, 50%);
7
8 /* Responsive font: at least 16px, up to 5vw */
9 font-size: max(16px, 5vw);
10}

clamp()

clamp(MIN, PREFERRED, MAX) is the most versatile math function. It clamps a value between a minimum and maximum, with a preferred value in between.

clamp.css
CSS
1.element {
2 /* Fluid typography */
3 font-size: clamp(1rem, 2.5vw, 2rem);
4
5 /* Responsive container */
6 width: clamp(280px, 80%, 1200px);
7
8 /* Responsive grid */
9 grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 30%, 400px), 1fr));
10
11 /* Fluid spacing */
12 padding: clamp(1rem, 3vw, 3rem);
13 gap: clamp(8px, 2vw, 24px);
14}
preview

round(), mod(), rem()

Newer math functions for rounding and modular arithmetic. Useful for grid systems and alignment.

round-mod-rem.css
CSS
1.element {
2 /* Round to nearest multiple */
3 width: round(to-nearest, 100vw / 3, 8px); /* nearest 8px */
4
5 /* Modulo and remainder */
6 margin: mod(17px, 5px); /* 2px */
7 padding: rem(17px, 5px); /* 2px */
8}
Shape Functions

Shape functions define geometric shapes used with clip-path, shape-outside, and offset-path.

circle()

shape-circle.css
CSS
1.element {
2 clip-path: circle(50%); /* perfect circle */
3 clip-path: circle(30% at 50% 50%); /* circle at center */
4 shape-outside: circle(50%); /* text wraps around circle */
5}

ellipse()

shape-ellipse.css
CSS
1.element {
2 clip-path: ellipse(40% 50% at 50% 50%); /* stretched ellipse */
3}

inset()

shape-inset.css
CSS
1.element {
2 clip-path: inset(20px); /* 20px inset from all sides */
3 clip-path: inset(10px 20px 30px 40px); /* top right bottom left */
4 clip-path: inset(10% round 8px); /* with rounded corners */
5}

polygon()

shape-polygon.css
CSS
1.element {
2 /* Triangle */
3 clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
4
5 /* Hexagon */
6 clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
7
8 /* Chevron */
9 clip-path: polygon(0% 0%, 100% 0%, 80% 50%, 100% 100%, 0% 100%);
10}
preview

path()

shape-path.css
CSS
1.element {
2 /* Custom SVG path */
3 clip-path: path("M 0 0 L 100 0 L 100 100 L 0 100 Z");
4
5 /* Wavy clip */
6 clip-path: path("M0,0 Q10,20 20,10 T40,20 T60,10 T80,20 T100,10 L100,100 L0,100 Z");
7}
Filter Functions

Filter functions apply visual effects like blur, brightness, contrast, and color shifts. They work on images, backgrounds, and entire elements.

filter-functions.css
CSS
1.element {
2 /* Single filters */
3 filter: blur(4px);
4 filter: brightness(1.5);
5 filter: contrast(200%);
6 filter: grayscale(100%);
7 filter: hue-rotate(90deg);
8 filter: invert(100%);
9 filter: opacity(50%);
10 filter: saturate(200%);
11 filter: sepia(80%);
12 filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.5));
13
14 /* Combined filters */
15 filter: brightness(1.2) contrast(1.1) saturate(1.3);
16
17 /* Hover transition */
18 transition: filter 0.3s ease;
19}
20
21.element:hover {
22 filter: brightness(0.8) grayscale(20%);
23}
preview
Transform Functions

Transform functions modify the coordinate space of an element, enabling rotation, scaling, translation, and skewing in 2D and 3D.

transform-functions.css
CSS
1.element {
2 /* 2D transforms */
3 transform: translateX(20px);
4 transform: translateY(-50%);
5 transform: translate(20px, -50%);
6 transform: scale(1.5);
7 transform: scaleX(0.5);
8 transform: rotate(45deg);
9 transform: skew(10deg, 5deg);
10
11 /* 3D transforms */
12 transform: perspective(800px) rotateY(45deg);
13 transform: translateZ(50px);
14
15 /* Multiple transforms (applied right-to-left) */
16 transform: scale(1.1) rotate(5deg) translateY(-4px);
17
18 /* With transform-origin */
19 transform-origin: top left;
20 transform: rotate(10deg);
21}
22
23/* Performance: prefer transform over positional properties */
24.element {
25 transition: transform 0.3s ease;
26}
27.element:hover {
28 transform: translateY(-4px) scale(1.02);
29}
preview
Comparison Functions

Modern CSS includes dedicated comparison functions that simplify conditional sizing and theming.

comparison-functions.css
CSS
1.root {
2 --container-width: min(1200px, 100% - 48px);
3 --font-base: max(16px, 1rem);
4 --padding: clamp(16px, 3vw, 48px);
5 --column-count: clamp(1, (100% - 320px) / 200px, 4);
6}
7
8/* min() - picks the smallest value */
9.sidebar {
10 width: min(300px, 30%);
11}
12
13/* max() - picks the largest value */
14.content {
15 width: max(60%, 640px);
16}
17
18/* clamp() - min, preferred, max */
19.responsive-text {
20 font-size: clamp(1rem, 1rem + 1vw, 1.5rem);
21}
Mixing Functions

The mixing functions — color-mix, cross-fade, and mix-blend-mode — enable compositing and blending directly in CSS.

1/* color-mix: blend two colors */2.alert {3  background: color-mix(in srgb, var(--error) 80%, white);4  border: 1px solid color-mix(in srgb, var(--error), black 20%);5}6 7/* cross-fade: blend two images */8.hero {9  background: cross-fade(10    url(bg-dark.jpg),11    url(bg-overlay.png) 50%12  );13}14 15/* mix-blend-mode on the element */16.overlay {17  mix-blend-mode: multiply;18  mix-blend-mode: screen;19  mix-blend-mode: overlay;20  mix-blend-mode: difference;21}22 23/* background-blend-mode on backgrounds */24.pattern {25  background: url(pattern.png), linear-gradient(black, white);26  background-blend-mode: overlay;27}
Browser Support
FunctionChromeFirefoxSafari
calc(), min(), max(), clamp()✓✓✓
round(), mod(), rem()✓✓✓
color-mix()✓✓✓
color-contrast()——✓
clip-path shape functions✓✓✓
Filter functions✓✓✓
Transform functions (2D)✓✓✓
← PreviousResponsive Design
Next →Scroll Snap
$Blueprint — Engineering Documentation·Section ID: CSS-30·Revision: 1.0
Follow