CSS Functions Tutorial

Master modern CSS functions with comprehensive examples and practical implementations

What Are CSS Functions?

CSS functions are special operations that allow you to dynamically calculate values, manipulate colors, create complex shapes, apply filters, and much more. They extend the power of CSS beyond static values.

Key Benefits:

Dynamic value calculations with calc()
Consistent theming with CSS variables via var()
Responsive design with min(), max(), and clamp()
Visual effects with filter and transform functions
Complex gradients and shapes
Automatic counters for content

CSS Functions Implementation

Complete Example Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Functions Tutorial</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    :root {
      --primary-color: #3498db;
      --secondary-color: #2ecc71;
      --accent-color: #e74c3c;
      --dark-color: #2c3e50;
      --light-color: #ecf0f1;
      --text-color: #333;
      --text-light: #fff;
      --spacing: 1rem;
      --border-radius: 8px;
    }
    
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      color: var(--text-color);
      background-color: var(--light-color);
      padding: var(--spacing);
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    header {
      text-align: center;
      margin-bottom: calc(var(--spacing) * 2);
      padding: calc(var(--spacing) * 1.5);
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: var(--text-light);
      border-radius: var(--border-radius);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      font-size: min(4vw, 2.5rem);
      margin-bottom: calc(var(--spacing) / 2);
    }
    
    h2 {
      font-size: min(3vw, 1.8rem);
      margin: calc(var(--spacing) * 1.5) 0 var(--spacing);
      color: var(--dark-color);
      padding-bottom: calc(var(--spacing) / 2);
      border-bottom: 2px solid var(--primary-color);
    }
    
    h3 {
      font-size: min(2.5vw, 1.3rem);
      margin: var(--spacing) 0 calc(var(--spacing) / 2);
      color: var(--primary-color);
    }
    
    .example {
      background: white;
      border-radius: var(--border-radius);
      padding: var(--spacing);
      margin-bottom: calc(var(--spacing) * 1.5);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
    
    .demo {
      border: 2px solid #e9ecef;
      border-radius: var(--border-radius);
      padding: var(--spacing);
      margin: var(--spacing) 0;
      background: #f8f9fa;
      min-height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--spacing);
    }
    
    .code-block {
      background: #2d2d2d;
      color: #f8f8f2;
      padding: var(--spacing);
      border-radius: var(--border-radius);
      overflow-x: auto;
      margin: var(--spacing) 0;
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 0.9rem;
    }
    
    .btn {
      display: inline-block;
      padding: calc(var(--spacing) / 2) var(--spacing);
      background: var(--primary-color);
      color: var(--text-light);
      border: none;
      border-radius: calc(var(--border-radius) / 2);
      cursor: pointer;
      font-size: 0.9rem;
      margin-right: calc(var(--spacing) / 2);
      transition: background-color 0.3s;
    }
    
    .btn:hover {
      background: #2980b9;
    }
    
    .btn-copy {
      background: var(--secondary-color);
    }
    
    .btn-copy:hover {
      background: #27ae60;
    }
    
    /* Example 1: calc() function */
    .calc-demo {
      width: calc(100% - 100px);
      height: 80px;
      background: var(--primary-color);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: var(--border-radius);
      margin: 0 auto;
      transition: width 0.3s ease;
    }
    
    .calc-demo:hover {
      width: calc(100% - 50px);
    }
    
    /* Example 2: var() function */
    .var-demo {
      --box-size: 100px;
      --box-color: var(--accent-color);
      
      width: var(--box-size);
      height: var(--box-size);
      background-color: var(--box-color);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: var(--border-radius);
      margin: 0 auto;
      transition: all 0.3s ease;
    }
    
    .var-demo:hover {
      --box-size: 120px;
      --box-color: #c0392b;
    }
    
    /* Example 3: min() and max() functions */
    .minmax-container {
      display: flex;
      gap: var(--spacing);
      flex-wrap: wrap;
    }
    
    .min-demo {
      width: min(100%, 400px);
      height: 100px;
      background: var(--primary-color);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: var(--border-radius);
    }
    
    .max-demo {
      width: max(50%, 300px);
      height: 100px;
      background: var(--secondary-color);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: var(--border-radius);
    }
    
    /* Example 4: clamp() function */
    .clamp-demo {
      font-size: clamp(1rem, 2.5vw, 2rem);
      padding: clamp(0.5rem, 2vw, 1.5rem);
      background: var(--accent-color);
      color: white;
      text-align: center;
      border-radius: var(--border-radius);
      margin: 0 auto;
      width: clamp(200px, 50%, 400px);
    }
    
    /* Example 5: attr() function */
    .attr-demo {
      position: relative;
      padding: var(--spacing);
      border: 2px dashed #ccc;
      border-radius: var(--border-radius);
      margin: 0 auto;
      width: 80%;
    }
    
    .attr-demo::before {
      content: attr(data-label);
      position: absolute;
      top: -10px;
      left: 10px;
      background: var(--dark-color);
      color: white;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 0.8rem;
    }
    
    /* Example 6: url() function */
    .url-demo {
      width: 200px;
      height: 200px;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%233498db"/><circle cx="50" cy="50" r="40" fill="%23e74c3c"/></svg>');
      background-size: cover;
      border-radius: var(--border-radius);
      margin: 0 auto;
    }
    
    /* Example 7: linear-gradient() function */
    .gradient-demo {
      width: 200px;
      height: 200px;
      background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--accent-color));
      border-radius: var(--border-radius);
      margin: 0 auto;
      transition: all 0.5s ease;
    }
    
    .gradient-demo:hover {
      background: linear-gradient(135deg, var(--accent-color), var(--primary-color), var(--secondary-color));
      transform: scale(1.05);
    }
    
    /* Example 8: radial-gradient() function */
    .radial-demo {
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, var(--primary-color), var(--dark-color));
      border-radius: 50%;
      margin: 0 auto;
    }
    
    /* Example 9: filter functions */
    .filter-container {
      display: flex;
      gap: var(--spacing);
      justify-content: center;
      flex-wrap: wrap;
    }
    
    .filter-demo {
      width: 100px;
      height: 100px;
      background: var(--primary-color);
      border-radius: var(--border-radius);
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }
    
    .blur {
      filter: blur(2px);
    }
    
    .brightness {
      filter: brightness(150%);
    }
    
    .contrast {
      filter: contrast(200%);
    }
    
    .hue-rotate {
      filter: hue-rotate(90deg);
    }
    
    /* Example 10: transform functions */
    .transform-demo {
      width: 100px;
      height: 100px;
      background: var(--accent-color);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: var(--border-radius);
      margin: 0 auto;
      transition: transform 0.5s ease;
    }
    
    .transform-demo:hover {
      transform: rotate(45deg) scale(1.2) translate(0, -10px);
    }
    
    /* Example 11: counter functions */
    .counter-demo {
      counter-reset: section;
      padding: var(--spacing);
      background: #f8f9fa;
      border-radius: var(--border-radius);
    }
    
    .counter-demo h4 {
      margin: calc(var(--spacing) / 2) 0;
    }
    
    .counter-demo h4::before {
      counter-increment: section;
      content: "Section " counter(section) ": ";
      color: var(--primary-color);
      font-weight: bold;
    }
    
    /* Example 12: color functions */
    .color-demo {
      display: flex;
      gap: var(--spacing);
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .color-box {
      width: 80px;
      height: 80px;
      border-radius: var(--border-radius);
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 0.7rem;
      text-align: center;
    }
    
    .rgb-demo {
      background: rgb(52, 152, 219);
    }
    
    .hsl-demo {
      background: hsl(204, 70%, 53%);
    }
    
    /* Example 13: shape functions */
    .shape-demo {
      width: 200px;
      height: 150px;
      background: var(--primary-color);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    }
    
    /* Example 14: env() function */
    .env-demo {
      padding: var(--spacing);
      background: #f0f0f0;
      border-radius: var(--border-radius);
      margin: 0 auto;
      width: 80%;
      text-align: center;
    }
    
    .env-demo::before {
      content: "env() function demo - safe-area-inset-top: env(safe-area-inset-top)";
      color: var(--dark-color);
    }
    
    /* Example 15: trigonometric functions */
    .trig-demo {
      width: 200px;
      height: 200px;
      background: var(--primary-color);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: var(--border-radius);
      margin: 0 auto;
      transform: rotate(sin(45deg) * 45deg);
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>CSS Functions Tutorial</h1>
      <p>Master modern CSS functions with practical examples</p>
    </header>
    
    <section class="example">
      <h2>1. calc() Function</h2>
      <p>Performs calculations to determine CSS property values.</p>
      
      <div class="demo">
        <div class="calc-demo">width: calc(100% - 100px)</div>
      </div>
      
      <div class="code-block">
        .calc-demo {
          width: calc(100% - 100px);
          transition: width 0.3s ease;
        }
        
        .calc-demo:hover {
          width: calc(100% - 50px);
        }
      </div>
    </section>
    
    <section class="example">
      <h2>2. var() Function</h2>
      <p>References custom properties (CSS variables) for reuse throughout your stylesheet.</p>
      
      <div class="demo">
        <div class="var-demo">CSS Variable</div>
      </div>
      
      <div class="code-block">
        :root {
          --box-size: 100px;
          --box-color: #e74c3c;
        }
        
        .var-demo {
          width: var(--box-size);
          height: var(--box-size);
          background-color: var(--box-color);
          transition: all 0.3s ease;
        }
        
        .var-demo:hover {
          --box-size: 120px;
          --box-color: #c0392b;
        }
      </div>
    </section>
    
    <section class="example">
      <h2>3. min() and max() Functions</h2>
      <p>Sets a value as the minimum or maximum of a list of values, useful for responsive design.</p>
      
      <div class="demo">
        <div class="minmax-container">
          <div class="min-demo">min(100%, 400px)</div>
          <div class="max-demo">max(50%, 300px)</div>
        </div>
      </div>
      
      <div class="code-block">
        .min-demo {
          width: min(100%, 400px); /* Will be at most 400px */
        }
        
        .max-demo {
          width: max(50%, 300px); /* Will be at least 300px */
        }
      </div>
    </section>
    
    <section class="example">
      <h2>4. clamp() Function</h2>
      <p>Clamps a value between an upper and lower bound, perfect for responsive typography.</p>
      
      <div class="demo">
        <div class="clamp-demo">
          Responsive text with clamp()
        </div>
      </div>
      
      <div class="code-block">
        .clamp-demo {
          font-size: clamp(1rem, 2.5vw, 2rem);
          width: clamp(200px, 50%, 400px);
        }
      </div>
    </section>
    
    <section class="example">
      <h2>5. attr() Function</h2>
      <p>Retrieves the value of an attribute of the selected element.</p>
      
      <div class="demo">
        <div class="attr-demo" data-label="Demo Label">
          This element has a data-label attribute
        </div>
      </div>
      
      <div class="code-block">
        .attr-demo::before {
          content: attr(data-label);
          /* Other styling properties */
        }
      </div>
    </section>
    
    <section class="example">
      <h2>6. url() Function</h2>
      <p>References a file, such as an image, font, or gradient, using a URL.</p>
      
      <div class="demo">
        <div class="url-demo"></div>
      </div>
      
      <div class="code-block">
        .url-demo {
          background-image: url('data:image/svg+xml;utf8,<svg...></svg>');
        }
      </div>
    </section>
    
    <section class="example">
      <h2>7. linear-gradient() Function</h2>
      <p>Creates a linear gradient as a background image.</p>
      
      <div class="demo">
        <div class="gradient-demo"></div>
      </div>
      
      <div class="code-block">
        .gradient-demo {
          background: linear-gradient(45deg, #3498db, #2ecc71, #e74c3c);
          transition: all 0.5s ease;
        }
        
        .gradient-demo:hover {
          background: linear-gradient(135deg, #e74c3c, #3498db, #2ecc71);
        }
      </div>
    </section>
    
    <section class="example">
      <h2>8. radial-gradient() Function</h2>
      <p>Creates a radial gradient as a background image.</p>
      
      <div class="demo">
        <div class="radial-demo"></div>
      </div>
      
      <div class="code-block">
        .radial-demo {
          background: radial-gradient(circle, #3498db, #2c3e50);
        }
      </div>
    </section>
    
    <section class="example">
      <h2>9. Filter Functions</h2>
      <p>Applies graphical effects like blurring or color shifting to elements.</p>
      
      <div class="demo">
        <div class="filter-container">
          <div class="filter-demo blur">Blur</div>
          <div class="filter-demo brightness">Brightness</div>
          <div class="filter-demo contrast">Contrast</div>
          <div class="filter-demo hue-rotate">Hue</div>
        </div>
      </div>
      
      <div class="code-block">
        .blur {
          filter: blur(2px);
        }
        
        .brightness {
          filter: brightness(150%);
        }
        
        .contrast {
          filter: contrast(200%);
        }
        
        .hue-rotate {
          filter: hue-rotate(90deg);
        }
      </div>
    </section>
    
    <section class="example">
      <h2>10. Transform Functions</h2>
      <p>Modifies the coordinate space of the CSS visual formatting model.</p>
      
      <div class="demo">
        <div class="transform-demo">Hover me</div>
      </div>
      
      <div class="code-block">
        .transform-demo {
          transition: transform 0.5s ease;
        }
        
        .transform-demo:hover {
          transform: rotate(45deg) scale(1.2) translate(0, -10px);
        }
      </div>
    </section>
    
    <section class="example">
      <h2>11. Counter Functions</h2>
      <p>Implements counters for automatic numbering of elements.</p>
      
      <div class="demo">
        <div class="counter-demo">
          <h4>Introduction</h4>
          <h4>Main Content</h4>
          <h4>Conclusion</h4>
        </div>
      </div>
      
      <div class="code-block">
        .counter-demo {
          counter-reset: section;
        }
        
        .counter-demo h4::before {
          counter-increment: section;
          content: "Section " counter(section) ": ";
        }
      </div>
    </section>
    
    <section class="example">
      <h2>12. Color Functions</h2>
      <p>Defines colors using different color models.</p>
      
      <div class="demo">
        <div class="color-demo">
          <div class="color-box rgb-demo">RGB</div>
          <div class="color-box hsl-demo">HSL</div>
        </div>
      </div>
      
      <div class="code-block">
        .rgb-demo {
          background: rgb(52, 152, 219);
        }
        
        .hsl-demo {
          background: hsl(204, 70%, 53%);
        }
      </div>
    </section>
    
    <section class="example">
      <h2>13. Shape Functions</h2>
      <p>Defines shapes for clipping or positioning content.</p>
      
      <div class="demo">
        <div class="shape-demo">Clip Path</div>
      </div>
      
      <div class="code-block">
        .shape-demo {
          clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        }
      </div>
    </section>
    
    <section class="example">
      <h2>14. env() Function</h2>
      <p>Accesses environment variables defined by the user agent or operating system.</p>
      
      <div class="demo">
        <div class="env-demo"></div>
      </div>
      
      <div class="code-block">
        .env-demo::before {
          content: "safe-area-inset-top: " env(safe-area-inset-top);
        }
      </div>
    </section>
    
    <section class="example">
      <h2>15. Trigonometric Functions</h2>
      <p>Performs trigonometric calculations (new in CSS Values and Units Module Level 4).</p>
      
      <div class="demo">
        <div class="trig-demo">sin(45deg)</div>
      </div>
      
      <div class="code-block">
        .trig-demo {
          transform: rotate(sin(45deg) * 45deg);
        }
      </div>
    </section>
  </div>
</body>
</html>

Key CSS Functions Concepts

Mathematical Functions

calc() - performs calculations
min() - selects the smallest value
max() - selects the largest value
clamp() - restricts a value between min and max
Trigonometric functions (new in CSS4)

Color & Visual Functions

rgb(), hsl() - color definitions
linear-gradient() - linear color gradients
radial-gradient() - radial color gradients
url() - references external resources
Filter functions for visual effects

CSS Functions Best Practices

Do's

Use calc() for dynamic spacing and sizing
Leverage clamp() for responsive typography
Create CSS variables for consistent theming
Use gradient functions for modern backgrounds
Combine functions for powerful effects

Don'ts

Don't overcomplicate calculations unnecessarily
Avoid complex functions where simple values would suffice
Don't forget browser compatibility for newer functions
Avoid using too many nested functions
Don't use functions for values that won't change

Real-World Applications

Where to Use CSS Functions

Responsive Layouts: Use min(), max(), and clamp() for fluid designs
Theming: CSS variables with var() for consistent design systems
Dynamic Sizing: calc() for elements that need to adapt to different contexts
Visual Effects: Gradient and filter functions for modern UI elements
Complex Shapes: Shape functions for non-rectangular designs
Automatic Numbering: Counter functions for lists and sections

Browser Support & Fallbacks

Compatibility Information

Most CSS functions have excellent browser support, but it's important to provide fallbacks for newer functions.

calc(), var(), and gradient functions have widespread support
min(), max(), and clamp() are supported in modern browsers
Trigonometric functions are very new and have limited support
Use @supports rule for feature detection
Provide static fallback values for critical styling

Ready to Experiment with CSS Functions?

Try these CSS Functions examples in our interactive editor. Modify the code, see the results in real-time, and practice implementing functions in your projects.

< Previous Next >