Размеры и математика ⤢ 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; Grid ⤢ minmax()Диапазон размеров для дорожек grid, между минимумом и максимумом. 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()Истина, когда совпадает media query, для использования внутри 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()Читает HTML-атрибут; ограниченное применение вне 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()Кривая easing из четырёх контрольных точек. transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1); ⤢ steps()Easing, прыгающий равными шагами. animation-timing-function: steps(8, end); ⤢ counter()Текущее значение CSS-счётчика в виде content. 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)));