Table of Contents
- Introduction to CSS Functions
- Color Functions
- Math Functions
- Filter Functions
- Transform Functions
- Gradient Functions
- Shape Functions
- Counter Functions
- Attribute Functions
- Grid Functions
- Comparison Functions
- Environmental Functions
- Custom Properties with Functions
- Practical Examples
- Performance and Best Practices
Introduction to CSS Functions
CSS functions are built-in methods that perform specific calculations or operations to generate dynamic values for CSS properties. They enable complex layouts, responsive designs, and interactive effects without JavaScript.
What Are CSS Functions?
/* Basic function syntax */ property: function-name(argument1, argument2, ...); /* Examples */ width: calc(100% - 40px); color: rgb(255, 0, 0); background: linear-gradient(red, blue); transform: rotate(45deg);
Why Use CSS Functions?
- Dynamic Values: Calculate values based on other properties
- Responsiveness: Create fluid layouts that adapt to screen size
- Maintainability: Reduce hard-coded values
- Performance: Browser-native calculations are fast
- Flexibility: Combine multiple values and units
Color Functions
RGB and RGBA
/* RGB - Red, Green, Blue (0-255) */ .rgb-example { color: rgb(255, 0, 0); /* Pure red */ color: rgb(0, 255, 0); /* Pure green */ color: rgb(0, 0, 255); /* Pure blue */ color: rgb(128, 128, 128); /* Gray */ background: rgb(255, 255, 255); /* White */ } /* RGBA - RGB with Alpha (transparency) */ .rgba-example { color: rgba(255, 0, 0, 0.5); /* 50% transparent red */ background: rgba(0, 0, 0, 0.3); /* 30% transparent black */ border-color: rgba(0, 255, 0, 0.8); /* 80% transparent green */ } /* Practical uses */ .overlay { background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */ } .button:hover { background: rgba(0, 123, 255, 0.8); /* Hover effect */ } HSL and HSLA
/* HSL - Hue, Saturation, Lightness */ .hsl-example { color: hsl(0, 100%, 50%); /* Red */ color: hsl(120, 100%, 50%); /* Green */ color: hsl(240, 100%, 50%); /* Blue */ color: hsl(0, 0%, 50%); /* Medium gray */ color: hsl(60, 100%, 50%); /* Yellow */ } /* HSLA - HSL with Alpha */ .hsla-example { color: hsla(200, 100%, 50%, 0.7); /* Semi-transparent cyan */ } /* Creating color variations */ .primary { background: hsl(200, 80%, 50%); } .primary-light { background: hsl(200, 80%, 70%); } .primary-dark { background: hsl(200, 80%, 30%); } .primary-saturated { background: hsl(200, 100%, 50%); } .primary-desaturated { background: hsl(200, 40%, 50%); } HWB and LAB
/* HWB - Hue, Whiteness, Blackness */ .hwb-example { color: hwb(0 0% 0%); /* Red */ color: hwb(120 0% 0%); /* Green */ color: hwb(240 0% 0%); /* Blue */ color: hwb(0 50% 0%); /* Pink (red + white) */ color: hwb(0 0% 50%); /* Dark red (red + black) */ } /* LAB - Lightness, A-axis, B-axis (perceptual) */ .lab-example { color: lab(50% 50 0); /* Reddish */ color: lab(80% -50 50); /* Yellowish */ } /* LCH - Lightness, Chroma, Hue */ .lch-example { color: lch(50% 50 0); /* Reddish */ color: lch(80% 30 90); /* Yellowish */ } Color Modification Functions
/* color-mix() - Mix two colors */ .mix-example { background: color-mix(in srgb, red 50%, blue 50%); background: color-mix(in hsl, green 30%, yellow 70%); } /* color-contrast() - Pick contrasting color */ .contrast-example { color: color-contrast(blue vs white, black, gray); /* Returns the color with highest contrast */ } /* color() - Specify color in different spaces */ .color-space-example { color: color(display-p3 1 0 0); /* P3 color space */ } /* Practical examples */ .theme-button { background: var(--primary-color); color: color-contrast(var(--primary-color) vs white, black); } .gradient-mix { background: linear-gradient( to right, red, color-mix(in srgb, red 50%, blue 50%), blue ); } Math Functions
calc()
The calc() function performs mathematical calculations with different units.
/* Basic calculations */ .calc-basic { width: calc(100% - 40px); height: calc(50vh - 60px); margin: calc(10px + 2%); padding: calc(1rem * 2); font-size: calc(16px + 0.5vw); } /* Multiple operations */ .calc-complex { width: calc((100% - 40px) / 2); height: calc(100vh * 0.75 - 100px); top: calc(50% - (200px / 2)); } /* Mixing units */ .calc-units { width: calc(100% - 200px); /* Percentage and pixels */ height: calc(100vh - 5rem); /* Viewport and rem */ margin: calc(2em + 10px); /* Em and pixels */ } /* Practical examples */ .responsive-container { width: calc(100% - 40px); max-width: calc(1200px - 40px); margin: 0 auto; padding: calc(20px + 2%); } .sidebar { width: 250px; } .main-content { width: calc(100% - 250px - 40px); margin-left: calc(250px + 20px); } .hero { height: calc(100vh - 80px); margin-top: 80px; } .grid-item { width: calc((100% - 30px) / 3); margin-right: 15px; } .grid-item:nth-child(3n) { margin-right: 0; } min(), max(), clamp()
/* min() - Use the smallest value */ .min-example { width: min(100%, 1200px); /* Never exceed 1200px */ font-size: min(5vw, 24px); /* Scale but max 24px */ padding: min(5%, 40px); /* Cap at 40px */ } /* max() - Use the largest value */ .max-example { width: max(300px, 50%); /* At least 300px */ font-size: max(16px, 2vw); /* Never smaller than 16px */ margin: max(10px, 2%); /* Minimum margin */ } /* clamp() - Set min, preferred, max */ .clamp-example { width: clamp(300px, 50%, 1200px); /* Between 300px and 1200px */ font-size: clamp(1rem, 3vw, 2rem); /* Fluid typography */ padding: clamp(10px, 5%, 40px); /* Responsive padding */ } /* Fluid typography system */ .fluid-heading { font-size: clamp(1.5rem, 5vw, 3rem); } .fluid-body { font-size: clamp(1rem, 2vw, 1.25rem); } .fluid-container { width: clamp(320px, 80%, 1200px); padding: clamp(20px, 5%, 60px); } /* Responsive grid with clamp */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 25%, 300px), 1fr)); } /* Card with responsive padding */ .card { padding: clamp(1rem, 3vw, 2rem); margin: clamp(10px, 2vw, 30px); border-radius: clamp(4px, 1vw, 12px); } Advanced calc() Examples
/* Complex layouts with calc */ .holy-grail { display: flex; min-height: 100vh; } .sidebar { width: 250px; } .content { width: calc(100% - 250px - 300px); } .right-sidebar { width: 300px; } /* Aspect ratios with calc */ .aspect-ratio { width: 100%; height: calc(100% * 9 / 16); /* 16:9 aspect ratio */ } /* Nested calc */ .nested-calc { width: calc(100% - calc(20px * 2)); /* Equivalent to: width: calc(100% - 40px); */ } /* Dynamic spacing */ .spacing-system { --base: 8px; margin: calc(var(--base) * 2); padding: calc(var(--base) * 3); gap: calc(var(--base) * 1.5); } /* Responsive typography with calc */ .responsive-text { font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1200 - 320))); line-height: calc(1.2em + 0.2vw); } Filter Functions
Basic Filters
/* blur() - Gaussian blur */ .blur-example { filter: blur(5px); /* 5px blur */ filter: blur(0.2rem); /* Blur in rem */ transition: filter 0.3s; } .blur-example:hover { filter: blur(0); /* Remove blur on hover */ } /* brightness() - Adjust brightness */ .brightness-example { filter: brightness(150%); /* 150% brightness */ filter: brightness(0.5); /* 50% brightness (darker) */ filter: brightness(2); /* 200% brightness (brighter) */ } /* contrast() - Adjust contrast */ .contrast-example { filter: contrast(200%); /* Double contrast */ filter: contrast(0.5); /* Half contrast */ } /* grayscale() - Convert to grayscale */ .grayscale-example { filter: grayscale(100%); /* Full grayscale */ filter: grayscale(0.5); /* 50% grayscale */ transition: filter 0.3s; } .grayscale-example:hover { filter: grayscale(0); /* Restore color on hover */ } /* hue-rotate() - Rotate hue */ .hue-rotate-example { filter: hue-rotate(90deg); /* Rotate by 90 degrees */ filter: hue-rotate(180deg); /* Complementary colors */ filter: hue-rotate(-45deg); /* Negative rotation */ } /* invert() - Invert colors */ .invert-example { filter: invert(100%); /* Full inversion */ filter: invert(0.3); /* 30% inversion */ } /* opacity() - Adjust opacity */ .opacity-example { filter: opacity(50%); /* 50% transparent */ filter: opacity(0.7); /* 70% transparent */ } /* saturate() - Adjust saturation */ .saturate-example { filter: saturate(200%); /* Double saturation */ filter: saturate(0.5); /* Half saturation */ } /* sepia() - Sepia tone */ .sepia-example { filter: sepia(100%); /* Full sepia */ filter: sepia(0.5); /* 50% sepia */ } Multiple Filters
/* Combine multiple filters */ .multi-filter { filter: brightness(120%) contrast(110%) saturate(130%) hue-rotate(10deg); } /* Hover effects with multiple filters */ .image-effect { transition: filter 0.3s; filter: brightness(1) contrast(1) saturate(1); } .image-effect:hover { filter: brightness(1.1) contrast(1.05) saturate(1.2); } /* Dark mode filter */ .dark-mode { filter: invert(100%) hue-rotate(180deg); } /* Artistic effects */ .vintage-effect { filter: sepia(50%) contrast(120%) brightness(90%) saturate(130%); } /* Dramatic effect */ .dramatic-effect { filter: brightness(80%) contrast(150%) saturate(140%) grayscale(20%); } Backdrop Filters
/* backdrop-filter - Apply filters to background */ .backdrop-blur { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.3); } /* Glass morphism effect */ .glass-card { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } /* Frosted navigation */ .frosted-nav { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } /* Modal overlay */ .modal-overlay { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px) brightness(0.8); } /* Multiple backdrop filters */ .complex-backdrop { backdrop-filter: blur(8px) brightness(120%) contrast(80%) saturate(150%); } Transform Functions
2D Transform Functions
/* translate() - Move element */ .translate-example { transform: translate(50px, 100px); /* Move X and Y */ transform: translateX(20px); /* Move horizontally */ transform: translateY(30px); /* Move vertically */ transform: translate(-50%, -50%); /* Center element */ } /* scale() - Change size */ .scale-example { transform: scale(1.5); /* 50% larger */ transform: scaleX(2); /* Double width */ transform: scaleY(0.5); /* Half height */ transform: scale(1.2, 0.8); /* Different axes */ } /* rotate() - Rotate element */ .rotate-example { transform: rotate(45deg); /* 45 degrees */ transform: rotate(-90deg); /* -90 degrees */ transform: rotate(0.5turn); /* Half turn */ } /* skew() - Skew element */ .skew-example { transform: skew(10deg, 5deg); /* Skew X and Y */ transform: skewX(15deg); /* Skew horizontally */ transform: skewY(20deg); /* Skew vertically */ } /* matrix() - Combine transformations */ .matrix-example { transform: matrix(1, 0.5, 0.5, 1, 50, 100); /* a, b, c, d, tx, ty */ } 3D Transform Functions
/* translate3d() - 3D movement */ .translate3d-example { transform: translate3d(50px, 100px, 200px); } /* scale3d() - 3D scaling */ .scale3d-example { transform: scale3d(1.5, 0.8, 2); } /* rotate3d() - 3D rotation */ .rotate3d-example { transform: rotate3d(1, 0, 0, 45deg); /* Rotate X */ transform: rotate3d(0, 1, 0, 90deg); /* Rotate Y */ transform: rotate3d(0, 0, 1, 180deg); /* Rotate Z */ transform: rotate3d(1, 1, 0, 60deg); /* Diagonal */ } /* perspective() - Add depth */ .perspective-example { transform: perspective(500px) translate3d(0, 0, 100px); transform: perspective(1000px) rotateY(45deg); } /* matrix3d() - Complex 3D transforms */ .matrix3d-example { transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ); } Combined Transforms
/* Multiple transforms */ .combined-transform { transform: translateX(50px) rotate(45deg) scale(1.2); } /* Transform origin */ .transform-origin-example { transform-origin: top left; transform: rotate(45deg); } .transform-origin-center { transform-origin: 50% 50%; transform: scale(1.5); } /* 3D card flip */ .card { position: relative; width: 200px; height: 300px; transform-style: preserve-3d; transition: transform 0.6s; } .card:hover { transform: rotateY(180deg); } .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .card-back { transform: rotateY(180deg); } /* Transform animations */ @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-50px) scale(1.1); } } .animated-element { animation: bounce 2s infinite; } /* Hover effects with transforms */ .button { transition: transform 0.3s; } .button:hover { transform: translateY(-2px) scale(1.05); } .button:active { transform: translateY(0) scale(0.95); } Gradient Functions
Linear Gradients
/* Basic linear gradient */ .linear-basic { background: linear-gradient(red, blue); } /* Directional gradients */ .linear-direction { background: linear-gradient(to right, red, blue); background: linear-gradient(to bottom right, red, blue); background: linear-gradient(45deg, red, blue); } /* Multiple color stops */ .linear-multiple { background: linear-gradient( to right, red, yellow, green, blue ); } /* Color stop positions */ .linear-positions { background: linear-gradient( to right, red 0%, yellow 50%, green 100% ); } /* Hard color stops */ .linear-hard { background: linear-gradient( to right, red 0%, red 50%, blue 50%, blue 100% ); } /* Repeating linear gradient */ .repeating-linear { background: repeating-linear-gradient( 45deg, red 0px, red 10px, blue 10px, blue 20px ); } Radial Gradients
/* Basic radial gradient */ .radial-basic { background: radial-gradient(circle, red, blue); } /* Shape and size */ .radial-shape { background: radial-gradient(circle at center, red, blue); background: radial-gradient(ellipse at top left, red, blue); background: radial-gradient(closest-side, red, blue); background: radial-gradient(farthest-corner, red, blue); } /* Multiple color stops */ .radial-multiple { background: radial-gradient( circle at center, red 0%, yellow 50%, green 100% ); } /* Repeating radial gradient */ .repeating-radial { background: repeating-radial-gradient( circle at center, red 0px, red 10px, blue 10px, blue 20px ); } Conic Gradients
/* Basic conic gradient */ .conic-basic { background: conic-gradient(red, blue); } /* From specific angle */ .conic-angle { background: conic-gradient(from 90deg, red, blue, green); } /* At specific position */ .conic-position { background: conic-gradient(at 30% 30%, red, yellow, green, blue); } /* Color stops */ .conic-stops { background: conic-gradient( red 0deg, red 90deg, blue 90deg, blue 180deg, green 180deg, green 360deg ); } /* Pie chart */ .pie-chart { background: conic-gradient( red 0deg 120deg, blue 120deg 240deg, green 240deg 360deg ); border-radius: 50%; width: 200px; height: 200px; } /* Repeating conic gradient */ .repeating-conic { background: repeating-conic-gradient( from 0deg, red 0deg 30deg, blue 30deg 60deg ); } Gradient Combinations
/* Multiple gradients */ .multiple-gradients { background: linear-gradient(45deg, rgba(255,0,0,0.5), rgba(0,0,255,0.5)), radial-gradient(circle at top left, yellow, transparent); } /* Gradient overlays */ .gradient-overlay { position: relative; } .gradient-overlay::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7)); } /* Text gradients */ .text-gradient { background: linear-gradient(45deg, #f06, #9f6); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Border gradients */ .border-gradient { border: 4px solid; border-image: linear-gradient(45deg, red, blue) 1; } /* Box shadow gradients */ .gradient-shadow { box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 0 0 2px linear-gradient(red, blue); } Shape Functions
polygon()
/* Basic polygon shapes */ .polygon-triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } .polygon-star { clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); } .polygon-hexagon { clip-path: polygon( 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50% ); } /* Responsive polygon with calc */ .responsive-polygon { clip-path: polygon( calc(50% - 50px) calc(50% - 50px), calc(50% + 50px) calc(50% - 50px), calc(50% + 50px) calc(50% + 50px), calc(50% - 50px) calc(50% + 50px) ); } circle() and ellipse()
/* circle() - Circular clipping */ .circle-basic { clip-path: circle(50%); } .circle-position { clip-path: circle(30% at 70% 30%); } .circle-size { clip-path: circle(100px at center); } /* ellipse() - Elliptical clipping */ .ellipse-basic { clip-path: ellipse(50% 30%); } .ellipse-position { clip-path: ellipse(30% 20% at 50% 50%); } .ellipse-size { clip-path: ellipse(100px 50px at center); } /* Combined with transitions */ .shape-hover { transition: clip-path 0.3s; clip-path: circle(0%); } .shape-hover:hover { clip-path: circle(50%); } inset() and path()
/* inset() - Rectangle clipping */ .inset-basic { clip-path: inset(20%); } .inset-specific { clip-path: inset(10% 20% 30% 40%); } .inset-round { clip-path: inset(10% round 20px); } /* path() - SVG path clipping */ .path-shape { clip-path: path('M 0,0 L 100,0 L 100,100 L 0,100 Z'); } .path-wave { clip-path: path('M 0,50 C 20,20 40,80 60,50 S 100,20 120,50 L 120,120 L 0,120 Z'); } /* Shape outside for text wrapping */ .shape-outside-example { float: left; shape-outside: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%); } Counter Functions
counter() and counters()
/* Basic counter */ .container { counter-reset: section; } .section { counter-increment: section; } .section::before { content: "Section " counter(section) ": "; } /* Nested counters */ .book { counter-reset: chapter; } .chapter { counter-increment: chapter; counter-reset: section; } .chapter::before { content: "Chapter " counter(chapter) ". "; } .section { counter-increment: section; } .section::before { content: counter(chapter) "." counter(section) " "; } /* counters() for nested numbering */ .toc { counter-reset: item; } .toc-item { counter-increment: item; } .toc-item::before { content: counters(item, ".") " "; counter-increment: item; } /* Custom list numbering */ .custom-list { list-style: none; counter-reset: custom-counter; } .custom-list li { counter-increment: custom-counter; margin-bottom: 10px; } .custom-list li::before { content: "[" counter(custom-counter) "] "; color: #007bff; font-weight: bold; } /* Page numbering for print */ @page { @bottom-right { content: counter(page); } } Attribute Functions
attr()
/* attr() - Use HTML attributes in CSS */ .attr-tooltip { position: relative; } .attr-tooltip:hover::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #333; color: white; padding: 5px 10px; border-radius: 4px; white-space: nowrap; } /* Dynamic content from attributes */ .avatar { width: 100px; height: 100px; border-radius: 50%; } .avatar::after { content: attr(data-status); position: absolute; bottom: 5px; right: 5px; width: 15px; height: 15px; background: attr(data-status-color color); border-radius: 50%; } /* Progress bar from attribute */ .progress-bar { height: 20px; background: #e0e0e0; position: relative; } .progress-bar::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: attr(data-progress %); background: #007bff; } .progress-bar::after { content: attr(data-progress) '%'; position: absolute; top: 0; left: 50%; transform: translateX(-50%); color: white; line-height: 20px; } url()
/* url() - Reference external resources */ .url-basic { background-image: url('image.jpg'); background-image: url('/images/background.png'); background-image: url('https://example.com/image.jpg'); } /* With modifiers */ .url-modifiers { background-image: url('image.jpg'); background-image: image-set( url('image.avif') type('image/avif'), url('image.webp') type('image/webp'), url('image.jpg') type('image/jpeg') ); } /* SVG fragment */ .url-svg { background: url('sprite.svg#icon-home'); } /* Data URLs */ .url-data { background-image: url('data:image/svg+xml;utf8,<svg>...</svg>'); background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...'); } /* Multiple URLs */ .url-multiple { background: url('overlay.png'), url('pattern.jpg'), linear-gradient(red, blue); } Grid Functions
repeat()
/* Basic repeat */ .grid-repeat { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 100px); } /* auto-fill and auto-fit */ .grid-auto-fill { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .grid-auto-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* Repeat with patterns */ .grid-pattern { display: grid; grid-template-columns: repeat(2, 1fr 2fr); /* Creates: 1fr 2fr 1fr 2fr */ } /* minmax with repeat */ .grid-responsive { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } minmax()
/* Basic minmax */ .grid-minmax { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; } /* Responsive columns */ .grid-responsive-columns { display: grid; grid-template-columns: repeat(3, minmax(150px, 300px)); } /* Flexible sizing */ .grid-flexible { display: grid; grid-template-columns: minmax(100px, 200px) minmax(200px, 1fr) minmax(100px, 2fr); } /* With min-content and max-content */ .grid-content { display: grid; grid-template-columns: minmax(min-content, 200px) minmax(100px, max-content); } fit-content()
/* fit-content() - Size based on content */ .grid-fit { display: grid; grid-template-columns: fit-content(300px) 1fr fit-content(200px); } /* Responsive with fit-content */ .grid-fit-responsive { display: grid; grid-template-columns: fit-content(200px) 1fr fit-content(150px); } /* Practical sidebar layout */ .grid-layout { display: grid; grid-template-columns: fit-content(250px) minmax(300px, 1fr) fit-content(200px); gap: 20px; } Comparison Functions
min() and max() in Grid
/* min() in grid */ .grid-min { display: grid; grid-template-columns: min(200px, 20%) 1fr; } /* max() in grid */ .grid-max { display: grid; grid-template-columns: max(100px, 10vw) 1fr; } /* Combined with clamp */ .grid-clamp { display: grid; grid-template-columns: repeat( auto-fit, minmax(clamp(150px, 20vw, 300px), 1fr) ); } min() and max() in Typography
/* Responsive typography with min/max */ .heading { font-size: min(5vw, 48px); line-height: max(1.2, 1.2em); } .paragraph { font-size: max(14px, min(3vw, 18px)); } /* Container queries with min/max */ .container { width: min(90%, 1200px); margin: 0 auto; padding: max(20px, 3vw); } Environmental Functions
env()
/* env() - Use environment variables */ .env-safe-area { padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); } /* Fallback values */ .env-fallback { padding: max(20px, env(safe-area-inset-top, 20px)) max(20px, env(safe-area-inset-right, 20px)) max(20px, env(safe-area-inset-bottom, 20px)) max(20px, env(safe-area-inset-left, 20px)); } /* iPhone X+ safe areas */ .fixed-footer { position: fixed; bottom: 0; left: 0; right: 0; padding-bottom: env(safe-area-inset-bottom); background: white; } /* Custom environment variables */ @property --custom-safe-area { syntax: '<length>'; inherits: false; initial-value: 0px; } :root { --custom-safe-area: env(safe-area-inset-bottom, 20px); } Custom Properties with Functions
Dynamic CSS Variables
/* CSS variables with calc */ :root { --spacing-unit: 8px; --container-width: 1200px; --gutter: calc(var(--spacing-unit) * 2); --columns: 12; --column-width: calc( (var(--container-width) - (var(--gutter) * (var(--columns) - 1))) / var(--columns) ); } /* Using variables with functions */ .responsive-element { width: clamp( calc(var(--spacing-unit) * 20), 50%, calc(var(--container-width) / 2) ); padding: var(--gutter); margin-bottom: calc(var(--gutter) * 2); } /* Grid system with variables */ .grid-system { display: grid; grid-template-columns: repeat( var(--columns), minmax(0, 1fr) ); gap: var(--gutter); max-width: var(--container-width); margin: 0 auto; } /* Dynamic spacing with calc and var */ .spacing-scale { --scale: 1; margin: calc(var(--scale) * var(--spacing-unit)); padding: calc(var(--scale) * 2 * var(--spacing-unit)); } .spacing-scale:hover { --scale: 1.5; } /* Theme with CSS functions */ .theme-system { --primary-hue: 200; --primary-color: hsl(var(--primary-hue), 80%, 50%); --primary-light: hsl(var(--primary-hue), 80%, 70%); --primary-dark: hsl(var(--primary-hue), 80%, 30%); --primary-transparent: hsla(var(--primary-hue), 80%, 50%, 0.5); } /* Responsive typography system */ :root { --min-font: 16px; --max-font: 24px; --min-screen: 320px; --max-screen: 1200px; } .responsive-text { font-size: calc( var(--min-font) + (var(--max-font) - var(--min-font)) * ((100vw - var(--min-screen)) / (var(--max-screen) - var(--min-screen))) ); } Advanced Variable Functions
/* Nested calc with variables */ .complex-spacing { --base: 4px; --ratio: 1.5; --levels: 5; margin: calc(var(--base) * var(--ratio)); padding: calc( var(--base) * pow(var(--ratio), var(--levels)) ); } /* Color manipulation with variables */ :root { --color: #007bff; --complement: hsl( calc(var(--color-hue) + 180), var(--color-saturation), var(--color-lightness) ); } /* Dynamic grid with variables */ .dynamic-grid { --min-column: 200px; --max-column: 1fr; --gap: 20px; display: grid; grid-template-columns: repeat( auto-fit, minmax( max(var(--min-column), calc(100% / var(--columns))), var(--max-column) ) ); gap: var(--gap); } Practical Examples
Example 1: Responsive Card with Functions
<div class="functions-card-demo"> <style> .functions-card-demo { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: clamp(20px, 5vw, 60px); min-height: 100vh; display: flex; align-items: center; justify-content: center; } .card { --card-padding: clamp(1rem, 3vw, 2rem); --card-radius: clamp(8px, 2vw, 16px); --primary-color: hsl(200, 80%, 50%); --hover-lift: 5px; max-width: min(400px, 90%); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px) saturate(180%); border-radius: var(--card-radius); padding: var(--card-padding); box-shadow: 0 calc(var(--hover-lift) * 2) calc(var(--hover-lift) * 4) rgba(0,0,0,0.1), inset 0 0 0 1px rgba(255,255,255,0.5); transform: translateY(0); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .card:hover { transform: translateY(calc(var(--hover-lift) * -1)); box-shadow: 0 calc(var(--hover-lift) * 3) calc(var(--hover-lift) * 6) rgba(0,0,0,0.15), inset 0 0 0 1px rgba(255,255,255,0.7); } .card-title { font-size: clamp(1.5rem, 5vw, 2rem); margin: 0 0 calc(var(--card-padding) / 2) 0; background: linear-gradient( 135deg, var(--primary-color), hsl(calc(200 + 60), 80%, 50%) ); -webkit-background-clip: text; background-clip: text; color: transparent; } .card-text { font-size: clamp(0.875rem, 2vw, 1rem); line-height: calc(1.5em + 0.2vw); color: color-mix(in srgb, #333 80%, transparent); margin: 0 0 var(--card-padding) 0; } .card-meta { display: flex; justify-content: space-between; align-items: center; padding-top: calc(var(--card-padding) / 2); border-top: 1px solid rgba(0,0,0,0.1); font-size: clamp(0.75rem, 1.5vw, 0.875rem); color: #666; } .card-badge { background: var(--primary-color); color: white; padding: calc(var(--card-padding) / 4) calc(var(--card-padding) / 2); border-radius: calc(var(--card-radius) / 2); font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.5px; } .card-date { filter: opacity(0.7); } .card-progress { margin-top: calc(var(--card-padding) / 2); height: calc(var(--card-padding) / 2); background: #e0e0e0; border-radius: calc(var(--card-radius) / 2); position: relative; overflow: hidden; } .card-progress::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: var(--progress, 75%); background: linear-gradient(to right, var(--primary-color), color-mix(in srgb, var(--primary-color) 80%, white) ); border-radius: calc(var(--card-radius) / 2); transition: width 0.5s ease; } </style> <div class="card" style="--progress: 75%"> <h2 class="card-title">CSS Functions</h2> <p class="card-text">This card demonstrates multiple CSS functions working together: clamp(), calc(), linear-gradient(), color-mix(), blur(), and more.</p> <div class="card-meta"> <span class="card-badge">Advanced</span> <span class="card-date">📅 2024-03-15</span> </div> <div class="card-progress"></div> </div> </div> Example 2: Dynamic Grid System
<div class="functions-grid-demo"> <style> .functions-grid-demo { padding: clamp(20px, 5vw, 40px); background: #f5f5f5; } :root { --min-column: 250px; --max-column: 1fr; --gap: clamp(15px, 3vw, 30px); --columns: repeat(auto-fit, minmax(max(200px, min(100%, 300px)), 1fr)); } .dynamic-grid { display: grid; grid-template-columns: var(--columns); gap: var(--gap); max-width: min(1200px, 90vw); margin: 0 auto; } .grid-item { --item-padding: clamp(1rem, 3vw, 1.5rem); --item-radius: calc(var(--gap) / 2); background: white; border-radius: var(--item-radius); padding: var(--item-padding); box-shadow: 0 calc(var(--gap) / 3) calc(var(--gap) / 2) rgba(0,0,0,0.05); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; height: 100%; } .grid-item:hover { transform: translateY(calc(var(--gap) / -3)); box-shadow: 0 calc(var(--gap) / 1.5) var(--gap) rgba(0,0,0,0.1); } .item-title { margin: 0 0 calc(var(--item-padding) / 2) 0; font-size: clamp(1.1rem, 3vw, 1.25rem); color: #333; position: relative; padding-bottom: calc(var(--item-padding) / 3); } .item-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: min(50px, 30%); height: 3px; background: linear-gradient(to right, #007bff, #00d4ff); border-radius: 3px; } .item-content { flex: 1; color: #666; line-height: calc(1.5em + 0.2vw); margin: 0 0 var(--item-padding) 0; } .item-footer { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; color: #999; } .item-tag { background: color-mix(in srgb, #007bff 10%, transparent); color: #007bff; padding: calc(var(--item-padding) / 3) calc(var(--item-padding) / 1.5); border-radius: calc(var(--item-radius) / 1.5); font-weight: 500; } @media (max-width: 768px) { :root { --min-column: 100%; } } </style> <div class="dynamic-grid"> <div class="grid-item"> <h3 class="item-title">Dynamic Grid Item 1</h3> <p class="item-content">This grid uses repeat(), minmax(), min(), max(), and clamp() for fully responsive behavior.</p> <div class="item-footer"> <span class="item-tag">CSS Grid</span> <span>📏 Flexible</span> </div> </div> <div class="grid-item"> <h3 class="item-title">Dynamic Grid Item 2</h3> <p class="item-content">Columns automatically adjust based on available space using auto-fit and minmax.</p> <div class="item-footer"> <span class="item-tag">Responsive</span> <span>🔄 auto-fit</span> </div> </div> <div class="grid-item"> <h3 class="item-title">Dynamic Grid Item 3</h3> <p class="item-content">Each card maintains consistent spacing with calc() and CSS variables.</p> <div class="item-footer"> <span class="item-tag">calc()</span> <span>📐 Variables</span> </div> </div> </div> </div> Example 3: Color System with Functions
<div class="color-system-demo"> <style> .color-system-demo { padding: clamp(20px, 5vw, 40px); background: linear-gradient(135deg, #f5f5f5, #e0e0e0); } :root { --hue: 200; --saturation: 80%; --lightness: 50%; --primary: hsl(var(--hue), var(--saturation), var(--lightness)); --primary-light: hsl(var(--hue), var(--saturation), calc(var(--lightness) + 20%)); --primary-dark: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 20%)); --primary-transparent: hsla(var(--hue), var(--saturation), var(--lightness), 0.5); --complementary: hsl(calc(var(--hue) + 180), var(--saturation), var(--lightness)); --triad-1: hsl(calc(var(--hue) + 120), var(--saturation), var(--lightness)); --triad-2: hsl(calc(var(--hue) - 120), var(--saturation), var(--lightness)); --analogous-1: hsl(calc(var(--hue) - 30), var(--saturation), var(--lightness)); --analogous-2: hsl(calc(var(--hue) + 30), var(--saturation), var(--lightness)); --shade-1: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 10%)); --shade-2: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 20%)); --shade-3: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 30%)); --tint-1: hsl(var(--hue), var(--saturation), calc(var(--lightness) + 10%)); --tint-2: hsl(var(--hue), var(--saturation), calc(var(--lightness) + 20%)); --tint-3: hsl(var(--hue), var(--saturation), calc(var(--lightness) + 30%)); } .color-palette { max-width: min(1200px, 90vw); margin: 0 auto; } .palette-title { text-align: center; color: var(--primary-dark); font-size: clamp(1.5rem, 5vw, 2.5rem); margin: 0 0 clamp(20px, 5vw, 40px) 0; background: linear-gradient(to right, var(--primary), var(--complementary) ); -webkit-background-clip: text; background-clip: text; color: transparent; } .color-section { margin-bottom: clamp(20px, 5vw, 40px); } .section-title { color: var(--primary-dark); margin: 0 0 clamp(10px, 2vw, 20px) 0; font-size: clamp(1.1rem, 3vw, 1.25rem); } .color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr)); gap: clamp(5px, 1vw, 10px); } .color-item { aspect-ratio: 1; border-radius: clamp(4px, 1vw, 8px); display: flex; align-items: center; justify-content: center; color: color-contrast(currentColor vs white, black); font-size: clamp(0.7rem, 2vw, 0.875rem); font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: transform 0.3s; } .color-item:hover { transform: scale(1.05); } .primary { background: var(--primary); } .primary-light { background: var(--primary-light); } .primary-dark { background: var(--primary-dark); } .primary-transparent { background: var(--primary-transparent); } .complementary { background: var(--complementary); } .triad-1 { background: var(--triad-1); } .triad-2 { background: var(--triad-2); } .analogous-1 { background: var(--analogous-1); } .analogous-2 { background: var(--analogous-2); } .shade-1 { background: var(--shade-1); } .shade-2 { background: var(--shade-2); } .shade-3 { background: var(--shade-3); } .tint-1 { background: var(--tint-1); } .tint-2 { background: var(--tint-2); } .tint-3 { background: var(--tint-3); } .mix-1 { background: color-mix(in srgb, var(--primary) 70%, black); } .mix-2 { background: color-mix(in hsl, var(--primary) 60%, white); } .mix-3 { background: color-mix(in lab, var(--primary) 80%, gold); } </style> <div class="color-palette"> <h2 class="palette-title">Color System with CSS Functions</h2> <div class="color-section"> <h3 class="section-title">Base Colors (hsl())</h3> <div class="color-grid"> <div class="color-item primary">Primary</div> <div class="color-item primary-light">Light</div> <div class="color-item primary-dark">Dark</div> <div class="color-item primary-transparent">Transparent</div> </div> </div> <div class="color-section"> <h3 class="section-title">Color Harmonies (calc() + hsl())</h3> <div class="color-grid"> <div class="color-item complementary">Complementary</div> <div class="color-item triad-1">Triad 1</div> <div class="color-item triad-2">Triad 2</div> <div class="color-item analogous-1">Analogous 1</div> <div class="color-item analogous-2">Analogous 2</div> </div> </div> <div class="color-section"> <h3 class="section-title">Shades & Tints (calc() + hsl())</h3> <div class="color-grid"> <div class="color-item shade-1">Shade 10%</div> <div class="color-item shade-2">Shade 20%</div> <div class="color-item shade-3">Shade 30%</div> <div class="color-item tint-1">Tint 10%</div> <div class="color-item tint-2">Tint 20%</div> <div class="color-item tint-3">Tint 30%</div> </div> </div> <div class="color-section"> <h3 class="section-title">Color Mix (color-mix())</h3> <div class="color-grid"> <div class="color-item mix-1">Mix Black</div> <div class="color-item mix-2">Mix White</div> <div class="color-item mix-3">Mix Gold</div> </div> </div> </div> </div> Performance and Best Practices
Performance Considerations
/* Efficient use of functions */ .performance-tips { /* Good - simple calculations */ width: calc(100% - 20px); /* Avoid - overly complex calculations */ width: calc(100% - calc(20px * 2) + calc(10px / 2) - calc(5px * 3)); /* Good - use variables for reusable values */ --spacing: 20px; margin: calc(var(--spacing) * 2); /* Avoid - recalculating same value */ padding: calc(20px * 2); margin: calc(20px * 2); /* Better to use variable */ } /* Optimize gradients */ .gradient-optimization { /* Good - simple gradients */ background: linear-gradient(red, blue); /* Acceptable - few color stops */ background: linear-gradient(45deg, red, yellow, blue); /* Avoid - too many color stops */ background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet); } /* Transform performance */ .transform-performance { /* Good - hardware accelerated */ transform: translate3d(0, 0, 0); /* Good - simple transforms */ transform: translateX(100px); /* Avoid - frequent changes to non-hardware accelerated properties */ left: 100px; /* Causes layout recalculation */ } Best Practices Summary
/* 1. Use CSS variables for maintainability */ :root { --base-unit: 8px; --container-width: 1200px; --primary-color: #007bff; } /* 2. Combine functions for responsive design */ .responsive-element { width: clamp(300px, 80%, var(--container-width)); padding: calc(var(--base-unit) * 2); font-size: clamp(1rem, 2vw, 1.25rem); } /* 3. Provide fallbacks for older browsers */ .fallback-example { background: #007bff; /* Fallback */ background: linear-gradient(135deg, #007bff, #00d4ff); } /* 4. Keep calculations simple and readable */ /* Good */ .complex-good { width: calc((100% - 40px) / 3); } /* Avoid */ .complex-bad { width: calc((100% - calc(20px * 2)) / 3); } /* 5. Use meaningful variable names */ :root { --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; } /* 6. Group related functions */ .element { /* Transform functions together */ transform: translateX(50px) rotate(45deg) scale(1.2); /* Filter functions together */ filter: brightness(1.2) contrast(1.1) saturate(1.3); } /* 7. Use calc() for consistent spacing */ .component { margin: calc(var(--spacing-md) * 2); padding: var(--spacing-md); gap: var(--spacing-md); } /* 8. Leverage clamp() for fluid typography */ h1 { font-size: clamp(1.5rem, 5vw, 3rem); } h2 { font-size: clamp(1.25rem, 4vw, 2.25rem); } p { font-size: clamp(1rem, 2vw, 1.125rem); } /* 9. Use color functions for themes */ .theme-light { --bg: hsl(0, 0%, 100%); --text: hsl(0, 0%, 20%); --accent: hsl(200, 80%, 50%); } .theme-dark { --bg: hsl(0, 0%, 20%); --text: hsl(0, 0%, 90%); --accent: hsl(200, 80%, 70%); } /* 10. Test function support */ @supports (display: grid) { .grid-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } } Function Reference Table
| Function | Category | Description | Example |
|---|---|---|---|
calc() | Math | Perform calculations | width: calc(100% - 20px) |
min() | Math | Use smallest value | width: min(100%, 500px) |
max() | Math | Use largest value | width: max(300px, 50%) |
clamp() | Math | Value within range | font-size: clamp(1rem, 2vw, 2rem) |
rgb() | Color | RGB color | color: rgb(255, 0, 0) |
rgba() | Color | RGB with alpha | color: rgba(255, 0, 0, 0.5) |
hsl() | Color | HSL color | color: hsl(200, 80%, 50%) |
hsla() | Color | HSL with alpha | color: hsla(200, 80%, 50%, 0.5) |
linear-gradient() | Gradient | Linear gradient | background: linear-gradient(red, blue) |
radial-gradient() | Gradient | Radial gradient | background: radial-gradient(circle, red, blue) |
conic-gradient() | Gradient | Conic gradient | background: conic-gradient(red, blue) |
blur() | Filter | Gaussian blur | filter: blur(5px) |
brightness() | Filter | Brightness | filter: brightness(150%) |
contrast() | Filter | Contrast | filter: contrast(200%) |
grayscale() | Filter | Grayscale | filter: grayscale(100%) |
hue-rotate() | Filter | Rotate hue | filter: hue-rotate(90deg) |
invert() | Filter | Invert colors | filter: invert(100%) |
opacity() | Filter | Opacity | filter: opacity(50%) |
saturate() | Filter | Saturation | filter: saturate(200%) |
sepia() | Filter | Sepia tone | filter: sepia(100%) |
translate() | Transform | Move element | transform: translate(50px, 100px) |
scale() | Transform | Scale element | transform: scale(1.5) |
rotate() | Transform | Rotate element | transform: rotate(45deg) |
skew() | Transform | Skew element | transform: skew(10deg, 5deg) |
perspective() | Transform | 3D perspective | transform: perspective(500px) |
repeat() | Grid | Repeat columns | grid-template-columns: repeat(3, 1fr) |
minmax() | Grid | Min/max size | grid-template-columns: minmax(200px, 1fr) |
fit-content() | Grid | Size to content | grid-template-columns: fit-content(300px) |
polygon() | Shape | Polygon clipping | clip-path: polygon(50% 0%, 100% 100%, 0% 100%) |
circle() | Shape | Circle clipping | clip-path: circle(50%) |
ellipse() | Shape | Ellipse clipping | clip-path: ellipse(50% 30%) |
inset() | Shape | Inset clipping | clip-path: inset(20%) |
path() | Shape | SVG path | clip-path: path('M 0,0 L 100,0 L 100,100 Z') |
attr() | Attribute | Use HTML attribute | content: attr(data-tooltip) |
url() | Resource | Reference resource | background: url('image.jpg') |
env() | Environment | Use environment var | padding: env(safe-area-inset-bottom) |
counter() | Counter | Use counter | content: counter(section) |
counters() | Counter | Nested counters | content: counters(item, ".") |
color-mix() | Color | Mix colors | color: color-mix(in srgb, red 50%, blue) |
color-contrast() | Color | Pick contrasting color | color: color-contrast(blue vs white, black) |
Conclusion
CSS functions and calculations provide powerful tools for creating dynamic, responsive, and maintainable stylesheets.
Key Takeaways
- Math Functions (
calc(),min(),max(),clamp()) enable responsive calculations - Color Functions (
rgb(),hsl(),color-mix()) create flexible color systems - Filter Functions add visual effects without JavaScript
- Transform Functions enable 2D and 3D transformations
- Gradient Functions create smooth color transitions
- Shape Functions provide creative clipping paths
- Grid Functions build flexible layouts
- CSS Variables work seamlessly with functions for dynamic values
When to Use Each Function
| Need | Recommended Functions |
|---|---|
| Responsive sizing | calc(), clamp(), minmax() |
| Color manipulation | hsl(), color-mix(), color-contrast() |
| Visual effects | filter functions |
| Animations | transform functions |
| Backgrounds | Gradient functions |
| Layout | Grid functions |
| Clipping | Shape functions |
| Dynamic content | attr(), counter() |
Remember: CSS functions are most powerful when combined with custom properties and used thoughtfully to create maintainable, performant designs!
HTML & CSS Learning Guides, Exercises, Projects, Design Systems, Accessibility & Performance (Related to HTML & CSS Development)
HTML & CSS Quiz – Comprehensive Assessment:
This quiz evaluates core knowledge of HTML and CSS including structure, styling, layout, forms, and responsive design. It is used to test practical understanding of front-end fundamentals and identify skill levels in web development.
Read more: https://macronepal.com/bash/html-and-css-quiz-comprehensive-assessment/
Complete Guide to HTML & CSS Tooling & Automation:
This guide explains tools and automation workflows used in modern web development, such as preprocessors, build tools, and task runners that improve efficiency in HTML and CSS projects.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-tooling-automation/
Complete HTML & CSS Exercises:
A collection of practical exercises designed to strengthen HTML and CSS skills through hands-on coding tasks, covering layout, styling, and responsive design concepts.
Read more: https://macronepal.com/bash/complete-html-and-css-exercises/
Complete HTML & CSS Landing Page Project:
This project focuses on building a full landing page using HTML and CSS, helping learners understand real-world website structure, layout design, and UI development.
Read more: https://macronepal.com/bash/complete-html-css-landing-page-project/
HTML & CSS Debugging and Testing Guide:
This guide teaches how to identify and fix errors in HTML and CSS code, along with testing techniques to ensure websites work correctly across browsers.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-debugging-testing/
HTML & CSS Design Systems Guide:
A design system approach helps maintain consistency in UI development using reusable components, styles, and patterns across web projects.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/
HTML & CSS Accessibility (A11y) Guide:
This guide focuses on making websites accessible for all users, including proper semantic HTML, keyboard navigation, alt text, and screen reader support.
Read more: https://macronepal.com/bash/complete-guide-to-html-css-accessibility-a11y/
HTML & CSS Performance Guide:
This topic explains optimization techniques such as reducing file size, improving loading speed, and writing efficient HTML and CSS for better website performance.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-performance/
HTML & CSS Design Systems (Advanced Overview):
Design systems help developers maintain scalable and consistent UI components across large projects using structured HTML and reusable CSS patterns.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/