Соберите градиент, тень или сетку мышью и заберите готовый код. Плюс калькуляторы для того, что в уме считать неудобно.
Найдено инструментов: 12Задайте минимальный и максимальный размер — калькулятор соберёт clamp(), и шрифт будет плавно тянуться за шириной экрана.
Визуальный генератор CSS Flexbox: настройте направление, выравнивание и перенос элементов и скопируйте готовый код CSS и Tailwind.
Визуальный генератор CSS Grid: постройте адаптивную сетку без кода и скопируйте результат в CSS или Tailwind.
Вставьте селектор и узнайте его вес — станет понятно, какое правило победит в каскаде и почему стиль не применяется.
Потяните за контрольные точки и получите свою cubic-bezier() для transition-timing-function или animation-timing-function.
Переводите цвет между HEX, RGB, HSL, CMYK и LAB: вставьте значение в любом формате — остальные посчитаются автоматически.
Вставьте стили и получите сжатый CSS: комментарии и пробелы уйдут, размер файла упадёт на 20–40%.
Переведите rem в px или px в rem: введите значение, задайте базовый размер шрифта — результат посчитается сразу.
Настройте тень блока или текста ползунками и заберите готовый CSS: смещение, размытие, растяжение, внутренняя тень.
Соберите CSS-градиент визуально — линейный, радиальный или конический — настройте цветовые точки и направление и скопируйте готовый код CSS и Tailwind.
Подберите цвет текста и фона так, чтобы надпись читалась: коэффициент контрастности и вердикт по WCAG считаются сразу.
Соберите анимацию на @keyframes или возьмите готовую: появление, пульсация, загрузка, анимация кнопки при наведении.
Инструменты добавляются постоянно. Расскажите, чего вам не хватает, — это лучший способ повлиять на то, что появится следующим.
CSS устроен так, что многие вещи проще подобрать глазами, чем вычислить. Ровно та тень, ровно тот угол градиента, ровно та кривая плавности — всё это быстрее находится ползунком, чем правкой чисел в редакторе и перезагрузкой страницы.
Инструменты в этом разделе делают именно это: вы двигаете ручки, видите результат сразу и забираете готовый код. Отдельно стоят калькуляторы — специфичность селектора, clamp(), перевод px в rem: их не подберёшь на глаз, зато считаются они по чётким правилам.
Свойства, которые здесь генерируются, поддерживаются всеми современными браузерами: градиенты, тени, Grid, Flexbox, clamp(). Префиксы вроде -webkit- давно не нужны и не добавляются — они только раздували бы код.
Специфичность решает, какое правило победит, когда два разных селектора задают одно свойство одному элементу. Считается она не «по количеству символов», а по числу id, классов и тегов в селекторе — и именно поэтому иногда стиль не применяется, хотя выглядит правильным. Калькулятор показывает вес наглядно.
clamp() задаёт минимум, желаемое значение и максимум. Размер шрифта или отступа плавно тянется за шириной экрана, вместо того чтобы скачком меняться на брейкпоинтах. Меньше кода и нет уродливого прыжка на границе.
