Какие CSS-функции существуют?

CSS-функции — это специальные выражения, встроенные в язык, которые принимают аргументы и возвращают значение, используемое как обычное CSS-свойство. Они позволяют вычислять размеры, смешивать цвета, строить градиенты и трансформировать элементы прямо в стилях, без участия JavaScript.

Основные категории

• Математические: calc(), min(), max(), clamp(), abs(), round().
• Переменные: var() для чтения custom properties.
• Цветовые: rgb(), rgba(), hsl(), hsla(), color-mix(), lab(), lch().
• Трансформации: translate(), rotate(), scale(), skew(), matrix().
• Градиенты и фильтры: linear-gradient(), radial-gradient(), blur(), brightness().
• Ссылки и ресурсы: url(), attr(), counter().

Пример использования

:root {
  --gap: 16px;
  --brand: hsl(210 90% 50%);
}

.card {
  /* адаптивная ширина без media-запросов */
  width: clamp(280px, 50vw, 640px);
  padding: calc(var(--gap) * 2);
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 60%, white));
  transform: translateY(-4px) scale(1.02);
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(0) scale(1);
}

Где применяется

Функции calc() и clamp() незаменимы для адаптивной типографики и отступов, var() — для тем и дизайн-систем, color-mix() — для генерации оттенков из базового цвета, а transform-функции — для анимаций и hover-эффектов. Комбинируя их, можно строить сложные адаптивные интерфейсы без единой строки JS.

Итог: CSS-функции стоит применять везде, где значение зависит от других значений — размеров, переменных или цветов; это делает стили гибкими, читаемыми и легко поддерживаемыми.