Соберите градиент, тень или сетку мышью и заберите готовый код. Плюс калькуляторы для того, что в уме считать неудобно.
Найдено инструментов: 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() задаёт минимум, желаемое значение и максимум. Размер шрифта или отступа плавно тянется за шириной экрана, вместо того чтобы скачком меняться на брейкпоинтах. Меньше кода и нет уродливого прыжка на границе.
