CSS Built-In Functions

🎨 Color functions

FunctionExamplePurpose

rgb()	rgb(255 0 0)	RGB color
rgba()	rgba(255, 0, 0, 0.5)	RGB + transparency

📐 Math / sizing functions

These are especially important in modern responsive CSS.

FunctionExamplePurpose

calc()	calc(100% - 40px)	Calculate values
min()	min(500px, 100%)	Choose smallest value
max()	max(300px, 50%)	Choose largest value
clamp()	clamp(16px, 2vw, 24px)	Minimum → preferred → maximum

🔤 String / attribute functions

FunctionExamplePurpose

attr()	content: attr(data-name)	Get HTML attribute value
url()	background: url("image.jpg")	Reference a resource

📱 Responsive / conditional functions

FunctionExamplePurpose

var()	color: var(--primary)	Use CSS custom property
env()	padding: env(safe-area-inset-top)	Browser/environment values
if()	width: if(...)	Conditional CSS values (newer CSS)

🖼️ Image / gradient functions

FunctionExamplePurpose

linear-gradient()	linear-gradient(red, blue)	Linear gradient
radial-gradient()	radial-gradient(red, blue)	Radial gradient
conic-gradient()	conic-gradient(red, blue)	Conic gradient
repeating-linear-gradient()	repeating-linear-gradient(...)	Repeating linear gradient
repeating-radial-gradient()	repeating-radial-gradient(...)	Repeating radial gradient
image()	image(url(...))	Image fallback/options
image-set()	image-set(...)	Resolution-dependent images

🔄 Transform functions

Used with transform:

transform: translate(20px, 10px);
transform: scale(1.2);
transform: rotate(45deg);
transform: skew(10deg);

Functions include:

• translate()
• translateX()
• translateY()
• translateZ()
• translate3d()
• scale()
• scaleX()
• scaleY()
• scaleZ()
• scale3d()
• rotate()
• rotateX()
• rotateY()
• rotateZ()
• skew()
• skewX()
• skewY()
• matrix()
• matrix3d()
• perspective()

⭐ The ones you should learn first

Since you're working with modern CSS/SCSS, I'd prioritize:

var()
calc()
min()
max()
clamp()
rgb()
hsl()
linear-gradient()
attr()
url()

 

Especially calc(), min(), max(), and clamp(). They are extremely useful for responsive layouts.

For example:

font-size: clamp(1rem, 2vw, 2rem);

means:

never smaller than 1rem → ideally 2vw → never larger than 2rem.