Розміри та математика ⤢ calc()Результат арифметичного виразу зі змішаними одиницями. width: calc(100% - 2rem); ⤢ min()Найменше з указаних значень. width: min(100%, 60ch); ⤢ max()Найбільше з указаних значень. width: max(320px, 40vw); ⤢ clamp()Значення, обмежене між мінімумом, бажаним і максимумом. font-size: clamp(1rem, 2vw, 1.5rem); ⤢ env()Читає змінну середовища, надану агентом користувача. padding: env(safe-area-inset-top); ⤢ fit-content()Розмір, обмежений власною шириною вмісту. width: fit-content(200px); ⤢ round()Округлює одне значення до найближчого кратного іншого. width: round(up, 133px, 50px); ⤢ mod()Додатна остача від ділення, завжди невід'ємна. margin: mod(100px, 30px); ⤢ rem()Остача від ділення зі знаком діленого. margin: rem(-100px, 30px); ⤢ abs()Абсолютне значення. translateX(abs(-10px)); ⤢ sign()-1, 0 або 1 відповідно до знака значення. padding: sign(-5px) * 10px; Сітка ⤢ minmax()Діапазон розмірів для доріжок сітки, між мінімумом і максимумом. grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); ⤢ repeat()Повторює шаблон доріжок задану кількість разів або до заповнення. grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); Логіка та умови ⤢ if()Обирає одне з двох значень залежно від умови. font-size: if(media(width > 600px), 1.25rem, 1rem); ⤢ media()Істина, коли медіазапит збігається, для використання всередині if(). padding: if(media(width > 40rem), 2rem, 1rem); ⤢ supports()Істина, коли браузер підтримує оголошення, для використання всередині if(). display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333); ⤢ selector()Істина, коли селектор збігається, для використання всередині if(). font-weight: if(selector(:hover), 700, 400); Користувацькі властивості ⤢ var()Значення користувацької властивості з необов'язковим запасним варіантом. color: var(--accent, #333); Колір ⤢ rgb() / rgba()Колір із червоного, зеленого та синього каналів (і альфа-каналу). color: rgb(59 130 246 / 0.8); ⤢ hsl() / hsla()Колір із відтінку, насиченості та світлоти. color: hsl(210 80% 50%); ⤢ oklch()Колір у перцептивному просторі OKLCH (стала світлота). color: oklch(0.7 0.15 250); ⤢ color-mix()Суміш двох кольорів у заданому колірному просторі. color: color-mix(in srgb, red 40%, blue); ⤢ color-contrast()Варіант зі списку з найкращим контрастом щодо базового кольору. color: color-contrast(#fff vs #000, #777); ⤢ hwb()Колір із відтінку, білизни та чорноти. color: hwb(210 10% 20%); ⤢ lab()Колір у просторі CIELAB (світлота, осі a та b). color: lab(52% 40 59); ⤢ lch()Колір у просторі CIELAB (світлота, хрома, відтінок). color: lch(52% 49 24); ⤢ color()Колір у будь-якому визначеному колірному просторі за координатами. color: color(display-p3 1 0.4 0.2); ⤢ light-dark()Перший колір у світлій схемі, другий — у темній. color: light-dark(#1a1a1a, #f5f5f5); Градієнти та зображення ⤢ linear-gradient()Градієнт уздовж прямої лінії між кольоровими зупинками. background: linear-gradient(90deg, #4b9fff, #2ee6a6); ⤢ radial-gradient()Градієнт, що розходиться назовні з однієї точки. background: radial-gradient(circle, #fff, #000); ⤢ conic-gradient()Градієнт, що обертається навколо центральної точки. background: conic-gradient(red, yellow, red); ⤢ url()Завантажує зовнішній ресурс: зображення, шрифт або SVG. background-image: url(hero.webp); ⤢ image-set()Обирає найкраще зображення для роздільної здатності пристрою. background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x); ⤢ cross-fade()Змішує два зображення із заданим відсотком. background-image: cross-fade(30%, url(a.webp), url(b.webp)); Фільтри та форми ⤢ blur() / brightness() / saturate()Піксельні фільтри, що використовуються у властивості filter. filter: blur(4px) brightness(1.1); ⤢ path()Рядок SVG-шляху, яким малюють обріз або форму. clip-path: path('M10 10 H 90 V 90 Z'); ⤢ attr()Читає атрибут елемента; обмежене використання поза content. content: attr(data-label); ⤢ contrast()Регулює контраст елемента. filter: contrast(1.4); ⤢ drop-shadow()Малює тінь, що повторює альфа-форму елемента. filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3)); ⤢ grayscale()Перетворює елемент на відтінки сірого. filter: grayscale(100%); ⤢ invert()Інвертує кольори елемента. filter: invert(1); ⤢ sepia()Накладає сепієвий тон. filter: sepia(0.6); ⤢ hue-rotate()Обертає відтінок кольорів елемента. filter: hue-rotate(90deg); ⤢ opacity()Задає прозорість елемента через filter. filter: opacity(0.5); ⤢ circle()Кругла форма для clip-path або shape-outside. clip-path: circle(40% at 50% 50%); ⤢ ellipse()Еліптична форма для clip-path або shape-outside. clip-path: ellipse(50% 35% at 50% 50%); ⤢ inset()Прямокутна форма із заокругленими кутами для clip-path. clip-path: inset(10px 10px 10px 10px round 8px); ⤢ polygon()Багатокутна форма зі списку точок. clip-path: polygon(50% 0, 100% 100%, 0 100%); Трансформація ⤢ translate()Переміщує елемент уздовж осей X і Y. transform: translate(10px, 20px); ⤢ rotate()Обертає елемент навколо його центру. transform: rotate(45deg); ⤢ scale()Масштабує елемент уздовж осей X і Y. transform: scale(1.25); ⤢ skew()Нахиляє елемент уздовж осей X і Y. transform: skew(10deg, 0deg); ⤢ matrix()Одна 2D-трансформація з шести матричних значень. transform: matrix(1, 0, 0.5, 1, 10, 0); ⤢ perspective()Задає глибину 3D-перспективи для дочірніх елементів. transform: perspective(600px) rotateY(20deg); Анімація та лічильники ⤢ cubic-bezier()Крива плавності з чотирьох контрольних точок. transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1); ⤢ steps()Плавність, що рухається рівними кроками. animation-timing-function: steps(8, end); ⤢ counter()Поточне значення лічильника CSS як вміст. content: counter(chapter); ⤢ counters()Значення лічильника та всіх його предків, об'єднані рядком. content: counters(item, "."); ⤢ progress()Від 0 до 1 у міру просування значення між початком і кінцем. opacity: progress(scroll(), 0, 50vh); ⤢ random()Випадкове число з діапазону, фіксоване для кожного елемента. rotate: random(from -5deg to 5deg); ⤢ sin()Синус кута для виразів calc. translateY(calc(1rem * sin(45deg))); ⤢ cos()Косинус кута для виразів calc. translateX(calc(1rem * cos(45deg)));