Introduction

"CSS function" refers to the built-in functions in CSS (such as calc(), var(), rgb(), url(), etc.), which are commonly used for dynamic calculations, color processing, unit conversion, gradients, deformations, filtering, selector control, etc..

Below I will help you systematically summarize and classify all common CSS functions so that you can quickly grasp the key points and high-frequency interview points.

1. Numerical and unit calculation functions (calculation class)

1️⃣ calc()

• Function: Allows dynamic calculations in CSS.

• Common syntax:

  width: calc(100% - 50px);
  padding: calc(var(--gap) / 2);

• ✅ Supports + - * / four arithmetic operations

• ✅ Can mix different units (such as %, px, rem)

2️⃣ min() / max() / clamp()

Dynamic range function in CSS, a responsive design artifact!

Function	Meaning	Example
min(a, b)	Take the minimum value	width: min(100%, 600px);
max(a, b)	Get the maximum value	width: max(50%, 300px);
clamp(min, preferred, max)	Limit range (recommended value)	font-size: clamp(14px, 2vw, 20px);

✅ clamp() is a common technique for responsive fonts and container resizing.

2. Color and gradient functions

1️⃣ rgb() / rgba()

• Color definition (red, green, blue, transparency)

  color: rgba(255, 0, 0, 0.8);

2️⃣ hsl() / hsla()

• Define colors by hue, saturation, and lightness.

  color: hsl(120, 50%, 50%);

3️⃣ color-mix()

• Mix two colors (supported by modern browsers)

  color: color-mix(in srgb, red 30%, blue);

4️⃣ Gradient function

Function	Description	Example
linear-gradient()	Linear gradient	background: linear-gradient(45deg, red, blue);
radial-gradient()	Radial gradient	background: radial-gradient(circle, yellow, red);
conic-gradient()	Conical gradient	background: conic-gradient(from 0deg, red, yellow, green);
repeating-linear-gradient()	Repeating linear gradient	background: repeating-linear-gradient(90deg, red 0, red 10px, blue 10px, blue 20px);

3. Transformation and animation functions (Transform class)

These functions usually appear in the transform: attribute and are used for 2D/3D transformations.

Function	Effect	Example
translate(x, y)	Translation	transform: translate(100px, 50px);
translateX() / translateY() / translateZ()	Single direction translation	transform: translateX(20px);
scale(x, y)	Scale	transform: scale(1.2, 1.2);
rotate(angle)	Rotation	transform: rotate(45deg);
skew(x-angle, y-angle)	skew	transform: skew(10deg, 5deg);
matrix(a, b, c, d, tx, ty)	2D matrix transformation	transform: matrix(1, 0, 0, 1, 50, 50);
perspective(n)	Set perspective depth	transform: perspective(600px) rotateY(30deg);

✅ These functions can be used in combination:

transform: translateX(100px) rotate(45deg) scale(1.2);

4. Filter function (Filter class)

Visual effects for images, backgrounds, elements.

Function	Description	Example
blur(px)	blur	filter: blur(5px);
brightness(%)	Brightness	filter: brightness(120%);
contrast(%)	Contrast	filter: contrast(150%);
grayscale(%)	Grayscale	filter: grayscale(100%);
hue-rotate(deg)	Hue rotation	filter: hue-rotate(90deg);
invert(%)	Invert color	filter: invert(100%);
saturate(%)	Saturation	filter: saturate(200%);
sepia(%)	sepia	filter: sepia(80%);
drop-shadow(x y blur color)	Shadow	filter: drop-shadow(2px 2px 5px gray);

5. Image and resource functions

Function	Purpose	Example
url()	Introduce resources such as images and fonts	background: url('./bg.png');
image-set()	Set images with different resolutions	background: image-set(url(img1.png) 1x, url(img2.png) 2x);
cross-fade()	Image blending (some browsers)	background: cross-fade(url(a.png), url(b.png), 50%);

6. Custom attributes and variable functions

Function	Description	Example
var(--name, fallback)	Call custom variables	color: var(--main-color, black);
env()	System environment variables (such as safe area)	padding-bottom: env(safe-area-inset-bottom);

7. String and counting functions

Function	Purpose	Example
attr()	Get element attribute value	content: attr(data-label);
counter() / counters()	Counter	content: counter(item) ". ";

8. Shape and clipping functions (Shape/Clip-path)

Function	Description	Example
circle()	Circle clipping	clip-path: circle(50% at 50% 50%);
ellipse()	Ellipse clipping	clip-path: ellipse(40% 60% at 50% 50%);
polygon()	Polygon clipping	clip-path: polygon(0 0, 100% 0, 100% 100%);
inset()	Padding clipping	clip-path: inset(10% 10% 10% 10%);
path()	Custom path (svg)	clip-path: path('M10 10 H 90 V 90 H 10 Z');

9. Background and mask functions

Function	Function	Example
repeating-radial-gradient()	Repeating radial gradient	background: repeating-radial-gradient(circle, red, yellow 10px);
mask-image()	Mask image	mask-image: linear-gradient(to right, transparent, black);

10. Time and step function (animation function)

Function	Description	Example
cubic-bezier(x1, y1, x2, y2)	Custom easing function	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
`steps(n, start	end)`	step by step animation	animation-timing-function: steps(5, end);

🔍 Summary of frequently asked questions in interviews

Type	High Frequency Function	Description
Dynamic layout	calc(), clamp(), min()	Responsive calculation
Animation optimization	transform(), opacity + cubic-bezier()	High-performance animation
Color control	rgba(), hsl(), color-mix()	Flexible color matching
Filter effects	filter() series	Image optimization
Variable control	var(), env()	Theme and adaptation
Clip shape	clip-path()	Personalized UI