Functions

🎨 CSS3+ 🟢 Chapter 12 of 49 📂 Phase 04: Values, Units & Colors 📅 2026 Edition

📌 Covered in this chapter: calc() · min() · max() · clamp() · var() · rgb() · hsl() · url() · linear-gradient() · radial-gradient() · Responsive Values · Nesting

Welcome to Chapter 12: Functions — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.

1CSS Functions Overview

CSS functions dynamic values compute chestayi — math, responsive sizing, colors, and images.

2Math Functions — calc(), min(), max(), clamp()

CSS▶ Try in Editor

.sidebar {
  width: calc(100% - 280px);
}

.container {
  width: min(90vw, 1200px);
  padding: max(1rem, 3vw);
}

.title {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

clamp(min, preferred, max) — fluid typography ki perfect. Screen size batti font scale avuthundi without media queries.

3var(), Color Functions & Gradients

CSS

.hero {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: rgb(255 255 255);
}

.card {
  background: radial-gradient(circle at top, #eff6ff, #ffffff);
  border: 1px solid hsl(214 32% 91%);
}

.icon {
  background-image: url('/icons/star.svg');
  width: calc(var(--icon-size, 24) * 1px);
}

Function nesting: calc(clamp(1rem, 2vw, 2rem) + 8px) — valid in modern browsers.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy · CSS Complete Roadmap · Last updated August 2026