CSS Functions Reference 🎨
Complete guide to CSS functions with real-world examples, browser support information, and practical applications. Master everything from basic calculations to advanced modern CSS functions.
Understanding CSS Functions
CSS functions are powerful tools that allow you to perform calculations, manipulate values, and create dynamic styles directly in your CSS. They enable responsive design, dynamic theming, and complex visual effects without JavaScript.
🚀 Function Power
CSS functions can calculate values, transform elements, create gradients, filter visuals, and much more - all while maintaining performance and accessibility.
Key Benefits:
- Dynamic Calculations: Perform math operations in CSS
- Responsive Design: Create fluid layouts and typography
- Performance: Hardware-accelerated transformations
- Maintainability: Reusable values with CSS variables
- Modern Effects: Gradients, filters, and animations
Complete CSS Functions Reference
Real-World Focus:
- Practical examples from modern web development
- Production-ready code patterns
- Performance considerations and best practices
- Browser compatibility guidance
- Accessibility-focused implementations
Interactive Functions Reference
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Functions Reference - Real World Examples</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
color: white;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.categories {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
justify-content: center;
}
.category-btn {
background: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.category-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.category-btn.active {
background: #3498db;
color: white;
}
.functions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
}
.function-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.function-card:hover {
transform: translateY(-5px);
}
.function-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 2px solid #ecf0f1;
}
.function-icon {
width: 50px;
height: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
}
.color { background: #e74c3c; }
.layout { background: #3498db; }
.transform { background: #9b59b6; }
.math { background: #2ecc71; }
.gradient { background: #f39c12; }
.filter { background: #1abc9c; }
.custom { background: #34495e; }
.function-syntax {
font-family: 'Fira Code', monospace;
background: #2c3e50;
color: white;
padding: 0.5rem 1rem;
border-radius: 5px;
font-size: 1.1rem;
margin-bottom: 1rem;
}
.function-description {
color: #7f8c8d;
margin-bottom: 1rem;
line-height: 1.6;
}
.real-world-usage {
background: #f8f9fa;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
}
.usage-title {
color: #2c3e50;
margin-bottom: 0.5rem;
font-weight: 600;
}
.code-example {
background: #2c3e50;
color: #ecf0f1;
padding: 1rem;
border-radius: 5px;
font-family: 'Fira Code', monospace;
font-size: 0.9rem;
margin: 0.5rem 0;
}
.demo-area {
background: #ecf0f1;
padding: 1.5rem;
border-radius: 10px;
margin-top: 1rem;
border: 2px dashed #bdc3c7;
}
.demo-container {
display: grid;
gap: 1rem;
}
.browser-support {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #ecf0f1;
}
.support-badge {
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
font-weight: bold;
}
.supported { background: #d4edda; color: #155724; }
.partial { background: #fff3cd; color: #856404; }
@media (max-width: 768px) {
.functions-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
.categories {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎨 CSS Functions Reference</h1>
<p>Real-world examples of CSS functions with practical applications</p>
</div>
<div class="categories">
<button class="category-btn active" onclick="filterFunctions('all')">All Functions</button>
<button class="category-btn" onclick="filterFunctions('color')">Color Functions</button>
<button class="category-btn" onclick="filterFunctions('layout')">Layout Functions</button>
<button class="category-btn" onclick="filterFunctions('transform')">Transform Functions</button>
<button class="category-btn" onclick="filterFunctions('math')">Math Functions</button>
<button class="category-btn" onclick="filterFunctions('gradient')">Gradient Functions</button>
<button class="category-btn" onclick="filterFunctions('filter')">Filter Functions</button>
</div>
<div class="functions-grid">
<!-- calc() Function -->
<div class="function-card" data-category="layout math">
<div class="function-header">
<div class="function-icon layout">🧮</div>
<div>
<h3>calc()</h3>
<p>Dynamic calculations in CSS</p>
</div>
</div>
<div class="function-syntax">calc(expression)</div>
<div class="function-description">
Performs mathematical calculations to determine CSS property values. Can mix different units like pixels, percentages, and viewport units.
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Creating responsive layouts with fixed sidebars</li>
<li>Centering elements with dynamic margins</li>
<li>Creating fluid typography</li>
<li>Building grid systems with gutters</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Responsive layout with fixed sidebar */</span><br>
.container {<br>
width: calc(100% - 250px);<br>
margin-left: 250px;<br>
}<br><br>
<span class="comment">/* Fluid typography scaling */</span><br>
h1 {<br>
font-size: calc(1.5rem + 2vw);<br>
}<br><br>
<span class="comment">/* Perfect centering with unknown dimensions */</span><br>
.centered {<br>
position: absolute;<br>
top: calc(50% - 25px);<br>
left: calc(50% - 100px);<br>
}
</div>
<div class="demo-area">
<div class="demo-container">
<div style="display: grid; grid-template-columns: 250px 1fr; gap: 1rem; height: 100px;">
<div style="background: #3498db; color: white; display: flex; align-items: center; justify-content: center; border-radius: 5px;">
Fixed Sidebar
</div>
<div style="background: #2ecc71; color: white; display: flex; align-items: center; justify-content: center; border-radius: 5px;">
calc(100% - 250px)
</div>
</div>
<div style="text-align: center; padding: 1rem;">
<h3 style="font-size: calc(1rem + 1vw); margin: 0;">Responsive Heading</h3>
<p style="font-size: calc(0.8rem + 0.5vw); margin: 0.5rem 0 0 0;">This text scales with viewport width</p>
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">98%</span>
<span class="support-badge supported">26+</span>
<span class="support-badge supported">16+</span>
<span class="support-badge supported">9+</span>
</div>
</div>
<!-- var() Function -->
<div class="function-card" data-category="layout custom">
<div class="function-header">
<div class="function-icon custom">🎨</div>
<div>
<h3>var()</h3>
<p>CSS Custom Properties</p>
</div>
</div>
<div class="function-syntax">var(--variable, fallback)</div>
<div class="function-description">
References CSS custom properties (variables) with optional fallback values. Enables dynamic theming and consistent design systems.
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Creating themeable design systems</li>
<li>Dynamic color schemes</li>
<li>Consistent spacing systems</li>
<li>Runtime style updates with JavaScript</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Design system with CSS variables */</span><br>
:root {<br>
--primary-color: #3498db;<br>
--spacing-unit: 1rem;<br>
--border-radius: 8px;<br>
--shadow: 0 2px 10px rgba(0,0,0,0.1);<br>
}<br><br>
.card {<br>
background: white;<br>
padding: var(--spacing-unit);<br>
border-radius: var(--border-radius);<br>
box-shadow: var(--shadow);<br>
border: 2px solid var(--primary-color);<br>
}<br><br>
<span class="comment">/* Dark theme override */</span><br>
.dark-theme {<br>
--primary-color: #1abc9c;<br>
--shadow: 0 2px 10px rgba(0,0,0,0.3);<br>
}
</div>
<div class="demo-area">
<div class="demo-container">
<div style="
--card-bg: #3498db;
--card-color: white;
--card-padding: 1rem;
background: var(--card-bg);
color: var(--card-color);
padding: var(--card-padding);
border-radius: 8px;
margin-bottom: 1rem;
">
Primary Theme Card
</div>
<div style="
--card-bg: #2ecc71;
--card-color: white;
--card-padding: 1.5rem;
background: var(--card-bg);
color: var(--card-color);
padding: var(--card-padding);
border-radius: 8px;
">
Secondary Theme Card
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">97%</span>
<span class="support-badge supported">49+</span>
<span class="support-badge supported">31+</span>
<span class="support-badge supported">15+</span>
</div>
</div>
<!-- rgb() and rgba() -->
<div class="function-card" data-category="color">
<div class="function-header">
<div class="function-icon color">🎨</div>
<div>
<h3>rgb() / rgba()</h3>
<p>Color definition with transparency</p>
</div>
</div>
<div class="function-syntax">rgb(red, green, blue)<br>rgba(red, green, blue, alpha)</div>
<div class="function-description">
Defines colors using the RGB color model. rgba() includes an alpha channel for transparency control.
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Creating semi-transparent overlays</li>
<li>Building color systems with opacity variants</li>
<li>Accessible text contrast ratios</li>
<li>Glass morphism and modern UI effects</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Glass morphism effect */</span><br>
.glass-card {<br>
background: rgba(255, 255, 255, 0.1);<br>
backdrop-filter: blur(10px);<br>
border: 1px solid rgba(255, 255, 255, 0.2);<br>
}<br><br>
<span class="comment">/* Color system with opacity */</span><br>
.button-primary {<br>
background: rgb(52, 152, 219);<br>
}<br>
.button-primary:hover {<br>
background: rgba(52, 152, 219, 0.8);<br>
}<br><br>
<span class="comment">/* Accessible text overlay */</span><br>
.hero-text {<br>
background: rgba(0, 0, 0, 0.7);<br>
color: rgb(255, 255, 255);<br>
}
</div>
<div class="demo-area">
<div class="demo-container">
<div style="
background: rgba(52, 152, 219, 0.8);
color: white;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
">
80% Opacity Blue
</div>
<div style="
background: rgba(46, 204, 113, 0.6);
color: white;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
">
60% Opacity Green
</div>
<div style="
background: rgba(231, 76, 60, 0.4);
color: white;
padding: 1rem;
border-radius: 8px;
">
40% Opacity Red
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- hsl() and hsla() -->
<div class="function-card" data-category="color">
<div class="function-header">
<div class="function-icon color">🌈</div>
<div>
<h3>hsl() / hsla()</h3>
<p>HSL color model with human-friendly values</p>
</div>
</div>
<div class="function-syntax">hsl(hue, saturation, lightness)<br>hsla(hue, saturation, lightness, alpha)</div>
<div class="function-description">
Defines colors using the HSL (Hue, Saturation, Lightness) model, which is more intuitive for creating color variations.
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Creating color palettes and themes</li>
<li>Dynamic color manipulation in CSS</li>
<li>Accessible color systems</li>
<li>Consistent brand color variations</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Color palette system */</span><br>
:root {<br>
--hue: 204;<br>
--primary: hsl(var(--hue), 70%, 50%);<br>
--primary-light: hsl(var(--hue), 70%, 70%);<br>
--primary-dark: hsl(var(--hue), 70%, 30%);<br>
}<br><br>
<span class="comment">/* Dynamic theme switching */</span><br>
.theme-blue { --hue: 204; }<br>
.theme-green { --hue: 145; }<br>
.theme-purple { --hue: 282; }<br><br>
<span class="comment">/* Accessible text colors */</span><br>
.text-primary {<br>
color: hsl(0, 0%, 20%);<br>
}<br>
.text-muted {<br>
color: hsl(0, 0%, 60%);<br>
}
</div>
<div class="demo-area">
<div class="demo-container">
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;">
<div style="background: hsl(204, 70%, 50%); color: white; padding: 1rem; border-radius: 5px; text-align: center;">
Base
</div>
<div style="background: hsl(204, 70%, 70%); color: black; padding: 1rem; border-radius: 5px; text-align: center;">
Light
</div>
<div style="background: hsl(204, 70%, 30%); color: white; padding: 1rem; border-radius: 5px; text-align: center;">
Dark
</div>
</div>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 1rem;">
<div style="background: hsl(145, 70%, 50%); color: white; padding: 0.5rem; border-radius: 3px; text-align: center; font-size: 0.8rem;">
Green
</div>
<div style="background: hsl(282, 70%, 50%); color: white; padding: 0.5rem; border-radius: 3px; text-align: center; font-size: 0.8rem;">
Purple
</div>
<div style="background: hsl(39, 70%, 50%); color: white; padding: 0.5rem; border-radius: 3px; text-align: center; font-size: 0.8rem;">
Orange
</div>
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- linear-gradient() -->
<div class="function-card" data-category="gradient">
<div class="function-header">
<div class="function-icon gradient">🎨</div>
<div>
<h3>linear-gradient()</h3>
<p>Linear color transitions</p>
</div>
</div>
<div class="function-syntax">linear-gradient(direction, color-stop1, color-stop2, ...)</div>
<div class="function-description">
Creates a linear gradient background with smooth color transitions. Can be used for modern UI designs, buttons, and backgrounds.
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Modern button designs</li>
<li>Background hero sections</li>
<li>Loading animations and skeletons</li>
<li>Card and component styling</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Modern gradient button */</span><br>
.gradient-btn {<br>
background: linear-gradient(45deg, #667eea, #764ba2);<br>
color: white;<br>
border: none;<br>
padding: 12px 24px;<br>
border-radius: 8px;<br>
cursor: pointer;<br>
}<br><br>
<span class="comment">/* Hero section background */</span><br>
.hero {<br>
background: linear-gradient(135deg,<br>
rgba(102, 126, 234, 0.9),<br>
rgba(118, 75, 162, 0.9)<br>
), url('hero-bg.jpg');<br>
background-size: cover;<br>
}<br><br>
<span class="comment">/* Loading skeleton */</span><br>
.skeleton {<br>
background: linear-gradient(90deg,<br>
#f0f0f0 25%,<br>
#e0e0e0 50%,<br>
#f0f0f0 75%<br>
);<br>
background-size: 200% 100%;<br>
animation: loading 1.5s infinite;<br>
}
</div>
<div class="demo-area">
<div class="demo-container">
<button style="
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
margin-bottom: 1rem;
">
Gradient Button
</button>
<div style="
background: linear-gradient(135deg, #4facfe, #00f2fe);
color: white;
padding: 2rem;
border-radius: 8px;
text-align: center;
margin-bottom: 1rem;
">
Hero Section
</div>
<div style="
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
height: 20px;
border-radius: 4px;
"></div>
</div>
<style>
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">98%</span>
<span class="support-badge supported">26+</span>
<span class="support-badge supported">16+</span>
<span class="support-badge supported">12+</span>
</div>
</div>
<!-- min() and max() -->
<div class="function-card" data-category="layout math">
<div class="function-header">
<div class="function-icon math">📏</div>
<div>
<h3>min() / max()</h3>
<p>Dynamic sizing constraints</p>
</div>
</div>
<div class="function-syntax">min(value1, value2, ...)<br>max(value1, value2, ...)</div>
<div class="function-description">
Returns the smallest (min) or largest (max) value from a set of values. Essential for responsive design with constraints.
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Fluid typography with size limits</li>
<li>Responsive containers with maximum widths</li>
<li>Mobile-first responsive spacing</li>
<li>Accessible minimum touch targets</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Fluid typography with limits */</span><br>
h1 {<br>
font-size: min(max(2rem, 4vw), 3rem);<br>
<span class="comment">/* Never smaller than 2rem, never larger than 3rem */</span><br>
}<br><br>
<span class="comment">/* Responsive container */</span><br>
.container {<br>
width: min(100% - 2rem, 1200px);<br>
margin: 0 auto;<br>
<span class="comment">/* Full width with padding, max 1200px */</span><br>
}<br><br>
<span class="comment">/* Accessible button sizing */</span><br>
.button {<br>
padding: max(1rem, 2vh);<br>
min-height: max(44px, 5vh);<br>
<span class="comment">/* Minimum touch target size */</span><br>
}
</div>
<div class="demo-area">
<div class="demo-container">
<div style="
width: min(100%, 400px);
background: #3498db;
color: white;
padding: 1rem;
border-radius: 8px;
margin: 0 auto;
text-align: center;
">
Max Width: 400px<br>
(Try resizing the window)
</div>
<div style="
font-size: min(max(1rem, 3vw), 1.5rem);
background: #2ecc71;
color: white;
padding: 1rem;
border-radius: 8px;
margin-top: 1rem;
text-align: center;
">
Fluid Text Size<br>
(Min: 1rem, Max: 1.5rem)
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">95%</span>
<span class="support-badge supported">79+</span>
<span class="support-badge supported">75+</span>
<span class="support-badge supported">14+</span>
</div>
</div>
<!-- clamp() -->
<div class="function-card" data-category="layout math">
<div class="function-header">
<div class="function-icon math">🔧</div>
<div>
<h3>clamp()</h3>
<p>Responsive values with constraints</p>
</div>
</div>
<div class="function-syntax">clamp(min, preferred, max)</div>
<div class="function-description">
Clamps a value between an upper and lower bound. The perfect solution for fluid typography and responsive sizing.
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Perfect fluid typography</li>
<li>Responsive spacing and layouts</li>
<li>Container queries alternative</li>
<li>Accessible scaling elements</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Perfect fluid typography */</span><br>
h1 {<br>
font-size: clamp(2rem, 5vw, 4rem);<br>
<span class="comment">/* Scales with viewport, min 2rem, max 4rem */</span><br>
}<br><br>
<span class="comment">/* Responsive container padding */</span><br>
.container {<br>
padding: clamp(1rem, 5%, 3rem);<br>
<span class="comment">/* Responsive padding that never gets too small/large */</span><br>
}<br><br>
<span class="comment">/* Responsive grid gaps */</span><br>
.grid {<br>
gap: clamp(1rem, 2vw, 2rem);<br>
<span class="comment">/* Gap scales with viewport but has limits */</span><br>
}
</div>
<div class="demo-area">
<div class="demo-container">
<h3 style="
font-size: clamp(1.25rem, 4vw, 2.5rem);
color: #2c3e50;
text-align: center;
margin: 0 0 1rem 0;
">
Responsive Heading
</h3>
<p style="
font-size: clamp(0.9rem, 2vw, 1.1rem);
color: #7f8c8d;
text-align: center;
margin: 0;
">
This paragraph text scales smoothly between 0.9rem and 1.1rem based on viewport width.
</p>
<div style="
background: #e74c3c;
color: white;
padding: clamp(0.5rem, 2vw, 2rem);
border-radius: 8px;
margin-top: 1rem;
text-align: center;
">
Responsive Padding<br>
(Try resizing the window)
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">95%</span>
<span class="support-badge supported">79+</span>
<span class="support-badge supported">75+</span>
<span class="support-badge supported">14+</span>
</div>
</div>
</div>
</div>
<script>
function filterFunctions(category) {
const cards = document.querySelectorAll('.function-card');
const buttons = document.querySelectorAll('.category-btn');
buttons.forEach(btn => {
btn.classList.remove('active');
if (btn.textContent.toLowerCase().includes(category)) {
btn.classList.add('active');
}
});
cards.forEach(card => {
if (category === 'all' || card.dataset.category.includes(category)) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
}
</script>
</body>
</html>Advanced CSS Functions
Transform & Filter Functions
Advanced functions for creating sophisticated visual effects, animations, and complex transformations.
transform: rotate() scale()
filter: blur() brightness()
clip-path: polygon()
backdrop-filter: blur()
Math & Counter Functions
Mathematical functions for complex calculations and content generation functions for dynamic text.
sin() cos() tan()
calc() min() max()
counter() counters()
attr() content()
Advanced Functions Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced CSS Functions - Modern Web Development</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
color: white;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.advanced-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 2rem;
}
.advanced-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.function-group {
margin-bottom: 2rem;
}
.function-group h3 {
color: #2c3e50;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #3498db;
}
.function-item {
background: #f8f9fa;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
border-left: 4px solid #3498db;
}
.function-syntax {
font-family: 'Fira Code', monospace;
background: #2c3e50;
color: white;
padding: 0.5rem 1rem;
border-radius: 5px;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.function-description {
color: #7f8c8d;
margin-bottom: 0.5rem;
}
.demo-container {
background: #ecf0f1;
padding: 1.5rem;
border-radius: 10px;
margin: 1rem 0;
}
.shape-demo {
width: 200px;
height: 200px;
margin: 1rem auto;
background: linear-gradient(45deg, #3498db, #9b59b6);
}
.filter-demo {
width: 200px;
height: 200px;
margin: 1rem auto;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="%233498db"/><circle cx="50" cy="50" r="40" fill="%232ecc71"/></svg>');
}
.transform-demo {
width: 100px;
height: 100px;
background: #e74c3c;
margin: 1rem auto;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.counter-demo {
padding: 1rem;
background: #34495e;
color: white;
border-radius: 8px;
margin: 1rem 0;
}
@media (max-width: 768px) {
.advanced-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🚀 Advanced CSS Functions</h1>
<p>Modern CSS functions for sophisticated web development</p>
</div>
<div class="advanced-grid">
<!-- Transform Functions -->
<div class="advanced-card">
<h2>🔄 Transform Functions</h2>
<div class="function-group">
<h3>2D and 3D Transformations</h3>
<div class="function-item">
<div class="function-syntax">transform: rotate(45deg) scale(1.2) translateX(20px);</div>
<div class="function-description">
Combine multiple transform functions for complex animations and interactions.
</div>
</div>
<div class="function-item">
<div class="function-syntax">transform: perspective(500px) rotateY(45deg);</div>
<div class="function-description">
Create 3D transformations with perspective for depth effects.
</div>
</div>
<div class="function-item">
<div class="function-syntax">transform: matrix(1, 0.2, 0, 1, 0, 0);</div>
<div class="function-description">
Use matrix for complex transformations combining scale, skew, and translate.
</div>
</div>
</div>
<div class="demo-container">
<h4>Transform Function Demo:</h4>
<div class="transform-demo" style="transform: rotate(45deg) scale(1.2);">
Rotate & Scale
</div>
<div class="transform-demo" style="transform: perspective(500px) rotateY(45deg); background: #3498db;">
3D Perspective
</div>
<div class="transform-demo" style="transform: skew(20deg, 10deg); background: #2ecc71;">
Skew Effect
</div>
</div>
</div>
<!-- Filter Functions -->
<div class="advanced-card">
<h2>🎨 Filter Functions</h2>
<div class="function-group">
<h3>Visual Effects and Adjustments</h3>
<div class="function-item">
<div class="function-syntax">filter: blur(5px) brightness(1.2) contrast(0.8);</div>
<div class="function-description">
Combine multiple filter effects for sophisticated visual treatments.
</div>
</div>
<div class="function-item">
<div class="function-syntax">filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));</div>
<div class="function-description">
Create realistic shadows that follow the element's alpha channel.
</div>
</div>
<div class="function-item">
<div class="function-syntax">filter: hue-rotate(90deg) saturate(1.5);</div>
<div class="function-description">
Dynamically adjust colors and saturation for theme switching.
</div>
</div>
</div>
<div class="demo-container">
<h4>Filter Function Demo:</h4>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
<div class="filter-demo" style="filter: blur(2px);">
Blurred
</div>
<div class="filter-demo" style="filter: brightness(1.5) contrast(1.2);">
Bright & Contrast
</div>
<div class="filter-demo" style="filter: hue-rotate(90deg);">
Hue Shift
</div>
<div class="filter-demo" style="filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.5));">
Drop Shadow
</div>
</div>
</div>
</div>
<!-- Shape and Clip Functions -->
<div class="advanced-card">
<h2>✂️ Shape and Clip Functions</h2>
<div class="function-group">
<h3>Advanced Shapes and Clipping</h3>
<div class="function-item">
<div class="function-syntax">clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);</div>
<div class="function-description">
Create complex shapes using polygon coordinates for modern designs.
</div>
</div>
<div class="function-item">
<div class="function-syntax">clip-path: circle(50% at 50% 50%);</div>
<div class="function-description">
Create circular clipping paths for avatars and modern UI elements.
</div>
</div>
<div class="function-item">
<div class="function-syntax">shape-outside: circle(50%);</div>
<div class="function-description">
Make text flow around custom shapes for editorial layouts.
</div>
</div>
</div>
<div class="demo-container">
<h4>Shape Function Demo:</h4>
<div class="shape-demo" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
<div class="shape-demo" style="clip-path: circle(40%); width: 150px; height: 150px;"></div>
<div class="shape-demo" style="clip-path: ellipse(25% 40% at 50% 50%); width: 150px; height: 150px;"></div>
</div>
</div>
<!-- Counter and Content Functions -->
<div class="advanced-card">
<h2>🔢 Counter and Content Functions</h2>
<div class="function-group">
<h3>Dynamic Content Generation</h3>
<div class="function-item">
<div class="function-syntax">content: counter(section) ". ";</div>
<div class="function-description">
Automatically number sections and lists with CSS counters.
</div>
</div>
<div class="function-item">
<div class="function-syntax">content: attr(data-tooltip);</div>
<div class="function-description">
Use element attributes as content for tooltips and labels.
</div>
</div>
<div class="function-item">
<div class="function-syntax">content: "→ " url('icon.svg');</div>
<div class="function-description">
Combine text and images in generated content.
</div>
</div>
</div>
<div class="demo-container">
<h4>Counter Function Demo:</h4>
<div class="counter-demo">
<style>
.numbered-list { counter-reset: item; }
.numbered-list li {
counter-increment: item;
margin-bottom: 0.5rem;
}
.numbered-list li::before {
content: counter(item) ". ";
font-weight: bold;
color: #3498db;
margin-right: 0.5rem;
}
</style>
<ol class="numbered-list" style="list-style: none; padding: 0;">
<li>First item with automatic numbering</li>
<li>Second item with consistent styling</li>
<li>Third item demonstrating CSS counters</li>
</ol>
</div>
<div style="margin-top: 1rem;">
<button data-tooltip="This is a tooltip from data attribute"
style="position: relative; padding: 0.5rem 1rem; background: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer;"
onmouseover="this.style.setProperty('--tooltip', this.getAttribute('data-tooltip'))">
Hover for Tooltip
</button>
<style>
button[data-tooltip]:hover::after {
content: var(--tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #2c3e50;
color: white;
padding: 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
white-space: nowrap;
margin-bottom: 0.5rem;
}
</style>
</div>
</div>
</div>
</div>
</div>
</body>
</html>CSS Functions Cheatsheet
Quick Reference Guide
Essential CSS functions organized by category for quick lookup and reference during development. Each function includes practical use cases and syntax examples.
/* Responsive Design */
width: clamp(300px, 50%, 800px);
font-size: min(max(1rem, 4vw), 2rem);
padding: calc(1rem + 2vw);
Complete Functions Cheatsheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Functions Cheatsheet - Quick Reference</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
color: #2c3e50;
}
.cheatsheet-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.cheatsheet-section {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.section-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid;
}
.section-icon {
font-size: 2rem;
}
.layout { border-color: #3498db; }
.color { border-color: #e74c3c; }
.math { border-color: #2ecc71; }
.gradient { border-color: #f39c12; }
.transform { border-color: #9b59b6; }
.filter { border-color: #1abc9c; }
.function-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.function-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: #f8f9fa;
border-radius: 8px;
transition: background 0.2s ease;
}
.function-row:hover {
background: #e9ecef;
}
.function-name {
font-family: 'Fira Code', monospace;
font-weight: 600;
color: #2c3e50;
}
.function-purpose {
font-size: 0.85rem;
color: #7f8c8d;
text-align: right;
}
.quick-examples {
background: #2c3e50;
color: #ecf0f1;
padding: 1.5rem;
border-radius: 10px;
margin-top: 2rem;
}
.example-title {
color: #3498db;
margin-bottom: 1rem;
font-weight: 600;
}
.code-block {
background: #34495e;
padding: 1rem;
border-radius: 5px;
margin: 1rem 0;
overflow-x: auto;
}
.best-practices {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 1.5rem;
border-radius: 8px;
margin-top: 2rem;
}
.browser-support {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
margin-top: 2rem;
}
.browser-item {
text-align: center;
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
}
.browser-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
.cheatsheet-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
.function-row {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.function-purpose {
text-align: left;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📋 CSS Functions Cheatsheet</h1>
<p>Quick reference guide for essential CSS functions</p>
</div>
<div class="cheatsheet-grid">
<!-- Layout Functions -->
<div class="cheatsheet-section layout">
<div class="section-header">
<div class="section-icon">📐</div>
<h2>Layout Functions</h2>
</div>
<div class="function-list">
<div class="function-row">
<span class="function-name">calc()</span>
<span class="function-purpose">Dynamic calculations</span>
</div>
<div class="function-row">
<span class="function-name">var()</span>
<span class="function-purpose">CSS variables</span>
</div>
<div class="function-row">
<span class="function-name">min()</span>
<span class="function-purpose">Minimum value</span>
</div>
<div class="function-row">
<span class="function-name">max()</span>
<span class="function-purpose">Maximum value</span>
</div>
<div class="function-row">
<span class="function-name">clamp()</span>
<span class="function-purpose">Responsive clamping</span>
</div>
</div>
</div>
<!-- Color Functions -->
<div class="cheatsheet-section color">
<div class="section-header">
<div class="section-icon">🎨</div>
<h2>Color Functions</h2>
</div>
<div class="function-list">
<div class="function-row">
<span class="function-name">rgb()</span>
<span class="function-purpose">RGB colors</span>
</div>
<div class="function-row">
<span class="function-name">rgba()</span>
<span class="function-purpose">RGB with alpha</span>
</div>
<div class="function-row">
<span class="function-name">hsl()</span>
<span class="function-purpose">HSL colors</span>
</div>
<div class="function-row">
<span class="function-name">hsla()</span>
<span class="function-purpose">HSL with alpha</span>
</div>
<div class="function-row">
<span class="function-name">color()</span>
<span class="function-purpose">Color space</span>
</div>
</div>
</div>
<!-- Gradient Functions -->
<div class="cheatsheet-section gradient">
<div class="section-header">
<div class="section-icon">🌈</div>
<h2>Gradient Functions</h2>
</div>
<div class="function-list">
<div class="function-row">
<span class="function-name">linear-gradient()</span>
<span class="function-purpose">Linear gradients</span>
</div>
<div class="function-row">
<span class="function-name">radial-gradient()</span>
<span class="function-purpose">Radial gradients</span>
</div>
<div class="function-row">
<span class="function-name">conic-gradient()</span>
<span class="function-purpose">Conic gradients</span>
</div>
<div class="function-row">
<span class="function-name">repeating-linear-gradient()</span>
<span class="function-purpose">Repeating linear</span>
</div>
<div class="function-row">
<span class="function-name">repeating-radial-gradient()</span>
<span class="function-purpose">Repeating radial</span>
</div>
</div>
</div>
<!-- Transform Functions -->
<div class="cheatsheet-section transform">
<div class="section-header">
<div class="section-icon">🔄</div>
<h2>Transform Functions</h2>
</div>
<div class="function-list">
<div class="function-row">
<span class="function-name">rotate()</span>
<span class="function-purpose">Rotation</span>
</div>
<div class="function-row">
<span class="function-name">scale()</span>
<span class="function-purpose">Scaling</span>
</div>
<div class="function-row">
<span class="function-name">translate()</span>
<span class="function-purpose">Position</span>
</div>
<div class="function-row">
<span class="function-name">skew()</span>
<span class="function-purpose">Skewing</span>
</div>
<div class="function-row">
<span class="function-name">matrix()</span>
<span class="function-purpose">Complex transforms</span>
</div>
</div>
</div>
<!-- Filter Functions -->
<div class="cheatsheet-section filter">
<div class="section-header">
<div class="section-icon">🔍</div>
<h2>Filter Functions</h2>
</div>
<div class="function-list">
<div class="function-row">
<span class="function-name">blur()</span>
<span class="function-purpose">Gaussian blur</span>
</div>
<div class="function-row">
<span class="function-name">brightness()</span>
<span class="function-purpose">Brightness adjust</span>
</div>
<div class="function-row">
<span class="function-name">contrast()</span>
<span class="function-purpose">Contrast adjust</span>
</div>
<div class="function-row">
<span class="function-name">grayscale()</span>
<span class="function-purpose">Grayscale</span>
</div>
<div class="function-row">
<span class="function-name">drop-shadow()</span>
<span class="function-purpose">Shadow effects</span>
</div>
</div>
</div>
<!-- Math Functions -->
<div class="cheatsheet-section math">
<div class="section-header">
<div class="section-icon">🧮</div>
<h2>Math Functions</h2>
</div>
<div class="function-list">
<div class="function-row">
<span class="function-name">sin()</span>
<span class="function-purpose">Sine function</span>
</div>
<div class="function-row">
<span class="function-name">cos()</span>
<span class="function-purpose">Cosine function</span>
</div>
<div class="function-row">
<span class="function-name">tan()</span>
<span class="function-purpose">Tangent function</span>
</div>
<div class="function-row">
<span class="function-name">atan2()</span>
<span class="function-purpose">Arc tangent</span>
</div>
<div class="function-row">
<span class="function-name">sqrt()</span>
<span class="function-purpose">Square root</span>
</div>
</div>
</div>
</div>
<!-- Quick Examples Section -->
<div class="quick-examples">
<div class="example-title">🚀 Real-World Function Patterns</div>
<div class="code-block">
<span class="comment">/* Modern responsive design */</span><br>
.container {<br>
width: min(100% - 2rem, 1200px);<br>
margin: 0 auto;<br>
}<br><br>
<span class="comment">/* Fluid typography system */</span><br>
h1 {<br>
font-size: clamp(2rem, 5vw, 4rem);<br>
}<br>
p {<br>
font-size: clamp(1rem, 2vw, 1.5rem);<br>
}<br><br>
<span class="comment">/* Dynamic theming */</span><br>
:root {<br>
--primary: hsl(204, 70%, 50%);<br>
--spacing: clamp(1rem, 2vw, 2rem);<br>
}<br>
.card {<br>
background: linear-gradient(135deg, var(--primary), hsl(204, 70%, 30%));<br>
padding: var(--spacing);<br>
}
</div>
</div>
<!-- Best Practices -->
<div class="best-practices">
<h3>💡 CSS Functions Best Practices</h3>
<ul>
<li><strong>Use clamp() for fluid typography</strong> - Provides perfect responsive text scaling</li>
<li><strong>Leverage CSS variables with var()</strong> - Enables dynamic theming and maintainability</li>
<li><strong>Combine min() and max() for constraints</strong> - Ensures accessible minimum sizes and reasonable maximums</li>
<li><strong>Use HSL for color systems</strong> - More intuitive for creating color variations</li>
<li><strong>Provide fallbacks for modern functions</strong> - Ensure compatibility with older browsers</li>
<li><strong>Use calc() for complex layouts</strong> - Combine different units seamlessly</li>
<li><strong>Test performance with complex functions</strong> - Some functions can impact rendering performance</li>
</ul>
</div>
<!-- Browser Support -->
<div class="browser-support">
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Chrome</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Firefox</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Safari</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Edge</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
</div>
</div>
</body>
</html>Practical Applications & Patterns
🎯 Production Use Cases
- Responsive design systems with fluid typography
- Dynamic theming with CSS custom properties
- Performance-optimized animations and transforms
- Accessible color contrast calculations
- Modern UI effects with gradients and filters
- Complex layouts with mathematical functions
🔧 Development Workflow
- Start with CSS variables for design tokens
- Use clamp() for responsive typography and spacing
- Implement calc() for complex layouts
- Add transforms and filters for visual enhancements
- Test across browsers and provide fallbacks
- Optimize performance with hardware acceleration
💡 Pro Tips for Function Mastery
Performance Optimization:
- Use transform instead of position for animations
- Limit the use of expensive filter operations
- Combine multiple transforms in single declarations
- Use will-change for complex animations
Best Practices:
- Provide fallback values for modern functions
- Use relative units with calc() for accessibility
- Test color contrast with different filter effects
- Use CSS variables for maintainable theming
Master CSS Functions Today! 🚀
Start exploring CSS functions with real-world examples and practical demos. Build your CSS skills with comprehensive reference materials and production-ready patterns.